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.
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadePreciso 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.
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
});
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.
$scope.loading = false
, quando voce faz qualquer requisicao, voce setatrue
e quando terminar setafalse
. no html, voce coloca<div ng-if="loading == true"> loading <div>