Como criar um loading spinner com angularjs para chamadas $http

Imagem ilustrativa - Como criar um loading spinner com angularjs para chamadas $http

Se você começou a estudar Angularjs, uma dúvida que pode aparecer é como construir um Loading das chamadas Http, eu já pesquisei muito na internet e existem soluções muito complexas por ai. Como eu e você não gostamos de soluções complexas, vamos fazer uma diretiva que vai resolver esse problema:

A ideia é a seguinte:

  • Vamos criar uma diretiva
    • Essa diretiva vai identificar se está ocorrendo chamadas http
    • Se tiver, ela exibe
    • Se não tiver, ela tira a exibição
  • Associar essa diretiva ao elemento de carregamento

O código da diretiva ifLoading ficou dessa maneira:

(function() {

    angular
    .module('app')
    .directive('ifLoading', ifLoading);

    ifLoading.$injector = ['$http'];

    function ifLoading($http){

        return {
            restrict: 'A',
            link: function(scope, elem) {
                scope.isLoading = isLoading;

                scope.$watch(scope.isLoading, toggleElement);

                ////////

                function toggleElement(loading) {

                  if (loading) {
                    elem[0].style.display = "block";
                  } else {
                    elem[0].style.display = "none";
                  }
                }

                function isLoading() {
                  return $http.pendingRequests.length > 0;
                }
            }
        }
    };

})();

Para usá-la, vamos agora chamar dentro de um elemento:

<div if-loading>
    Carregando
</div>

Lembrando que chamamos if-loading e não ifLoading porque por convensão do Angular, nomes em CamelCase são transformados para divisão com traço.

É isso, simples, elegante, reutilizável e portátil. Esse post foi inspirado em: http://g00glen00b.be/fun-angularjs-http-loading-indicator/