Angular JS loading screen and page animation

Question

I am learning AngularJS for a current project and my site has around 6 - 7 pages. I am using the /#/ navigation scheme and I would like to introduce a loading/please wait screen

Answer 1

To Show a loading message while AngularJs is Bootstrapped

You can use ngCloak

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

Example CSS

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak
{
    display: none;
}

#splash-page.ng-cloak  /*<-- This has higher specificity so it can display a splash screen*/
{
    display: block;
}

To Show a loading message via a promise

We actulaly use the a promise tracker that lets you track promises and display a message if they are active which is located on github

From the demo:

  

    

      Loading Pizza
      
{{pizzaPercent() | number:2}}%
    
  

And to register a $http to the promise tracker

$http.get('flavor.json', { tracker: 'pizza' });