Chapter 8: Implementing nested ui-router resolves

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">
    <a  ui-sref-active="active" ui-sref="widget({widgetId:6})">See Widget 6</a>
    <a ui-sref="widget.feature({widgetId: 6, featureId:11})">See Feature 11 of Widget 6</a>
    <div ui-view></div>
</div>

JavaScript

angular.module('myApp', ['ui.router'])
.config(function($stateProvider) {
    $stateProvider
    .state('widget', {
        url: '/widgets/:widgetId',
        template: 'Widget ID: {{ widgetId }} <div ui-view></div>',
        controller: function($scope, $stateParams, widgetId){
            // the widgetId is only available in this state due to
            // the :widgetId variable definition in the state url
            $scope.widgetId = $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('widget.feature', {
        url: '/features/:featureId',
        template: 'Feature ID: {{ featureId }}',
        // widgetId can now be injected from the parent state
        controller: function($scope, $stateParams, widgetId){
            // both widgetId and featureId are made available
            // in this state controller
            $scope.featureId = $stateParams.featureId;
            $scope.widgetId = widgetId;
        }
    });
});