CODEWITHSUNDEEP
javascriptangularjs
Vladimir Djukic
Vladimir Djukic

Reputation: 2072

Wait angular compile then load page [AngularJS]

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>

Upvotes: 0

Views: 2202

Answers (3)

abiwer
abiwer

Reputation: 121

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

Upvotes: 1

rave
rave

Reputation: 1032

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>

Upvotes: 4

Ami Patel
Ami Patel

Reputation: 296

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

Upvotes: 0

Related Questions