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 while the XHR request is off getting the template.

Once the template has been downloaded, I would like to invoke a page transition, but I am really stumped as to how to structure this or execute it.

Can this be done simply or is there any examples that are around?

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:

  <div ng-show="pizzaTracker.active()" style="background:pink;">
    <h1 style="text-align: center;">
      Loading Pizza
      <br />{{pizzaPercent() | number:2}}%
    </h1>
  </div>

And to register a $http to the promise tracker

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

Answer 2

I've solved this problem by writing custom HTTP Interceptor. Here is sample code:

var app = angular.module('yourapp', ['loadingService']);

app.config(function ($httpProvider) {
    $httpProvider.responseInterceptors.push('myHttpInterceptor');
    var spinnerFunction = function (data, headers) {
        $('#loading').show();
        return data;
    };
    $httpProvider.defaults.transformRequest.push(spinnerFunction);
});

angular.module('loadingService', [],
    function ($provide) {

        $provide.factory('myHttpInterceptor', function ($q, $window) {
            return function (promise) {
                return promise.then(function (response) {
                    $('#loading').hide();
                    return response;
                }, function (response) {
                    $('#loading').hide();
                    return $q.reject(response);
                });
            };
        });
    });

NOTE: There should be an element with the ID of loading in the DOM.