Implementing loading spinner using httpInterceptor and AngularJS 1.1.5 - angularjs

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>

Answer 2

"responseInterceptors" was deprecated. "interceptors" replaced it with many enhancements in a preview version. Off the top of my head I don't remember which version. Documentation on this is sparse, so you're probably best off examining the source code.
The gist of the change looks like this:
$httpProvider.interceptors.push(function($q, $rootScope) {
return {
'request': function(config) {
// intercepts the request
},
'response': function(response) {
// intercepts the response. you can examine things like status codes
},
'responseError': function(response) {
// intercepts the response when the response was an error
}
}
});
In the angular source you will find documentation under "* # Interceptors" in the $HttpProvider function. There is an example usage very similar to what I posted above.

Answer 3

The provided/accepted solution is fine IF you want to include JQuery in your solution, which the AngularJS team is recommending against going forward.
element.show/.hide are not supported in Angular's JQLite....
So the following refactors are necessary to run in an non-jquery session:
Change the HTML element to add a class of 'hidden'
<div id="loaderDiv" loader class="hidden">
<img src="Content/images/yourgif.gif" class="ajax-loader" />
</div>
Add the hidden class to your css:
.hidden{display:none !important}
And tweak the directive thus:
(function() {
'use strict';
angular
.module('your_app')
.directive('yourSpinner', yourSpinner);
yourSpinner.$inject = ['$rootScope'];
function yourSpinner($rootScope) {
return function($scope, element, attrs) {
$scope.$on("loader_show", function () {
if (element.hasClass("hidden")) {
element.removeClass("hidden")
}
});
return $scope.$on("loader_hide", function () {
if(!element.hasClass("hidden")){
element.addClass("hidden")
}
});
}
}
})();
The factory is fine as-is.