$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>';

                    }

                ]

            }

        }

    })