Incorporating promises into native route resolves

AngularJS routing supports resolves, which allow you to demand that some work should be finished before the actual route change process begins. Routing resolves accept one or more functions, which can either return values or promise objects that it will attempt to resolve.

How to do it…

Resolves are declared in the route definition, as follows:

(app.js)

angular.module('myApp', ['ngRoute'])
.config(function($routeProvider){
  $routeProvider
  .when('/myUrl', {
    template: '<h1>Resolved!</h1>',
    // resolved values are injected by property name
    controller: function($log, myPromise, myData) {
      $log.log(myPromise, myData);
    },
    resolve: {
      // $q injected into resolve function
      myPromise: function($q) {
        var deferred = $q.defer()
          , promise = deferred.promise;
        deferred.resolve(123);
        return promise;
      },
      myData: function() {
        return 456;
      }
    }
  });...