Download the latest version of the ANGULARJS version number from the official website: 1.3.15
Do a simple Routing function demo
Home: index.html
1 <!DOCTYPE HTML>2 3 <HTML>4 <Head>5 <MetaCharSet= "Utf-8" />6 <title>Test</title>7 <Scriptsrc= "./js/angular.min.js"></Script>8 <Scriptsrc= "./js/angular-route.min.js"></Script>9 </Head>Ten <BodyNg-app= "MYAPP"> One <DivNg-controller= "Textcontroller"> A <P>{{Sometext}}</P> - </Div> - <DivNg-view></Div> the </Body> - <Script> - varmyApp=Angular.module ('myApp', ['Ngroute']); - Myapp.controller ('Textcontroller', function($scope) { + $scope. Sometext= 'Test Display Content'; - }); + A //Routing at functionEmailrouteconfig ($routeProvider) { - $routeProvider. - When ('/', { - Controller:listcontroller, - Templateurl:'list.html' - }). in When ('/view/:id', {//precede the ID with a colon, and a parameterized URL is developed - Controller:detailcontroller, to Templateurl:'detail.html' + }). - otherwise ({ the Redirectto:'/' * }); $ }Panax Notoginseng - Myapp.config (emailrouteconfig);//Configure our Routing the + Messages= [{ A ID:0, Sender:"[email protected]", Subject:"Hello, this is an e-mail.", Date:"April 13, 2015", recipients: ['[email protected]'], message:"Hello, I am xxx, this is the mail sent to you. " the }, { + ID:1, Sender:"[email protected]", Subject:"Hello, this is an e-mail.", Date:"April 13, 2015", recipients: ['[email protected]'], message:"Hello, I am xxx, this is the mail sent to you. " - }, { $ ID:2, Sender:"[email protected]", Subject:"Hello, this is an e-mail.", Date:"April 13, 2015", recipients: ['[email protected]'], message:"Hello, I am xxx, this is the mail sent to you. " $ }]; - - functionListcontroller ($scope) { the $scope. Messages=messages; - }Wuyi the functionDetailcontroller ($scope, $routeParams) { - $scope. Message=messages[$routeParams. Id]; Wu } - </Script> About </HTML>
List page: list.html
<table> <tr> <td><strong> senders </strong></td> <td>< strong> content </strong></td> <td><strong> dates </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 Page: detail.html
<div><strong> Project:</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><div>{{message.message}}</div><a href= "#/" > Back to List </a>
Here is the pit of this demo:
1: New version of ANGULARJS, reference routing function, need to refer to Angular-route.js file separately
2: You also need to add a dependency on ' ngroute ' when defining the module
Angular.module (' xxxx ', [' Ngroute '])
Angularjs Routing Learning Notes