Estou tentando implementar spinner loanding no meu projeto em angularjs, já faz um tempo! o spinner deve rodar sempre que uma requisição for executada.
Que biblioteca uso?
Você pode usar dessa forma, ele só vai aparecer enquanto $scope.loading
for true
.
app.controller('myCtrl', function ($scope, $http) {
// Show loading spinner.
$scope.loading = true;
$http.get('/some/awesome/content')
.success(function (data) {
// Do stuff with data.
})
.catch(function (err) {
// Log error somehow.
})
.finally(function () {
// Hide loading spinner whether our call succeeded or failed.
$scope.loading = false;
});
});
<div ng-controller="myCtrl">
<img id="mySpinner" src="/my/loading/spinner.gif" ng-show="loading" />
</div>
Ou para ficar melhor ainda, você pode criar uma diretiva, assim:
.directive('loading', function () {
return {
restrict: 'E',
replace:true,
template: '<div class="loading"><img src="..."/>LOADING...</div>',
link: function (scope, element, attr) {
scope.$watch('loading', function (val) {
if (val)
$(element).show();
else
$(element).hide();
});
}
}
})
Toda vez que você setar $scope.login = true;
em algum lugar, vai aparecer o loader.
Você pode estar utilizando esse módulo angular-loading-bar ele é muito fácil de implementar e modificar. Com certeza atende a sua necessidade.
Ele funciona da seguinte forma, toda requisição do serviço $http
ele irá "capturar" e irá injetar em seu código uma barra de progresso e também no canto inferior direito um loading.
No próprio github do projeto existe uma documentação de como implementar.
Primeiro passo para utiliza-lo é colocar a sua dependência
angular.module('myApp', ['angular-loading-bar'])
E também não esqueça de colocar seus arquivos no projeto
<link rel='stylesheet' href='build/loading-bar.min.css' type='text/css' media='all' />
<script type='text/javascript' src='build/loading-bar.min.js'></script>
Feito isso qualquer requisição ele será ativado.
Existem algumas maneiras. Caso você queira mostrar o spinner sempre que o Angular fizer uma requisição, implemente uma Interceptor Factory, como na resposta aceita a esta pergunta no SO em Inglês:
Este interceptor será executado sempre que uma requisição ao serviço $http for feita. A chave é esta linha aqui:
$httpProvider.interceptors.push('httpInterceptor');
Que injeta o Interceptor no provider.