通過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切換視圖