angular-ui-router中的$stateProvider設置

$stateProvider
    .state('contacts.list', {
        url: '',
        templateUrl: 'contacts.list.html'
    })
    .state('contacts.detail', {
        url: '/{contactId:[0-9]{1,4}}',
        /* 　1、view 用在該狀態下有多個 ui-view 的情況，可以對不同的 ui-view 
　　　　　　　　　　　　　　使用特定的 template, controller, resolve data
        　　　2、絕對 view 使用 '@' 符號來區別，比如 'foo@bar' 表明名為 'foo' 
　　　　　　　　　　　　　　的 ui-view 使用了 'bar' 狀態的模板(template)，相對 view 則無 */
        views: {
            // 無名 view
            '': {
                templateUrl: 'contacts.detail.html',
                controller: ['$scope', '$stateParams', 'utils',
                    function ($scope, $stateParams, utils) {
                        $scope.contact = utils.findById($scope.contacts, $stateParams.contactId);
                    }
                ]
            },
            // for "ui-view='hint'"
            'hint@': {
                template: 'This is contacts.defail populating the "hint" ui-view'
            },
            // for "ui-view='menuTip'"
            'menuTip': {
                templateProvider: ['$stateParams',
                    function($stateParams) {
                        return '<hr><small class="muted">Contact ID: ' + $stateParams.contactId + '</small>';
                    }
                ]
            }
        }
    })