How to make the boot screen until angular loads all the data?

Create a script that will hang a picture on the whole body and stick it into the head.

But how to check that the angular is loaded (that is, all modules, controllers are completed)? And already for this event to remove that block with a picture

  • ng-cloak hides an element while the binding has not worked - Grundy
  • I know this, but I want to make the boot screen, they say, wait for the site to load, and when angular has already fully completed all the components, I have all initialized to remove it so that I don’t have to write ng-cloak or via ng-bind so that there is no empty site - Khotey Vitaliy
  • stackoverflow.com/questions/21294917/… - Grundy

1 answer 1

1 option. You can make as a substrate an image in gif rendered as ng-view or ui-view. When the content is loaded, it will close this picture.

 <div ui-view></div> <div class="page-loading"></div>

Option 2. Track the event at $ rootScope.
For ng-view respectively

 $rootScope.$on('$routeChangeSuccess', function() { $('.page-loading').hide(); });

For ui-view respectively

 $rootScope.$on('$stateChangeSuccess', function() { $('.page-loading').hide(); });

If work with jQuery respectively in the general directive to the entire site.

  • and if there is no ng-view or ui-view ? Well, using jQuery directly in angular is not very good, for this purpose there are built-in tools in the angulyar - Grundy
  • @Grundy can be used JqLite, you can just hang up ng-show on the download icon, weight options. Of course it's better without jquery. If there is no ui-view and ng-view, you can use $ timeout, which will work after displaying all the directives - Namig
  • can explain if working with jQuery respectively in a common directive to the entire site. ? you use it not in the directive - Grundy
  • @Grundy why not in the general directive? If the boot icon is needed on all pages - Namig
  • $rootScope.$on - Is this a directive? - Grundy