Angularjs 路由学习笔记

浏览数：24 / 时间：2015年06月09日

从官网下载了最新版本的Angularjs 版本号：1.3.15

做一个简单的路由功能demo

首页：index.html

 1 <!DOCTYPE html >
 2 
 3 <html>
 4 <head>
 5     <meta charset="utf-8" />
 6     <title>测试</title>
 7     <script src="./js/angular.min.js"></script>
 8     <script src="./js/angular-route.min.js"></script>
 9 </head>
10 <body ng-app="myApp">
11     <div ng-controller="TextController">
12          <p>{{someText}}</p>
13     </div>
14     <div ng-view></div>
15 </body>
16     <script>
17         var myApp = angular.module(‘myApp‘, [‘ngRoute‘]);
18         myApp.controller(‘TextController‘, function ($scope) {
19             $scope.someText = ‘测试显示内容‘;
20         });
21 
22         //路由
23         function emailRouteConfig($routeProvider) {
24             $routeProvider.
25             when(‘/‘, {
26                 controller: ListController,
27                 templateUrl: ‘list.html‘
28             }).
29             when(‘/view/:id‘, { //在id前面加一个冒号，从而制订了一个参数化URL
30                 controller: DetailController,
31                 templateUrl: ‘detail.html‘
32             }).
33             otherwise({
34                 redirectTo: ‘/‘
35             });
36         }
37 
38         myApp.config(emailRouteConfig);//配置我们的路由
39 
40         messages = [{
41             id: 0, sender: "[email protected]", subject: "你好，这是一封邮件", date: "2015年4月13日", recipients: [‘[email protected]‘], message: "你好，我是xxx，这是发送给您的邮件。"
42         }, {
43             id: 1, sender: "[email protected]", subject: "你好，这是一封邮件", date: "2015年4月13日", recipients: [‘[email protected]‘], message: "你好，我是xxx，这是发送给您的邮件。"
44         }, {
45             id: 2, sender: "[email protected]", subject: "你好，这是一封邮件", date: "2015年4月13日", recipients: [‘[email protected]‘], message: "你好，我是xxx，这是发送给您的邮件。"
46         }];
47 
48         function ListController($scope) {
49             $scope.messages = messages;
50         }
51 
52         function DetailController($scope,$routeParams) {
53             $scope.message = messages[$routeParams.id];
54         }
55     </script>
56 </html>

列表页：list.html

<table>
    <tr>
        <td><strong>发件人</strong></td>
        <td><strong>内容</strong></td>
        <td><strong>日期</strong></td>
    </tr>
    <tr ng-repeat="message in messages">
        <td>{{message.sender}}</td>
        <td><a href="#/view/{{message.id}}">{{message.subject}}</a></td>
        <td>{{message.date}}</td>
    </tr>
</table>

详细页：detail.html

<div><strong>项目:</strong>{{message.subject}}</div>
<div><strong>发送者:</strong>{{message.sender}}</div>
<div><strong>日期:</strong>{{message.date}}</div>
<div>
    <strong>To:</strong>
    <span ng-repeat="recipient in message.recipients">
        {{recipient}}
    </span>
</div>
<div>{{message.message}}</div>
<a href="#/">回到列表</a>

以下是此次demo的坑：

1：新版的Angularjs，引用路由功能，需要单独再引用 angular-route.js 文件

2：在定义module时也需要添加对‘ngRoute‘的依赖
　　angular.module(‘xxxx‘, [‘ngRoute‘])

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

Angularjs 路由学习笔记