How to know that angular completed all processing and rendering

Question

I need to stop progress bar. If I have several http request, how can i know when all threads completed, and all responses are rendered. I tried to use $httpProvider.interceptors on response, but i can not know whether this is the last http response or not. And also you can not know when this last response will be rendered.

Answer 1

You can track the pending request by http.pendingRequests in your interceptor like

angular.module('myApp').factory('myHttpResponseInterceptor', function($q, $location, $injector, $rootScope){
    var _http = null;

    return {
        request: function(config){
            $rootScope.$broadcast("loader_show");
            return config;
        },
        response: function(response){
            _http = _http || $injector.get('$http');
            if(_http.pendingRequests.length < 1){
                $rootScope.$broadcast("loader_hide");
            }
            return response;
        },
        responseError: function (response) {
            _http = _http || $injector.get('$http');
            if(_http.pendingRequests.length < 1){
                $rootScope.$broadcast("loader_hide");
            }
            console.log("response rejected in interceptor");
            return $q.reject(response);
        }
    };
});

I have used this in my project and it works just fine.

Hope it helps you too.