1

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.

Improve this question

3 Answers 3

Reset to default
6

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;
    });
  };
});
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Is there a way to do this if the $http call is made from diferent controllers?
Yes, you'd have to create a factory or a service to manage it for you. But that makes certain assumptions, like that the calls are always made at the same time. If they're made at different times and receive different results, then it's probably weird UX to have one 'global' loading state.
0

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 */
Improve this answer

1 Comment

that makes sense, but I was hoping, angular has something already for that.
0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.