CODEWITHSUNDEEP
angularjs
Rolando
Rolando

Reputation: 62624

How to display loading image, then make it disappear after 4 ajax requests in angularjs?

Assuming I have a div that I want to show when the page first loads showing the "number of ajax requests not complete" / "number of ajax requests completed", then make it disappear after X number of ajax requests are completed, (X can be a number set in javascript). Would like to see examples on how this would work. So far I only know that you can "emit" a "LOADING" and "DONELOADING" event for the show/hide of the one div, though that only works with a single http request.

Upvotes: 0

Views: 288

Answers (3)

iH8
iH8

Reputation: 28638

Not exactly sure of what you mean with "ajax request", but i'm assuming you're calling some sort of asynchronous service for example:

angular.module('myApp').factory('myService', [
    '$q',
    '$timeout',
    function($q, $timeout){
        return {
            load: function(millisecs) {
                var deferred = $q.defer();
                $timeout(function(){
                    deferred.resolve({foo: 'bar'});
                }, (Math.floor(Math.random() * 9) + 1) * 1000);
                return deferred.promise;
            }
        }
    }
]);

You could keep a counter in your controller and increment it when each request completes:

angular.module('myApp').controller('myController', [
    '$scope',
    '$timeout',
    'myService',
    function($scope, myService){
        $scope.requests = {
            count: 10,
            started: 0,
            completed: 0
        }
        while($scope.requests.started < $scope.requests.count){
            $scope.requests.started++
            myService.load().then(function(){
                $scope.requests.completed++
            });            
        }
    }
]);

Example @ JSFiddle: http://jsfiddle.net/iH473/3rGjm/

Upvotes: 0

kfis
kfis

Reputation: 4729

To count the request you should use the requestInterceptor api of angulars $http service.

var module = angular.module("app", []);

module.factory("RequestStatistic", function () {
    var requests = 0,
        responses = 0,
        incrementRequest = function () {
            requests++;
        },
        incrementResponse = function () {
            responses++;
        },
        getTotalRequests = function () {
            return requests;
        },
        getTotalResponses = function () {
            return responses;
        },
        getPendingRequests = function () {
            return requests - responses;
        };
    return {
        incrementRequest: incrementRequest,
        incrementResponse: incrementResponse,
        getTotalRequests: getTotalRequests,
        getTotalResponses: getTotalResponses,
        getPendingRequests: getPendingRequests
    };
});
module.factory("RequestStatisticInterceptor", function ($q, RequestStatistic) {
    return {
        request: function (config) {
            RequestStatistic.incrementRequest();
            return config || $q.when(config);
        },
        response: function (response) {
            RequestStatistic.incrementResponse();
            return response || $q.when(response);
        },
        responseError: function (rejection) {
            RequestStatistic.incrementResponse();
            return $q.reject(rejection);
        }
    };
});
module.config(function($httpProvider){
    $httpProvider.interceptors.push('RequestStatisticInterceptor');
});

Now you could make a directive that wathces the RequestStatistic Service and reacts appropriattly

Upvotes: 0

charlietfl
charlietfl

Reputation: 171669

Can use a promise array and $q.all() to determine when all requests are done.

Simple example since no code was provided

var promises=[];
for(i=0; i<5; i++){
    var request=$http.get('someFile');
    promises.push(request};
}
/* inject $q as dependency wherever you use this*/
$q.all(promises).then(function(){
   /* remove loader*/
});

Don't necessarily have to use events to change loader visibility, could use ng-show and change the model property you assign to ng-show within $q.all(). For more detailed approach would need to see some code examples from your app

angular $q docs

Upvotes: 1

Related Questions