Is it possible to know, that request is processing

Question

I have a lot of pages, where i use $http to process requests (get data, update) and i have to use ajax-loading.gif every time.

Now, i need to do it like this:

<div ng-show="model == null || ajaxUpdating">
    <div>
        <img src="~/Content/Images/gif-load.gif" />
        <p>Waiting server respone...</p>
    </div>
</div>

Here i have ajaxUpdating flag, that i init before request and set false in success or error callbacks:

    $scope.ajaxUpdating = true;
    $http({
        url: updateUrl,
        method: 'POST'
    }).
    success(function (data, status) {
        window.location.href = settings.redirectAfterOk;
    }).
    error(function (data, status) {
        $scope.ajaxUpdating = false;
        alert(data.errorMsg || settings.errors.update);
    });

So, i wanna know, is it possible to check, if request processing right now? I don't want to use so many flags every where in my code and it could be much easier, if i just write:

$http.isProcessing

for example.

Thx you.

Answer 1

If you need a loading gif whenever an ajax http request is in progress, you can set an interceptor on the config like this:

var myApp = angular.module('myApp', []).config(
    [ '$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
    //routes here   
 }]).config(function($httpProvider) {
//show a loading div when a http request is running
        var numLoadings = 0;
        var loadingScreen = $('<div style="position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;background-color:gray;background-color:rgba(70,70,70,0.2);"><img style="position:absolute;top:50%;left:50%;" alt="" src="css/loading.gif" /></div>').appendTo($('body')).hide();
        $httpProvider.responseInterceptors.push(function() {
            return function(promise) {
                numLoadings++;
                loadingScreen.show();
                var hide = function(r) { if (!(--numLoadings)) loadingScreen.hide(); return r; };
                return promise.then(hide, hide);
            };
        });
    });

See $http , look for Interceptors