AngularJS: Exibindo um Spinner ao processar
Autor: Willian Parige | Publicado: 2017-01-12T15:03:00-02:00




O AngularJS já um dos Framework mais utilizado no mercado, hoje vou apresentar como implementar um Spinner, uma animação enquanto o usuário aguarda o final do processamento. O Spinner que iriei utilizar é uma directive do próprio AngularJS, assim não será necessário imagens ou Gifs.

Podemos dizer que o Spinner é muito utilizado nas telas atualmente, assim o usuário poderá saber que algo está ocorrendo enquanto ele está aguardando, o que fica muito estranho quando uma página não exibe nada e você fica esperando.



O código que irei implementar é bastante simples, meu exemplo é apenas em um botão em que irá ativar o Spinner, assim você saber o que deverá implementar na sua tela.




&lt;html&gt;
   &lt;head&gt;
      &lt;!-- AngularJS --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"&gt;&lt;/script&gt; 
      &lt;!--Spinner --&gt;
      &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/spin.js/2.0.1/spin.js"&gt;&lt;/script&gt;
      &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/angular-spinner/0.5.1/angular-spinner.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
   &lt;body ng-app="appExemplo" ng-controller="exemploController"&gt;
      &lt;!-- Spinner --&gt;
      &lt;div ng-if="processando" us-spinner&gt;&lt;/div&gt;
      &lt;!--Botão para ativar ou desativar o Spinner --&gt; 
      &lt;button ng-click="ativar()"&gt; Ativar &lt;/button&gt;
      &lt;script&gt;
         var appExemplo = angular.module('appExemplo', ['angularSpinner']);
         
         //Criando o controller
         appExemplo.controller('exemploController', function ($scope) {
         
           //Criando o método Ativar
           $scope.ativar = function(){
             //Exibe ou não o Spinner
             $scope.processando= !$scope.processando;
           };
         });
      &lt;/script&gt;
   &lt;/body&gt;
&lt;/html&gt;



Vamos a explicação do código acima:

Os 3 scripts importados no head são do Angular e os dois últimos do Spinner.



&lt;div ng-if="processando" us-spinner&gt;&lt;/div&gt; - Iremos exibir o Spinner quando o processando estiver true.



&lt;button ng-click="ativar()"&gt; Ativar &lt;/button&gt; - Criamos um botão para chamar o método Ativar, esse botão irá atualizar a variável processando para true ou false.



var appExemplo = angular.module('appExemplo', ['angularSpinner']); - Estamos criando nosso appExemplo e importando nosso angularSpinner.





$scope.ativar = function(){




 $scope.processing = !$scope.processing;




}; - Criamos nosso método Ativar que irá ser chamado pelo botão, ativando ou desativando a variável processando para exibir o Spinner.



Agora que criamos um botão para chamar o spinner, para que então seja exibido o spinner ao realizar algum processamento, o código ficará da seguinte maneira:



$scope.ativar = function(){
&nbsp; &nbsp; //Exibe o spinner no início do processamento

&nbsp; &nbsp; $scope.processando= true;
&nbsp; &nbsp; //Meio do código que deverá ser processado, podendo ser uma chamada ao banco, etc.
&nbsp; &nbsp; //Retira o spinner
&nbsp; &nbsp;&nbsp;$scope.processando= false;



&nbsp; };



No código acima, sempre que um houver um processamento, o spinner será exibido e depois retiramos ao final do processamento.

Baixe o exemplo aqui.






Até a próxima.

Abraços