Loader in page with angle

There is an angled plugin that does what you need.

link

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

One way to achieve this goal 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 requisition counter for each request and decrements when this request is answered or suffers a failure. For each such action we will issue a warning type.

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 policy responsible for the loading screen.

Inside the directive:

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

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