暂时只是知道怎样用，还没理解，就先展示怎样的流程，待日后再来表明理解
结构
先看下Index.html
<!DOCTYPE html> <html lang="en" ng-app="news"> <head> <title></title> <script src="../angular.min.js" type="text/javascript"></script> <script src="../angular-route.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <script src="controller.js" type="text/javascript"></script> </head> <body> <div ng-view> </div> </body> </html>
需要注意的点是：1 需要添加angular-route.js这个js插件
2 添加 ng-view
再看看list.html和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>
<div class="container-fluid"> <div class="row-fluid"> <div class="span2"> <!--Sidebar content--> Search: <input ng-model="query"> Sort by: <select ng-model="orderProp"> <option value="name">Alphabetical</option> <option value="age">Newest</option> </select> </div> <div class="span10"> <!--Body content--> <ul class="phones"> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail"> <a href="#/news/{{phone.id}}" class="thumb"></a> <a href="#/news/{{phone.id}}">{{phone.date}}</a> <p>{{phone.message}}</p> </li> </ul> </div> </div> </div>
重点看下app.js这个js的内容
angular.module("news", ['ngRoute']).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/', { templateUrl: 'partials/list.html', controller: newsListController }).
when('/news/:newsId', { templateUrl: 'partials/detail.html', controller: newsDetailController }).
otherwise({redirectTo:'/'});
} ]);
注意点：1 添加ngRoute
2 熟悉拼写的格式
controller.js
// 一些虚拟的邮件
messages = [{
id: 0, sender: 'jean@somecompany.com', subject: 'Hi there, old friend',
date: 'Dec 7, 2013 12:32:00', recipients: ['greg@somecompany.com'],
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: 'maria@somecompany.com',
subject: 'Where did you leave my laptop?',
date: 'Dec 7, 2013 8:15:12', recipients: ['greg@somecompany.com'],
message: 'I thought you were going to put it in my desk drawer.But it does not seem to be there.'
}, {
id: 2, sender: 'bill@somecompany.com', subject: 'Lost python',
date: 'Dec 6, 2013 20:35:02', recipients: ['greg@somecompany.com'],
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."
}];
// 把我们的邮件发布给邮件列表模板
function newsListController($scope) {
$scope.phones = messages;
}
// 从路由信息（从URL 中解析出来的）中获取邮件id，然后用它找到正确的邮件对象
function newsDetailController($scope, $routeParams) {
$scope.message = messages[$routeParams.id];
}