feat(promiseTracker): add promiseTracker service #448

wants to merge 1 commit into from

6 participants


from http://github.com/ajoslin/angular-promise-tracker



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.

We now have an easy solution for ya! Here's how it looks.

  • 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! ...

  • 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();

  • You can also have one http request with multiple trackers.
$http.get('/hello', { tracker: ['pizza', 'greetings'] });
@ajoslin ajoslin feat(promiseTracker): add promiseTracker service
Allows tracking of http requests or any promise.

I was going to do the demo too, but don't have time right now - I'll have to create a smaller demo than the one I already have made.

AngularUI member

crazy awesome

@joseym joseym closed this Feb 19, 2013
@joseym joseym reopened this Feb 19, 2013
AngularUI member

also, i shouldn't hit the Close & Comment button

AngularUI member
AngularUI member
AngularUI member

Mayhaps you should just transfer your repo to the AngularUI namespace @ajoslin?

AngularUI member

This is fantastic. It may make sense to expose error() similar to active() as this is a common UI check

@ProLoser ProLoser referenced this pull request in ajoslin/angular-promise-tracker Apr 11, 2013

Relocate to AngularUI? #5

AngularUI member

@ajoslin should we just close this PR?

@ProLoser ProLoser closed this May 28, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment