4

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?

3 Respostas 3

2

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.

2

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.

JSFiddle Demo

0

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:

https://stackoverflow.com/questions/17838708/implementing-loading-spinner-using-httpinterceptor-and-angularjs-1-1-5

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.

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 .