Chapter 8: Implementing nested ui-router resolves

by msfrisbie

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="Ctrl">
        <button ng-click="widgetDetail()">widgets detail</button>
    </div>
    <hr />
    <div ui-view></div>
    <hr />
</div>

JavaScript

angular.module('myApp', ['ui.router'])
.config(function ($stateProvider) {
    $stateProvider
    .state('widgets.detail', {
        url: '/widgets/:widgetId',
        controller: function($log, $stateParams){
            // the widgetId is only available in this state due to
            // the :widgetId variable definition in the state url
            $log.log($stateParams.widgetId);
        },
        resolve:{
            // the stateParam widget property is wrapped in a property
            // to enable it to be injected in child states
            widgetId: function($stateParams){
                return $stateParams.widgetId;
            }
        }
    })
    .state('widgets.detail.feature', {
        url: '/features/:featureId',
        // widgetId can now be injected from the parent state
        controller: function($log, $stateParams, widgetId){
            // both widgetId and featureId are made available
            // in this state controller
            $log.log(widgetId, $stateParams.featureId);
        }
    });    
})
.controller('Ctrl', function($scope, $state) {
    $scope.widgetDetail = function() {
        $state.transitionTo('widgets.detail');
    };
});