angular-promise-tracker

• Demo
• Help
• Changes
• License

Eh, what?

So you're building your angular app. And you want a loading spinner.

You've tried the normal solution (or maybe you haven't), and it has problems. It presents a loading spinner on every request!

But you don't want the same global loading spinner whenever any request happens anywhere. That just won't work!

Instead, you want different indicators while different types of request are loading. You want one spinner while you're fetching data having to do with a user's pizza order, one while fetching user's profile data, and maybe another for some random service you have that returns a promise. All these on different parts of the UI. Heck, maybe you don't even want a spinner. You just want to know while http requests of some type are pending.

Well, sigh no more my dear friend, your troubles are over.

• Throw a promiseTracker onto your scope

  function MyCtrl($scope, promiseTracker) {
      $scope.pizzaTracker = promiseTracker('pizza');
  }

• Do some requests, and in their config add in a little option called tracker

  $http.get('/pizzaFlavor', { tracker: 'pizza' });
  $http.get('/pizzaType', { tracker: 'pizza' });
  $http.get('/pizzaCrust', { tracker: 'pizza' });

• Now the awesomes happen: pizzaTracker.active() will be true whenever any request with tracker: 'pizza' is waiting for response!

  <div ng-show="pizzaTracker.active()" style="background: pink;">
      Loading some pizza data for ya, sir! ...
  </div>

• But wait, there's more! You can also catch cool events when stuff happens on any pizza promise...

  $scope.pizzaTracker.on('error', function(response) {
      $scope.pizzaError = "Uh oh, some sort of pizza error happened! " + response.data;
  });
  $http.get('/pizzaError', { tracker: 'pizza' });

  <b ng-show="pizzaError" style="color:red;">!! {{pizzaError}} !!</b>

You can catch any of these events: 'error', 'success', 'start', 'done'. Hopefully they all make sense.

• Oh, and did I mention... you can attach any old promise to your pizza tracker. Not just http requests!

var myPizzaPromise = $q.defer();
$scope.pizzaTracker.addPromise(myPizzaPromise.promise);

Development

• Install karma & grunt with npm install -g karma grunt-cli to build & test
• Install local dependencies with bower install && npm install
• Run grunt to lint, test, build the code, and build the docs site

License

angular-promise-tracker by Andy Joslin is free of known copyright restrictions.