通过Route和$location改变视图
首先，我们知道Ajax用于但页面请求，而我们经常遇到的是多个子页面视图，需要管理使其在适当的时候向用户展示或隐藏
而在学习angularjs之后，我们可以使用$route服务来为我们管理这种场景，Route可以为一个给定的浏览指向URL，并且在Angular中指定加载显示一个模版，即实例化一个控制器为模版提供上下文，简单的说指定一个模版路径
而在应用中我们可以在$routeProvider服务上调用函数创建路由作为一个配置模块，类似于如下的伪代码
var someModule = angular.module('someModule', [...module dependencies...])
someModule.config(function($routeProvider) {
$routeProvider.
when('url', {controller:aController, templateUrl:'/path/to/tempate'}). when(...other mappings for your app...).
…
otherwise(...what to do if nothing else matches...);
)};该伪代码表明，当浏览器的URL变成指定的URL时,angular将加载/path/to/templete下的模版
最后一行的otherwise()告诉路由如果没有匹配便执行括号内程序
下面通过一个示例来模拟上述的过程（需要放至服务器）
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>
</body>
</html>ng-view指令用于告诉angular视图应该展示的位置
接下来对于email列表，我们可以用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>接下来是一个详细的视图，用来显示单个信息对象的属性值
detail.html
<div><strong>Subject:</strong> {{message.subject}}</div>
<div><strong>Sender:</strong> {{message.sender}}</div>
<div><strong>Date:</strong> {{message.date}}</div>
<div>
<strong>To:</strong>
<span ng-repeat='recipient in message.recipients'>{{recipient}} </span>
<div>{{message.message}}</div>
<a href='#/'>Back to message list</a>接下来，我们需要用控制器来关联这些模版
controllers.js
// Create a module for our core AMail services
var aMailServices = angular.module('AMail', []);
// Set up our mappings between URLs, templates, and controllers
function emailRouteConfig($routeProvider) {
$routeProvider. when('/', {
controller: ListController, templateUrl: 'list.html'
}).
// Notice that for the detail view, we specify a parameterized URL component
// by placing a colon in front of the id
when('/view/:id', {
controller: DetailController, templateUrl: 'detail.html'
}). otherwise({
redirectTo: '/'
});
}
// Set up our route so the AMail service can find it
aMailServices.config(emailRouteConfig);
// Some fake emails
messages = [{
id: 0, sender: '[email protected]', subject: 'Hi there, old friend', date: 'Dec 7, 2013 12:32:00', recipients: ['[email protected]'], message: 'Hey, we should get together for lunch sometime and catch up.'+'There are many things we should collaborate on this year.'
}, {
id: 1, sender: '[email protected]', subject: 'Where did you leave my laptop?',
date: 'Dec 7, 2013 8:15:12', recipients: ['[email protected]'], message: 'I thought you were going to put it in my desk drawer.'
+'But it does not seem to be there.'
}, {
id: 2, sender: '[email protected]', subject: 'Lost python',
date: 'Dec 6, 2013 20:35:02', recipients: ['[email protected]'], message: "Nobody panic, but my pet python is missing from her cage.'
+'She doesn't move too fast, so just call me if you see her." } ];
// Publish our messages for the list template
function ListController($scope) {
$scope.messages = messages;
}
// Get the message id from the route (parsed from the URL) and use it to
// find the right message object.
function DetailController($scope, $routeParams) {
$scope.message = messages[$routeParams.id];
}到这里我们已经创建了多视图应用的基本结构，并通过改变URL切换视图