Home

Angular-promise-tracker Documentation

• Getting Started with angular-promise-tracker
• more content

## Getting Started with angular-promise-tracker

Here are some simple steps to get goin' quick with angular-promise-tracker!

1. Download angular-promise-tracker. You've got a few choices:

• Download through bower: bower install angular-promise-tracker
• Download the js file yourself: https://raw.github.com/ajoslin/angular-promise-tracker/master/promise-tracker.js
• Ask me to print the file and mail it to you, so you can get your scribe to type it up for you. That's why you have a scribe, after all...

2. <script src> that thang!

• <script src="ninjas/promise-tracker.js"></script>

3. Add the promise-tracker module as a dependency to your AngularJS app:

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

4. Find a controller that does some sort of promise you want to track. Usually that'll be an $http call! Add promiseTracker service as a dependency to be injected that controller:

function NinjaBeaconCtrl($scope, $http, promiseTracker) {
  $http.get('/ninja-beacon').then(function(response) {
    $scope.ninjaBeacon = response.data;
    $timeout(function() {
      alert('ninjas have arrived!');
    }, 2000);
  });
}

5. Create a promiseTracker, and add it to our scope. Then let's track some promises! Yes, even ninja promises can be tracked. promiseTracker is that good.

function NinjaBeaconCtrl($scope, $http, promiseTracker) {
  //Create/get a promiseTracker called 'ninjas', and let the scope have access to it
  $scope.ninjaFinder = promiseTracker('ninjas');
  $http.get('/ninja-beacon', {
    tracker: 'ninjas' //tell our 'ninjas' tracker to track this http request's promise
  }).then(function(response) {
    $scope.ninjaBeacon = response.data;
    var wait = $timeout(function() {
      alert('ninjas have arrived!');
    }, 2000);
    //Tell our 'ninjas' tracker to also track our $timeout's 2000ms promise
    //The `tracker:` approach we did a few lines ago is just a shortcut for this.
    $scope.ninjaFinder.addPromise(wait);
  });
}

6. Finally, we can display some cool loading stuff while our ninjas are arriving...! ninjaTracker.active() will evaluate to true while any promise added to it is

<div ng-controller="NinjaBeaconCtrl">
  <div ng-show="ninjaFinder.active()" style="color: red; font-size: 50px;">
    The ninjas are on their way! They're loading! Just hold on a little longer!
  </div>
</div>

Intro Plunker Demo: comingsoon.com

## More Content

coming soon :-)