1

Preciso de um loader em angular para a página toda inclusive o html, não só as requisições ajax. Alguma sugestão?

Exemplo no link abaixo, faz o preloader e carrega o conteudo.

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

1
  • crie um $scope.loading = false, quando voce faz qualquer requisicao, voce seta true e quando terminar seta false. no html, voce coloca <div ng-if="loading == true"> loading <div>
    – fsi
    21/11/2016 às 13:29

2 Respostas 2

3

Uma forma de atingir este objetivo é saber quando todas as requisições pendentes foram respondidas e emitir um aviso quando isso acontecer.

Para isso, podemos utilizar um interceptor do AngularJS que incrementa um contador de requisições a cada requisição e decrementa quando essa requisição é respondida ou sofre alguma falha. Para cada ação dessa emitiremos um tipo de aviso.

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');
});

Feito isso, basta monitorar os eventos dentro de um diretiva responsável pela tela de loading.

Dentro da diretiva:

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

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

Existe um plugin em angular que faz o que você precisa.

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

Esse plugin vai carregar o loader toda vez que for feita uma requisição, e enquanto a requisição estiver sendo processada.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .