Chapter 8: Implementing nested ui-router resolves

by billy roberts

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.2/angular-route.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="Ctrl">
        <button ng-click="navigate()">Navigate!</button>
        <div ng-view></div>
    <div>
</div>

JavaScript

//how to execute code when a partial is activated
// ...not sure what the purpose of invoking promises inside myPromise
// is??  just return 123...

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;
            }
        }
    });
})
.controller('Ctrl', function($scope, $location) {
    $scope.navigate = function() {
        $location.url('myUrl')
    };
});