Angularjs 1.3 $ http interceptors

Question

Currently, I have the following in my application to show loading animations whenever running $ http requests are launched and then hidden at the end;

app.config(['$httpProvider', function ($httpProvider) { var $http, interceptor = ['$q', '$injector', function ($q, $injector) { var error; function response(response) { // get $http via $injector because of circular dependency problem $http = $http || $injector.get('$http'); if ($http.pendingRequests.length < 1) { $('#loadingWidget').hide(); } return response; } function responseError(response) { if (response.status == 401) { alert("You have been logged out or have tried to access a restricted area, redirecting to the login screen..."); window.location = globals.siteUrl + 'login'; } else { // get $http via $injector because of circular dependency problem $http = $http || $injector.get('$http'); if ($http.pendingRequests.length < 1) { $('#loadingWidget').hide(); } } return $q.reject(response); } return function (promise) { $('#loadingWidget').show(); return promise.then(response, responseError); } }]; $httpProvider.responseInterceptors.push(interceptor); }]); 

I am trying to convert this to work with 1.3, but I just can't nail it. I refer to these $ http documents (interceptor section), but I'm not sure how to rewrite it. Can anyone help?

UPDATE: here is what I already tried:

 app.factory('xmHttpInterceptor', function ($q, $http, $injector) { return { // optional method 'response': function (response) { // get $http via $injector because of circular dependency problem $http = $http || $injector.get('$http'); if ($http.pendingRequests.length < 1) { $('#loadingWidget').hide(); } return response; }, // optional method 'responseError': function (rejection) { alert(rejection); // do something on error if (canRecover(rejection)) { return responseOrNewPromise } return $q.reject(rejection); } }; }); 

and

 app.config(['$httpProvider', 'xmHttpInterceptor', function ($httpProvider, xmHttpInterceptor) { $httpProvider.interceptors.push('xmHttpInterceptor'); }]); 

But the site does not load with:

 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.17/$injector/modulerr?p0=app&p1=Erro…s.org%2F1.3.0-beta.17%2F%24injector%2Funpr%3Fp0%3DxmHttpInterceptor%0A%20%...<omitted>...4) 

Answer 1

Since the problem has already been resolved by comments, I post it as a wiki community:

$httpProvider.responseInterceptors no longer supported in 1.3, you should use $httpProvider.interceptors .

- runTarm

and

Do not try to enter xmHttpInterceptor :

 app.config(['$httpProvider', function ($httpProvider) { $httpProvider.interceptors.push('xmHttpInterceptor'); }]); 

- David Bennett

Answer 2

For example, for use with the Angular Download Bar , try the following:

 angular.module( 'myApp', [ . . 'angular-loading-bar', . . ] ) 

and

 .config( [ '$httpProvider', function ( $httpProvider ) { $httpProvider.interceptors.push( function ( $q, $injector, cfpLoadingBar ) { var $http; return { request: function ( config ) { cfpLoadingBar.start(); return config; }, response: function ( response ) { // get $http via $injector because of circular dependency problem $http = $http || $injector.get( '$http' ); if ( $http.pendingRequests.length < 1 ) { cfpLoadingBar.complete(); } return response; }, responseError: function ( response ) { // get $http via $injector because of circular dependency problem $http = $http || $injector.get( '$http' ); if ( $http.pendingRequests.length < 1 ) { cfpLoadingBar.complete(); } return $q.reject( response ); } } } ); } ] );