Page 432 - AngularJS权威教程

412 第 31 章 构建 Angular Chrome 应用

现在，可以定义单独的视图和路由，然后把主界面视图从tab.html主视图中提取出来。
在定义路由期间，注意这里需要两个路由：分别对应应用程序的两个不同界面。

// angular.module(...)
// ...
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'templates/home.html',
controller: 'MainController'
})
.when('/settings', {
templateUrl: 'templates/settings.html',
controller: 'SettingsController'
})
.otherwise({redirectTo: '/'});
})

可以将tab.html中div.container之间的所有HTML移入templates/home.html文件中，然后使
用<div ng-view></div>来替换它。

<div class="container">
<div ng-view></div>
</div>
刷新页面时，可以看到似乎没有什么变化，但是HTML是从templates/home.html模板中加载
的，而不是直接嵌入在tab.html内。
目前，我们还没有切换两个界面的方式。可以添加一些允许用户导航到不同页面的基于页脚
导航的元素。在这里，我们仅在页面底部添加两个链接，导航到不同的页面，就像下面这样：

<div id="actionbar">
<ul class="list-inline">
<li><a class="glyphicon glyphicon-home" href="#/"></a></li>
<li><a class="glyphicon glyphicon-cog" href="#/settings"></a></li>
</ul>
</div>

为了将它们添加到界面的右下角，必须对它们应用一些绝对定位的CSS：
#actionbar {
position: absolute;
bottom: 0.5em;
right: 1.0em;
}
#actionbar a {
font-size: 2.2rem;
color: #000;
}
现在，如果你通过点击齿轮按钮导航到设置页面，你会看到这里没有呈现任何信息。这需要
定义SettingController，以便我们可以操作视图，同时供用户使用。

// ...
.controller('SettingsController', function($scope) {
// 这里是控制器定义
});