Show spinner on multiple $http calls angularJs

Question

This is the deal.

I what to show a spinner when doing a $http call, but the problem here is that I have multiple calls at ones, so the examples I found here didn't help.

Did anyone have a solution for this?

A way to stack the calls so the spinner remains until the last call finish? I hope to make my point.

Im doing this.

angular.module('moduleName', []).
factory.("SomeService", function () {
    return:{
        getResources(params) {
        /* do the $http call */
        }
    }
}).
controller("SomeCtrl", function (SomeService) {
    SomeService.getResources(params)
}).
controller("OtherCtrl", function (SomeService) {
    SomeService.getResources(params)
});

The 2 controllers may call the service at the same time and the may get diferent responce.

Answer 1

All $http calls in Angular return a promise.

The $q service doesn't have all the bells and whistles of the Q library, which it is based, but if you look at the docs, it does have an all method that can be used to give you the functionality you want.

Here's how you could use it:

app.controller('HttpController', function($http, $q) {

  // A hypothetical submit function
  $scope.submit = function() {
    // Set a loading variable for use in the view (to show the spinner)
    $scope.loading = true;

    var call1 = $http.get(/* ... */);
    var call2 = $http.get(/* ... */);
    var call3 = $http.get(/* ... */);

    $q.all([call1, call2, call3]).then(function(responses) {
      // responses will be an array of values the individual
      // promises were resolved to. For this case, we don't 
      // need it, since we only care that they all resolved
      // successfully.

      $scope.loading = false;
    }, function(errorValue) {
      // If any of the promises is rejected, the error callback 
      // will be resolved with that rejection value, kind of like
      // an early exit. We want to mark the loading variable
      // as false here too, and do something with the error.

      $scope.loading = false;
    });
  };
});

Answer 2

You can do this by using interceptor and passing one flag in the header of each API.What all you need to do it.Add one parameter in each $http call.

Than capture it in the interceptor Request method by using property config.headers.{{Parameter}}.On the basis of this flag broadcast one event for showing wait image.

Answer 3

Use a variable that is initialized to the number of calls you are making. In each of the callbacks for the AJAX calls, call a function that decrements the value of this variable and if it's zero, removes the spinner.

num_calls = 3;

function considerRemoveSpinner() {
    if (--window.num_calls == 0)
    {
        removeSpinner();
    }

} 

$http.get("url").success(
    function() {
        /* regular handler */
        considerRemoveSpinner();
   }
);

/* other ajax calls */