background processing notification for $http requests background processing notification for $http requests ajax ajax

background processing notification for $http requests


Use an interceptor. Observe the following example...

app.factory('HttpInterceptor', ['$q', function ($q) {    return {        'request': function (config) {            /*...*/            return config || $q.when(config);   // -- start request/show gif        },        'requestError': function (rejection) {            /*...*/            return $q.reject(rejection);        },        'response': function (response) {       // -- end request/hide gif            /*...*/            return response || $q.when(response);        },        'responseError': function (rejection) {            /*...*/            return $q.reject(rejection);        }    };}]);

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

Here you can inject centralized logic at various points during the http request life cycle, hooking into the supplied callbacks offered by the api. Crafting any reusable request logic you may need - just do so here. Check out the interceptors portion of the AngularJS $http docs for more information.


I have successfully managed to use AngularOverlay for displaying a loading indicator while a http request is pending. Download the files and follow the instructions and it should work.