CODEWITHSUNDEEP
javascriptangularjs
Alessandro Cappellozza
Alessandro Cappellozza

Reputation: 5

AngularJs Prerender

PREFACE: I have an AngularJS application with a controller. In the view of this controller I fill a ng-repeat with a list using a JSON object. If I have a slow device such as a phone, the render can be so slow that I can view an empty page for a while before the content arrives some seconds later.

QUESTION: How can I show a pre-load while I wait for the render? Is there some trick or event I can bind to to show a "Waiting" row then hide this row and show the list rendered (when complete).

Thanks all.

P.S. Without jQuery and friends, AngularJS only.

Upvotes: 0

Views: 1856

Answers (3)

noypi
noypi

Reputation: 991

use ng-cloak plnkr: http://plnkr.co/edit/lgNSdTrMMexHykUBIqnT?p=preview

this example is very much applicable and is NOT LIMITED to ng-repeat, if you download this be reasonable -- put a comment please

NOTE: this Genius example is working, put a comment please if you will downvote it

althought the example uses manual bootstrapping, the behavior is the same. it just use manual bootstrap to demonstrate what it would look like if angularjs is not done bootstrapping yet.

<!DOCTYPE html>
<html>

  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
    <script>

      function jsBootStrap() {
        console.log('bootstrapping');
        angular.bootstrap(document);
      }

      angular.module("ng").run(function($rootScope){
        $rootScope.DisplayMyData = "AngularJS Loves Noypi";
      });

    </script>

    <style>
      .preview{
        display:none;  
      }
      .ng-cloak.preview {
        color:blue;
        display:block!important;
      }       
      .ng-cloak.realview {
        display:none;
      }
    </style>
  </head>

  <body>
    <div class="ng-cloak preview">
      I was shown before AngularJS. <br/>
      Credits <u>ngtutorial.com/learn/bootstrap</u>.
    </div> 
    <div class="ng-cloak realview">
        <span ng-repeat="i in [1,2,3,4]">
            {{$index}} = {{DisplayMyData}}<br/>
        </span><br/>
    </div>


    <button onclick="jsBootStrap()">bootstrap document</button>

  </body>

</html>

Upvotes: 3

Rituraj ratan
Rituraj ratan

Reputation: 10378

show loading until data is not load

<p ng-hide="list.length">Loading... or here can set a loading image path in img tag</p>

when json data find it will show 

<p ng-show="list.length">
<div ng-repeat="list">// your json data in list
</div>
</p>

Upvotes: 1

ricick
ricick

Reputation: 5766

how about

<p ng-show="list.length<1">Waiting...</p>

Upvotes: 3

Related Questions