Angularjs loading screen on ajax request

Question

Using Angularjs , I need to show a loading screen (a simple spinner) until ajax request is complete. Please suggest any idea with a code snippet.

Answer 1

Instead of setting up a scope variable to indicate data loading status, it is better to have a directive does everything for you:

angular.module('directive.loading', [])      .directive('loading',   ['$http' ,function ($http)     {         return {             restrict: 'A',             link: function (scope, elm, attrs)             {                 scope.isLoading = function () {                     return $http.pendingRequests.length > 0;                 };                  scope.$watch(scope.isLoading, function (v)                 {                     if(v){                         elm.show();                     }else{                         elm.hide();                     }                 });             }         };      }]); 

With this directive, all you need to do is to give any loading animation element an 'loading' attribute:

<div class="loading-spiner-holder" data-loading ><div class="loading-spiner"><img src="..." /></div></div> 

You can have multiple loading spinners on the page. where and how to layout those spinners is up to you and directive will simply turn it on/off for you automatically.

Answer 2

Here's an example. It uses the simple ng-show method with a bool.

HTML

<div ng-show="loading" class="loading"><img src="...">LOADING...</div> <div ng-repeat="car in cars">   <li>{{car.name}}</li> </div> <button ng-click="clickMe()" class="btn btn-primary">CLICK ME</button> 

ANGULARJS

  $scope.clickMe = function() {     $scope.loading = true;     $http.get('test.json')       .success(function(data) {         $scope.cars = data[0].cars;         $scope.loading = false;     });   } 

Of course you can move the loading box html code into a directive, then use $watch on $scope.loading. In which case:

HTML:

<loading></loading> 

ANGULARJS DIRECTIVE:

  .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();               });         }       }   }) 

PLUNK: http://plnkr.co/edit/AI1z21?p=preview