CODEWITHSUNDEEP
javascriptangularjscordovaangularjs-ng-repeat
tuks
tuks

Reputation: 790

Angular.js show loading animation until DOM is ready

I'm building a Phonegap application with Angular.js. From the index page you can click on the "Show user list" button which redirects you to a page which loads a template in ng-view. The template contains the list of users, which are loaded from $rootScope.users and rendered with ng-repeat. The problem is that there are many users (about 120 for now) so the page rendering is slow, especially in Phonegap. So, when I click on the "Show user list" button, the URL in the address bar changes immediately, but the content in ng-view changes only after a few seconds. Because of that, I want to display a loading animation until the view is rendered, so the user knows that the page is loading.

I created a loading animation - a div with ng-show="loading.visible". On the button, I set ng-click="loading.visible=true" and in the controller of the "users" page i wrote: 

angular.element(document).ready(function(){
            $scope.loading.visible = false;
        })

It works great the first time the button is pressed. The animation shows immediately and disappears when the user list shows. But when I go back to the index page, and press the "Show user list" button again, the loading animation doesn't show up until the user list is rendered, then it shows up for about 100ms and disappears.

I'm new to Angular so I'm not really sure how it works, can someone tell me what's wrong and is there a better solution to handle this problem? Thanks

Upvotes: 4

Views: 2959

Answers (1)

Adarsh Nahar
Adarsh Nahar

Reputation: 319

try using below in your page controller

$scope.$on('$viewContentLoaded', function () 
{
     $scope.loading.visible = false;
});

instead of 

angular.element(document).ready(function(){});

Also look for ng-cloak in angular documentation.

Hope this helps.

Thanks

Upvotes: 4

Related Questions