Loader on angled page

Question

I need an angular download for the whole page including html, not just ajax requests. Any suggestions?

Example on the link below, preload and load the content.

http://tympanus.net/Tutorials/PagePreloadingEffect/

Answer 1

One way to achieve this is to know when all pending requests have been answered and to issue a warning when this happens.

To do this, we can use an Angularjs Interceptor that increments a request counter to each request and decreases when this request is answered or suffers some failure. For every action of this we will issue a kind of warning.

angular.module('app').factory('LoadingInterceptor',
  function ($q, $rootScope) {
    var requisicoes = 0;

    return {
        request: function (config) {

            requisicoes++;

            if(requisicoes === 1){
                $rootScope.$broadcast('loading:progredindo')                    
            }

            return config || $q.when(config);
        },

        response: function (response) {
            requisicoes--;

            if(requisicoes === 0){
                $rootScope.$broadcast('loading:terminou')                    
            }

            return response || $q.when(response);
        },

        responseError: function (response) {

            requisicoes--;

            if(requisicoes === 0){
                $rootScope.$broadcast('loading:terminou')                    
            }

            return $q.reject(response);
        }
    };
}).config(function ($httpProvider) {
    $httpProvider.interceptors.push('LoadingInterceptor');
});

Once this is done, simply monitor the events within a directive responsible for the loading screen.

Within the directive:

$rootScope.$on("loading:progredindo", function(){
    //Mostrar tela de loading
});

$rootScope.$on("loading:terminou", function(){
    //Esconder tela de loading
});

Answer 2

There is an angular plugin that does what you need.

https://github.com/chieffancypants/angular-loading-bar

This plugin will load the Loader every time a request is made, and while the request is being processed.