Wait angular compile then load page [AngularJS]

Question

I have problem when page loading on the page showing angularjs variables in the plain text in few sec till angular compile... Is there any way to show loader or just blank till angular compile?

Here is my html:

<li ng-repeat="x in notys" class="item js-item">
                <a href="/project/<% x.project_id %>"  class="notification-link">
                    <div class="details">
                        <!--SERVER SIDE-->
                        <span ng-if="x.type == 'AnswerProject'" class="title">New answer added <i>"<% x.subject %>"</i> for <b><% x.body %></b> group, click to check your project.</span>
                        <span ng-if="x.type == 'QuestionProject'" class="title">New question/s added for <b> <% x.subject %> </b> group, check your project <b> <% x.body %> </b></span>

                        <span ng-if="x.type == 'GroupProject'" class="title">New group created: <b> <% x.subject %> </b>. New project assigned to you <b> <% x.body %> </b></span>
                        <span ng-if="x.type == 'GroupProjectUpdate'" class="title">Group <b> <% x.subject %> </b> updated, for <b> <% x.body %> </b> project.</span>

                        <span ng-if="x.type == 'NewComment'" class="title">User <b> <% x.subject %> </b> commented: <b> <% x.body %> </b> in some of your projects. Click to check.</span>

                        <!--CLIENT SIDE-->
                        <span ng-if="x.type == 'NewCommentClient'" class="title">User <b> <% x.name %> </b> commented: <b> <% x.text %> </b> in some of your projects. Click to check.</span>

                        <span ng-if="x.type == 'GroupProjectClient'" class="title">New group created: <b> <% x.name %> </b>. New project assigned to you <b> <% x.project_name %> </b></span>
                        <span ng-if="x.type == 'GroupProjectUpdateClient'" class="title">Group <b> <% x.name %> </b> updated, for <b> <% x.project_name %> </b> project.</span>

                        <span ng-if="x.type == 'AnswerProjectClient'" class="title">New answer added <i>"<% x.answer %>"</i> for <b><% x.groupName %></b> group, click to check your project.</span>
                        <span ng-if="x.type == 'QuestionProjectClient'" class="title">New question/s added for <b> <% x.gName %> </b> group, check your project <b> <% x.name %> </b></span>

                        <p><time-ago from-time="<% x.created_at %>"></time-ago></p>
                    </div>
                </a>
            </li>

You can implement loader or spinner in such cases. – Satyam Koyani Sep 29 '15 at 14:39 — Satyam Koyani, Sep 29 '15 at 14:39

score 4 · Accepted Answer · answered Sep 29 '15 at 14:52

4

AngularJS actually has a directive to prevent uncompiled content from being displayed: ng-cloak

https://docs.angularjs.org/api/ng/directive/ngCloak

You can apply on a div/element in DOM preventing every element underneath it from being displayed before compile

<div ng-cloak>
</div>

answered Sep 29 '15 at 14:52

rave

1,022
1
12
23

This is a good answer too, by far the easiest. I do prefer to manually bootstrap the application anyway, so I can have more control over when it starts. – abiwer Sep 29 '15 at 14:57

score 1 · Answer 2 · answered Sep 29 '15 at 14:55

Your problem is that the text is visible while you are loading the page's resources. I would suggest using css to set the html tag to display:none, then using angular's manual bootstrap option so you can show the html tag only after bootstrap. Here is an example:

    // to turn off automatic bootstrapping, remove the ng-app tag from the html

    var app = angular.module('someapp', []),
        htmlNode = document.getElementsByTagName('html')[0];

    // wait for the document to be ready - similar to jquery
    angular.element(document).ready(function(){

        // manually bootstrap the element
        angular.bootstrap(angular.element(), ['gts-frontEnd']);

        // show the html element again
        htmlNode.style.display = 'block';
    });

Here is the documentation

score 0 · Answer 3 · edited May 23 '17 at 12:06

This really depends on your specific use case, but a simple way would follow a pattern like this:

.controller('MainCtrl', function ( $scope, myService ) {
  $scope.loading = true;
  myService.get().then( function ( response ) {
    $scope.items = response.data;
  }, function ( response ) {
    // TODO: handle the error somehow
  }).finally(function() {
    // called no matter success or failure
    $scope.loading = false;
  });
});
And then react to it in your template:

<div class="spinner" ng-show="loading"></div>
<div ng-repeat="item in items>{{item.name}}</div>

source: Showing Spinner GIF during $http request in angular

Wait angular compile then load page [AngularJS]

3 Answers3