Home > Developer > Web Develop
Very ugly small example, just learn angularjs, write down aspects later look.
1. The project Catalogue of the examples is as follows:
The 2.index.html code is as follows:
<! DOCTYPE html>
<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>
<body ng-app= "App" >
<!--template (child view) will be inserted in this place--
<div ng-view>
</div>
</body>
3.app.js content:
var app = Angular.module (' app ', [' Ngroute ']);
Mail
var messages=[{
id:0,
Sender: "Manager Wang",
Subject: "Project Summary",
Date: "2015-4-2 09:00:4",
Recipient: "Xiao Li",
Message: "Remember the meeting tomorrow morning to collect the project summary, do not mess up." "
},{
Id:1,
Sender: "Sister",
Subject: "Eat Tomorrow",
Date: "2015-4-2 23:12:56",
Recipient: "Xiao Li",
Message: "Brother-in-law invited me to dinner tomorrow." "
}];
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 '
This uses/view/:id, which automatically resolves the id when the path is matched, and can be obtained by $routeparams.id. Such as:
//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 and emaildetail.html content:
<table>
<tr><td> Senders </td><td> Topics </td><td> dates </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>
</div>
5.:
Simple examples of the use of Angularjs Ngroute
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
