在开发angularjs应用的时候，通常需要显示和隐藏子页面，我们可以通过angularjs的$route服务来实现。
该类可以实现在浏览器指定一个URL时，angular加载和显示特定的模板并且为该模板实例化一个controller。
route服务的创建是通过以配置块的形式调用$routeProvider服务的函数，通常是这个样子滴：
var someModul e = angular. module(' someModule' , [ . . . moduledependencies. . . ] )
someModule. config(function($routeProvider) {
$routeProvider.
when(' url ' , {controller: aController, templateUrl : ' / pat h/ to/ tempate' }).
w hen(. . . other mappings for your app. . . ).
…
otherwise(. . . what to do if nothing else matches. . . );
)};
上面的代码能实现：当浏览器的URL转变到指定的值时，angular会将/path/to/template的模板加载。并且将最外层的元素的controller指向aController，效果和：ng-controller=aC ontroller 一样。最后一行的otherwise处理没有匹配的URL的情况。
举个例子，假如开发以个邮件展示的应用，首先我们给一个邮件信息列表：时间、标题和发件人。当点击列表的某一项时，显示邮件具体内容。
对于列表视图，我们不能直接把所有信息都放到一个模板上，应该创建一个布局模板来放置views，需要用ng-view标签原语来告诉angular你期望view的放置位置（其实就跟tab一样）。
index.html
<html ng-app="AMail ">
<head>
<script src="src/ angular. js"></ script>
<script src="src/ controllers. js"></ script>
</ head>
<body>
<h1>A-Mail </ h1>
<div ng-view ></ div> //这里是angular放置view的地方
</ body>
</ html >
我们需要一个邮件列表的视图，可以用ng-repeat实现：
list.html
<table>
<tr>
<td><strong>Sender</ strong></ td>
<td><strong>Subject </ strong></ td>
<td><strong>Date</ strong></ td>
</ tr>
<tr ng-repeat =' message in messages' >
<td>{{message. sender}}</ td>
<td><a href =' #/view / {{message. id}}' >{{message. subject }}</ td>
<td>{{message. date}}</ td>
</ tr>
</ table>
上述代码中的a标签，将URL指向了与邮件列表id相关的地址，当然我们还需要一个邮件详情展示的模板：
detail.html
<div><strong>标题 : </ strong> {{message. subject }}</ di v>
<div><strong>发件人: </ strong> {{message. sender}}</ di v>
<div><strong>日期: </ strong> {{message. date}}</ di v>
<div>
<strong>收件人列表: </ strong>
<span ng-repeat =' recipient in message. recipients' >{{recipient }} </ span>
<div>{{message. message}}</ div>
<a href =' #/ ' >返回邮件列表 </ a>
接下来就可以在controller里面控制路由了：
controllers .js
/ / 创建一个 module
var aMailServices = angular. module(' AMail ' , [ ] );
/ / 配置url、模板和controller之间的映射。
function emailRouteConfig($routeProvider) {//注入routeProvider服务类
$routeProvider.
when(' / ' , {
controller: ListController,
templateUrl : ' list . html '
}).
when(' / view / : id' , {//注意参数id的实现
controller: DetailController,
templateUrl : ' detail.html '
}).
otherwise({
redirectTo: ' / '
});
}
/ / 配置到module
aMailServices. config(emailRouteConfig);
/ / 假设服务器取得邮件列表如下：
messages = [ {
id: 0, sender: ' jean@somecompany. com ' , subject : ' Hit here, oldfriend' ,
date: ' Dec 7, 2013 12: 32: 00' , recipients: [ ' greg@ somecompany. com ' ] ,
message: ' 下午喝茶，聚聚 ，给你介绍个妞'
}, {
id: 1, sender: ' mara@ somecompany. com ' ,
subject : ' 把我笔记本放哪了？' ,
date: ' Dec 7, 2013 8: 15: 12' , recipients: [ ' greg@ somecompany. com ' ] ,
message: ' 笔记本找不到了，你妹，你拿走了？ '
}, {
id: 2, sender: ' bill @ somecompany. com ' , subject : 'hello' ,
date: ' Dec 6, 2013 20: 35: 02' , recipients: [ ' greg@ som ecom pany. com ' ] ,
message: "没事，骚扰一下 "
}, ] ;
/ / 列表的controller：
function ListController($scope) {
$scope. messages = messages;
}
/ / 我们需要得到message id，$routeParams会从url中给你提炼出来：
function DetailController($scope, $routeParams) {
$scope. message = messages[ $routeParams. id] ;
}
627
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
