15

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?

Mark
  • 14,820
  • 17
  • 99
  • 159

2 Answers2

17

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' });
Mark Coleman
  • 40,542
  • 9
  • 81
  • 101
  • So, `ng-cloak` will hide whatever element I put it on and Angular will remove this directive once the remote view is loaded? Im struggling to understand how I can use this, if I hide my view, I still need to display a 'loading' element (which will ultimately be a full-screen element) and once the view is loaded, I then need to hide the loading view. – Mark May 28 '13 at 11:55
  • Gave an example of `ngCloak` for how we display a splash screen while angularjs is loading up. – Mark Coleman May 28 '13 at 12:03
  • 2
    Thank you for updating your example, but I am still confused, sorry if there is something fundamental that I dont understand, im still learning Angular. With you example, if I was to add ng-cloak to my ng-view `
    ` that would hide that span until the scene was compiled, then it would show it. Now, if I add a new `
    ` as the parent of the first `span` that may work, but I dont know how it would then disappear once the scene is loaded
     – Mark May 28 '13 at 22:56
  • @Mark Can I use the promise tracker with $resource? – pedrommuller Sep 24 '13 at 15:14
12

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.

Valeh Hajiyev
  • 3,216
  • 4
  • 19
  • 28