Implementing loading spinner using httpInterceptor and AngularJS 1.1.5

Question

I've found an example of a loading spinner for http/resource calls here on SO:

• Set rootScope variable on httpIntercept (Plunker: http://plnkr.co/edit/32Mh9UOS3Z4vnOtrH9aR?p=preview)

As you can see the implementation works (using AngularJS 1.0.5). However if you change the sources to AngularJS 1.1.5. The example does not work anymore.

I learned that $httpProvider.responseInterceptors is deprecated in 1.1.5. Instead one should use $httpProvider.interceptors

Unfortunately just replacing the above string in the Plunker did not solve the problem. Has anyone ever done such a loading spinner using HttpInterceptor in AngularJS 1.1.5?

Thanks for your help!

Michael

Answer 1

Thanks to Steve's hint I was able to implement the loader:

Interceptor:

.factory('httpInterceptor', function ($q, $rootScope, $log) {      var numLoadings = 0;      return {         request: function (config) {              numLoadings++;              // Show loader             $rootScope.$broadcast("loader_show");             return config || $q.when(config)          },         response: function (response) {              if ((--numLoadings) === 0) {                 // Hide loader                 $rootScope.$broadcast("loader_hide");             }              return response || $q.when(response);          },         responseError: function (response) {              if (!(--numLoadings)) {                 // Hide loader                 $rootScope.$broadcast("loader_hide");             }              return $q.reject(response);         }     }; }) .config(function ($httpProvider) {     $httpProvider.interceptors.push('httpInterceptor'); }); 

Directive:

.directive("loader", function ($rootScope) {     return function ($scope, element, attrs) {         $scope.$on("loader_show", function () {             return element.show();         });         return $scope.$on("loader_hide", function () {             return element.hide();         });     }; } ) 

CSS:

#loaderDiv {    position: fixed;    top: 0;    right: 0;    bottom: 0;    left: 0;    z-index: 1100;    background-color: white;    opacity: .6; }  .ajax-loader {    position: absolute;    left: 50%;    top: 50%;    margin-left: -32px; /* -1 * image width / 2 */    margin-top: -32px; /* -1 * image height / 2 */    display: block; } 

HTML:

<div id="loaderDiv" loader>     <img src="src/assets/img/ajax_loader.gif" class="ajax-loader"/> </div>