Page 361 - AngularJS权威教程

25.3 ui-router 341

$stateProvider 19
.state('inbox', {
url: '/inbox/:inboxId',
template: '<div><h1>Welcome to your inbox</h1>\
<a ui-sref="inbox.priority">Show priority</a>\ 20
<div ui-view></div>\
</div>'
controller: function($scope, $stateParams) { 21
$scope.inboxId = $stateParams.inboxId;
}
})
.state('inbox.priority', { 22
url: '/priority',
template: '<h2>Your priority inbox</h2>'
}); 23
第一个路由会按预期匹配（如上所示）。现在这里有了第二个路由，也就是一个匹配父路由
inbox之下的子路由（因为这里我们使用.语法时会将它指定为一个子路由）。 24

 /inbox/1匹配第一个状态。
 /inbox/1/priority匹配第二个状态。 25
使用这种语法，你可以在父路由内嵌套URL。父视图中的ui-view会解析priority收件箱。

6. params 26
params选项是一个参数名数组或者是一个正则表达式数组。不能将这个选项与url选项联合
使用。当状态被激活时，这些参数会被填充到$stateParams服务中。 27

7. views
28
ui-router的一个强大的特性就是可以在一个状态内设置多个命名视图。在独立的视图内，
你可以在独立模板中定义多个要引用的视图。
29
如果设置了views参数，那么状态的templateUrl、template和templateProvider
就会被忽略。如果你想在路由中包含父模板，就需要创建一个包含模板的抽象状态。
30
比方说我们有一个视图看起来像这样：

<div> 31
<div ui-view="filters"></div>
<div ui-view="mailbox"></div>
<div ui-view="priority"></div> 32
</div>
现在，你可以创建命名视图来填充每个独立的模板。每个子视图都可以包含它自己的模板、
控制器和使用resolve关键字解析的数据。 33

$stateProvider
.state('inbox', { 34
views: {
'filters': {
template: '<h4>Filter inbox</h4>', 35
controller: function($scope) {}
},
'mailbox': {
template: 'partials/mailbox.html' 36