Angularjs制作简单的路由功能demo
从官网下载了最新版本的Angularjs版本号：1.3.15
做一个简单的路由功能demo
首页：index.html
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>测试</title>
<scriptsrc="./js/angular.min.js"></script>
<scriptsrc="./js/angular-route.min.js"></script>
</head>
<bodyng-app="myApp">
<divng-controller="TextController">
<p>{{someText}}</p>
</div>
<divng-view></div>
</body>
<script>
varmyApp=angular.module('myApp',['ngRoute']);
myApp.controller('TextController',function($scope){
$scope.someText='测试显示内容';
});
//路由
functionemailRouteConfig($routeProvider){
$routeProvider.
when('/',{
controller:ListController,
templateUrl:'list.html'
}).
when('/view/:id',{//在id前面加一个冒号，从而制订了一个参数化URL
controller:DetailController,
templateUrl:'detail.html'
}).
otherwise({
redirectTo:'/'
});
}
myApp.config(emailRouteConfig);//配置我们的路由
messages=[{
id:0,sender:"123456@qq.com",subject:"你好，这是一封邮件",date:"2015年4月13日",recipients:['wifei@163.com'],message:"你好，我是xxx，这是发送给您的邮件。"
},{
id:1,sender:"123456@qq.com",subject:"你好，这是一封邮件",date:"2015年4月13日",recipients:['wifei@163.com'],message:"你好，我是xxx，这是发送给您的邮件。"
},{
id:2,sender:"123456@qq.com",subject:"你好，这是一封邮件",date:"2015年4月13日",recipients:['wifei@163.com'],message:"你好，我是xxx，这是发送给您的邮件。"
}];
functionListController($scope){
$scope.messages=messages;
}
functionDetailController($scope,$routeParams){
$scope.message=messages[$routeParams.id];
}
</script>
</html>
列表页：list.html
<table>
<tr>
<td><strong>发件人</strong></td>
<td><strong>内容</strong></td>
<td><strong>日期</strong></td>
</tr>
<trng-repeat="messageinmessages">
<td>{{message.sender}}</td>
<td><ahref="#/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>
<spanng-repeat="recipientinmessage.recipients">
{{recipient}}
</span>
</div>
<div>{{message.message}}</div>
<ahref="#/">回到列表</a>
以下是此次demo的坑：
1：新版的Angularjs，引用路由功能，需要单独再引用angular-route.js文件
2：在定义module时也需要添加对'ngRoute'的依赖
angular.module('xxxx',['ngRoute'])
以上所述就是本文的全部内容了，希望大家能够喜欢。