It's feeding the version with stopTimeout when the actual function name is cancelTimeout; looks like the tag got attached to beta1 accidentally.

Any chance you could rev to beta3 so I can update my deps without having to use #master ? ;P

Cheers

I am using the promise tracker to show a spinner as I load several pieces of data. I would like a way to clear the promise tracker if the user navigates away or cancels an action.

The current version published to npm is 2.0.1, thanks!

Currently I can only see examples to work with $http, is there any way to make this work with $resource?

I started a discussion right here: https://gist.github.com/PascalPrecht/5411171#angular-module-structure-proposal

And Brian wrote a blog post about it: http://briantford.com/blog/angular-bower.html

I think fixing #7 depends on these resources, since there'll be possibly a kinda spec which to follow when developing angular modules. :)

And make it installable via Bower (like everything else) :)

scenario a face the issue.
http://plnkr.co/edit/XU0tvWsfKcuJPL9oXyCh

has a simple ui router, (I guess same story with ngroute)

with original promise-tracker I get:
Error: Tracker with id "loadingTracker" already exists!

Long story short, when switching from view/controller to another then return back, we face errors because of -reregistering same promises/trackerId.

what's the way it should be done? use the plnkr link to see what I mean.

also I'll create a pull request to show the mods that addresses the issue for me.

p.s. I didn't run the tests from the project.

Thanks for the promise tracker!

I have been using it with angularjs 1.3.0-beta.14 but when I upgraded it to 1.3.0-rc.3 I see the error below when I call loadingTracker.addPromise(deferred.promise) where loadingTracker is defined on $rootScope:

Uncaught TypeError: Cannot read property '$$state' of undefined 

Promise.then 
PromiseTracker.self.addPromise 

This actual error occurs inside Promise:

This lets us detect accurately if the tracker is active or not when 'done' fires

Me again :P

I've run into another issue. When I add my promise to the tracker, the tracker is firing the 'done' event immediately. As a result I can't use the 'tracker.active()' method for anything as it's always false.

I'm adding my promise via

tracker.addPromise($q.when(request.$then));

As you explain in a previous issue.

In my Rails controller, I am intentionally pausing the request for 3 seconds to ensure that the ajax request isn't completing, however even with this pause, the tracker is still firing the done event instantly.

Any ideas? I'm pretty stumped with this one :(

Hey, can we publish this repo to npm. id like to pull it into my project as part of my ci chain

If by some chance IE throws a Access is denied in your face, the response object coming back will not include the config option.

We should add a check for that.

It would be nice to have a maxDuration callback. E.g. when maxDuration is reached, e.g. 30 seconds I would like to show a message that something went wrong...

See http://plnkr.co/edit/3uAe0NdXLz1lCYlhpaMp?p=preview

test

I'm using it for ngTranslate and it's fuckin awesome!

More information: http://editorconfig.org/

If someone wants to help write a part of the docs/guide on the wiki, go for it. Even if it's one word. Or half a word :-)

And: Thanks for the great work!

I needed some time to find out how to react on active() changes. Maybe you can add an example like

angular.module('app', ['ajoslin.promise-tracker'])

.factory('myTracker', function (promiseTracker) {
  return promiseTracker();
})

.controller('AppCtrl', function ($rootScope, myTracker) {
  $rootScope.$watch(myTracker.active, function (isActive) {
    // Do something while the tracker is active
  });
})

;

Note: I did not grunt build this myself, I installed the package from bower and then used a script tag to pull in /vendor/angular-promise-tracker/promise-tracker.js.

From the final line of the compiled source provided: /promise-tracker.js

+}());

The + needs a function to "express" after it, which there is none. This causes a parser error in PhantomJS.

From the 8th line of the compiled source:

+angular.module('ajoslin.promise-tracker', []);

This is also entirely unnecessary.

Use Case:

I have a service that makes multiple calls to the server through $http.get
All these calls are related in the sense that they gather different info from a user
On my UI, I have multiple widgets, where each calls are "linked" to a widget (on a 1:1 basis).

I'd like to have 1 tracker for all request (to easily know when all are done), and one tracker per requests, to know when 1 particular widget is done loading;

Proposed:

$http.get('url', {tracker: ['profileTracker', 'demographicsTracker']};

I realize there would be a way to use $q.all to achieve the same functionality, but I think it might be handy to have some "shortcut" built directly in the promiseTracker lib.

Great work by the way!

Hi,

This is in my base layout

<div ng-show="tracker.active()" class="global-loader">Loading...</div>

It should indicate that there is a request/background process in progress. I don't want to have many trackers like you describe it for your pizza tracker, but just one single tracker that shows loading for any kind of http request in my application.

My approach was to have

$rootScope.tracker = promiseTracker('tracker');

in my main controller. I tried to use it in a module like this

angular.module('AuthService', []).factory('Auth', function($http){

    var config = {
        headers: {
            'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8',
            'X-Requested-With': 'XMLHttpRequest',
            'tracker' : 'tracker'
        }
    }

    return {
        login: function(user, success, error) {
            $http.post('/login', user, config).success(success).error(error);
        },
        logout: function(success, error) {
            $http.post('/logout').success(success).error(error);
        }
    };
});

However this does not work, no error and no loading message displayed. Any ideas how to use a tracker on root scope and in module?

Hi,

I have a rest service that looks like this

angular.module('TicketService', ['ngResource']).factory('Ticket', ['$resource',      function($resource){
var Ticket = $resource('/api/tickets/:id1/:action/:id2', //add param to the url
{
    id1:'@id'
}, 

{ 
    list: {
        method: 'GET'
    },
    close: {
        method: 'PATCH',
        params:{
            action:"close",
            id1:"@id"
        }
    },
    open: {
        method: 'PATCH',
        params:{
            action:"open",
            id1:"@id"
        }
    }
}); 

return Ticket;
}]); 

and I query for tickts like this

$scope.tickets = Ticket.query();

How would I throw a promiseTracker on a rest call?

It seems to me the events system is a useless bloat feature: I added it at the start just 'as a thing' (I mean the tracker.on('done', cb) kind of thing).

1. Takes up more KB, bad for mobile
2. Almost everything it can do is done well with promise events or a tiny bit more work for the developer
3. Does anyone actually use the events?

If we remove it, promise-tracker can become a good micro-library that does only what you need.

First, rename components.json to bower.json
Second, move angular-mocks to devDependencies, since it is not needed in client projects.

test

I have usecase where I want to transform the responseError in such a way that the config property is removed from the response. The clean sollution would be to add the your http-interceptor at last, but cause of the inline definition of the interceptor it is hard to do that. It would be nice if I can add the interceptor manually to the $http interceptor list.

There appears to be a syntax error in the minified version of 1.4.2:

SCRIPT1009: Expected '}'
promise-tracker.min.js, line 8 character 3251

I've created a component that builds of the promise-tracker (which is great!) but I've used 1.1.5 due to the changing ng-animate syntax. I haven't seen any issues with the promise-tracker in 1.1.5 and I'm guessing you just haven't bothered to update it. Right now my component is ~1.1.5 and promise-tracker is 1.1.4 so bower pukes.

For ref my component is at:
https://github.com/cgross/angular-busy

Will allow us to:

1. minify files easily
2. jshint easily
3. test on 1.1.4 and pre-1.1.4 easily

It has been removed in 3349855, was there a specific reason?

Instead of angular-ui/angular-ui-OLDREPO#448

Optional of course 😀

And declare it as dependency for angular-promise-tracker? Maybe others need that function too. We could create a service of it.

I was wondering whether we could somehow get rid of using string ids all over the place with promise tracker and use references to the actual tracker objects instead. Like

//Create / get our tracker with unique ID
  $scope.loadingTracker = promiseTracker.register();

  //use `tracker:` shortcut in $http config to link our http promise to a tracker
  $scope.fetchSomething = function(id) {
    return $http.get('http://httpbin.org/delay/2', {
      tracker: $scope.loadingTracker
    }).then(function(response) {
      alert('Fetched something!\n' + JSON.stringify(response.data, null, 2));
    });
  };

Is there any technical reason why we have to use string ids at the moment?

I can't use this library without using https://github.com/thlorenz/browserify-shim, can you add commonJS support? :)

Hi,

would be cool if we could add a tracker to an entire resource with the result that all resource methods (or only marked ones) will trigger the tracker. Maybe by modifing headers?

angular.module('project', ['ngResource'])
    .config(['$httpProvider', function ($httpProvider) {
        $httpProvider.defaults.headers.tracker = 'myTracker';
    }])
    .factory('Project', ['$resource', function($resource) {
        var Project = $resource('/projects/:id', {},
        {
            update: {
                method: 'PUT',
                tracker: 'exclude'
            }
        });

    // More stuff in here

    return Project;
}]);

http://docs.angularjs.org/api/ng.$http

By adding this to my html, it results in an infinite loop. I am not sure it is an angular bug or promise tracker bug.

<div class="loading" ng-show="loadingTracker.active()">
</div>

.controller('MainController', function($scope, promiseTracker){

$scope.loadingTracker = promiseTracker();
})

Is it possible to get a list of active promises from a tracker? This would be a nice feature

It would be nice to have a way to tell the tracker to not be active until some time in the future. This would prevent the UI tracker element from displaying for actions that happen quickly.

not sure if it's me or promiseTracker but after updating to the unstable version of AngularJS I am getting the following:

TypeError: Cannot read property 'tracker' of undefined
    at spinnerResponseInterceptor (promise-tracker-v0.0.1.js:95:39)

It would be nice to show the user that all request are pending too long for unknown reason.

I could show a modal "Something wrong occurred, try again later".

Your plunkers still point to a promise-tracker.js file that doesn't exist :)

From the documentation and what I could make sense from the source code, the only time I can pass options to a tracker is if I instantiate it myself.
If I create a tracker using $http interceptor, and later in a controller I recover it to see if it is active, I can't pass activationDelay or minDuration:

// service
$http.get('/url', { tracker: 'url_tracker'}) ...

// controller
$scope.tracker = promiseTracker('url_tracker'); // no options

Possible solutions:

// service
$http.get('/url', { tracker: { name: 'url_tracker', options: options } }) ...

// controller
$scope.tracker = promiseTracker('url_tracker', options);

I get the following error in IE8: TypeError: Object doesn't support this property or methodundefined.

Here is my setup: In app.js, I include promiseTracker and create a reference $rootScope.apiTracker = promiseTracker('api');

Then, in my services I include {tracker: 'api'}, for example:

exports.getAll = function() {
    return $http.get(url + 'vendor', {'tracker' : 'api'}).then(function (response) {
        return response.data;
    });
};

This works fine in Chrome, and even IE10. However in older IE8 i get the error as described above.

I'm trying to setup the promise tracker in a hierarchical kind of way and running into an issue.

My app has a structure where each controller inherits everything from a parent application_controller. In this application controller, I've added the following method :

$scope.track = function(trackerName, request) {

    var tracker = $scope[trackerName];
    if (!tracker) {
      tracker = promiseTracker(trackerName);
      $scope[trackerName] = tracker;
    }

    tracker.addPromise($q.when(request.$then));

    tracker.on('start', function() { $scope.$broadcast(trackerName + ':start') });
    tracker.on('success', function() { $scope.$broadcast(trackerName + ':success') });
    tracker.on('error', function() { $scope.$broadcast(trackerName + ':error') });
    tracker.on('done', function() { $scope.$broadcast(trackerName + ':done') });
  }

Then, in the child controller, I have:

$scope.meetings = Meeting.query();
$scope.track("meetingsList", $scope.meetings);
$scope.$on("meetingsList:done", function() { console.log("Whoop! - " + new Date()); });

I then have my broadcast listener listening to "meetingsList:done" which simply outputs to the console a simple message.

When I load the page and have it trigger the request, it works as expected, and I see my message appear. If I then navigate to another page and go back, it again works but I get my message twice. Repeating, it appears 3 times, and so on, increasing by 1 each time.

I'm sure that I'm doing something wrong but I'm not entirely sure what that is :(

When $http cache is enabled, the tracker's active() method will sometimes return true after a cache hit.

First of all, this thing is fantastic! Well done!

I'm using the 'start' event to push message objects into an array that are displayed in an ng-repeat. Then on the 'success' and 'error' events, I'm setting message.cssClass = 'green' or 'red', respectively. The problem is I need some way to know which message in the array to update.

It would be really cool if some unique ID was passed along into all the events to make following them in the event sequence easier.

Or, if you're against that idea, do you have any suggestions on a better way to do this? Right now, in the 'start' event I'm setting my message.id = config.url, but that, of course, isn't guaranteed to be unique. And if I wanted to add plain old promises (not from $http) to my tracker, I wouldn't even have that available...

test

To make sure that we get clean commits and are able to generate a full featured changelog automatically, we have to introduce @btford's awesome grunt-conventional-changelog task.