<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
</head>
<body>
<p ng-view></p>
<script type="text/javascript">
var app=angular.module("myApp",['ngRoute']);
app.config(function($routeProvider){
$routeProvider.when("/",{
controller:"listController",
templateUrl:'list.html'
}).
when("/view/:id",{
controller:"detailController",
templateUrl:"detail.html"
}).
otherwise({
redirectTo:'/'
})
});
var msg=[
{
id:0,date:'2014-1-1',info:"aaaaaa",sender:"BB",detail:"fhjdskgfdlgfdlsgfydl"
},{
id:2,date:'2015-1-1',info:"bbbb",sender:"AA",detail:"aaaaaaaaaaaaaaaaa"
},{
id:3,date:'2016-1-1',info:"cccc",sender:"CC",detail:"bbbbbbbbbbb"
},{
id:4,date:'2017-1-1',info:"dddd",sender:"DD",detail:"vvvvvvvvvvvvv"
},{
id:5,date:'2018-1-1',info:"fffff",sender:"GG",detail:"dsadsasssssssss"
},{
id:6,date:'2019-1-1',info:"eqrq",sender:"RR",detail:"fhjdskgfdlgfdlsgfydl"
},{
id:7,date:'2014-11-1',info:"3213213",sender:"MM",detail:"fhjdskgfdlgfdlsgfydl"
}
];
app.controller("listController",function($scope){
$scope.messages=msg;
});
app.controller("detailController",function($scope,$routeParams){
console.log($routeParams);//为什么打印的是这个？id:"{{}message.id}"
alert($routeParams);
$scope.detailmsg=msg[$routeParams.id];
});
</script>
</body>
</html>
-------list.html---------------
<table>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr ng-repeat="message in messages">
<td>{{message.sender}}</td>
<td><a href="#/view/{{}message.id}">{{message.info}}</a></td>
</tr>
</table>
----------detail.html:detailmsg.sender没有报错，但却不能显示数据？--------------
<p>{{detailmsg}}</p>
<p>{{detailmsg.sender}}</p>
<p>111111</p>
<a href="#/">back home</a>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ralat pengekodan cuai href="#/view/{{}message.id}"
Jika anda menggunakan angular-uiroute, hanya gunakan state.go (nama halaman).