angularjs ngRoute的使用简单例子
很丑的小例子，剛學(xué)angularjs，寫(xiě)下來(lái)方面以后看。
1.例子的工程目錄如下：
2.index.html代碼如下：
<!DOCTYPE html>
<html>
<head>
?? ?<meta charset="utf-8" />
?? ?<script type="text/javascript" src="lib/angular.js"></script>
?? ?<script type="text/javascript" src="js/app.js"></script>
?? ?<script type="text/javascript" src="lib/angular-route.js"></script>
?? ?<title></title>
</head>
<body ng-app="app">
?? ?<h1>我的郵件</h1>
<!--模板（子視圖）將在這個(gè)地方插入-->
?? ?<div ng-view>
?? ?</div>
</body>
</html>
3.app.js內(nèi)容：
var app = angular.module('app', ['ngRoute']);
//郵件
var messages=[{
?? ?id:0,
?? ?sender:"王經(jīng)理",
?? ?subject:"項(xiàng)目總結(jié)",
?? ?date:"2015-4-2 09:00:4",
?? ?recipient:"小李",
?? ?message:"記得明天上午開(kāi)會(huì)要收項(xiàng)目總結(jié)，不要搞砸了。"
},{
?? ?id:1,
?? ?sender:"小姨子",
?? ?subject:"明天吃飯",
?? ?date:"2015-4-2 23:12:56",
?? ?recipient:"小李",
?? ?message:"姐夫明天請(qǐng)我吃飯啦。"
}];
app.controller('emailList', ['$scope', function($scope){
?? ?$scope.emails=messages;
}]);
app.controller('emailDetail',['$scope','$routeParams',function($scope,$routeParams){
?? ?$scope.email=messages[$routeParams.id];
}]);
app.config(['$routeProvider',function($routeProvider) {
?? ?$routeProvider.when('/', {
?? ??? ?controller:'emailList',
?? ??? ?templateUrl:'./template/emailList.html'
//這個(gè)使用/view/:id，當(dāng)路徑進(jìn)行匹配的時(shí)候會(huì)自動(dòng)解析出其中的id，可以通過(guò)$routeParams.id獲取。如：
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby// Route: /Chapter/:chapterId/Section/:sectionId // Then //$routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}??? }).when('/view/:id',{
?? ??? ?controller:'emailDetail',
?? ??? ?templateUrl:'./template/emailDetail.html'
?? ?});
}]);
4.emailList.html和emailDetail.html內(nèi)容：
<table>
?? ?<tr><td>發(fā)送者</td><td>主題</td><td>日期</td></tr>
?? ?<tr ng-repeat="email in emails">
?? ??? ?<td>{{email.sender}}</td>
?? ??? ?<td><a href="#/view/{{email.id}}">{{email.subject}}</a></td>
?? ??? ?<td>{{email.date}}</td>
?? ?</tr>
</table>
<div>
?? ?<h2>主題：{{email.subject}}</h2>
?? ?<h3>發(fā)送者：{{email.sender}}</h3>
?? ?<h3>日期：{{email.date}}</h3>
?? ?<h3>接收者：{{email.recipient}}</h3>
?? ?<h2>內(nèi)容：{{email.message}}</h2>
?? ?<h4><a href="#/"><<<返回</a></h4>
</div>
5.效果圖：
?
轉(zhuǎn)載于:https://www.cnblogs.com/chaojihexiang/p/4340241.html
總結(jié)
以上是生活随笔為你收集整理的angularjs ngRoute的使用简单例子的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 水平集群和垂直集群的区别！
- 下一篇： GeoServer 常见问题总结