angularjs ngRoute demo
<!doctype html>
<html lang="en" ng-app="AMail">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="lib/angular.js"></script>
<script src="lib/angular-route.js"></script>
</head>
<body>
<h1>A - Mail</h1>
<div ng-view></div>
<script type="text/ng-template" id="detail.html">
<div><strong>Subject:</strong>{{message.subject}}</div>
<div><strong>Sender:{{message.sender}}</strong></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 message list</a>
</script>
<script type="text/ng-template" id="list.html">
<table>
<tr>
<td><strong>Sender</strong></td>
<td><strong>Subject</strong></td>
<td><strong>Date</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>
</script>
<script>
var aMailServices = angular.module('AMail', ['ngRoute']);
function emailRouteConfig($routeProvider) {
$routeProvider.
when('/', {
controller: ListController,
templateUrl: 'list.html'
}).
when('/view/:id', {
controller: DetailController,
templateUrl: 'detail.html'
}).
otherwise({
redirectTo: '/'
});
}
aMailServices.config(emailRouteConfig); messages = [{id: 0, sender: 'jean@somecompany.com', subject: 'Hi there, old friend',date: 'Dec 7, 2013 12:32:00', recipients: ['greg@somecompany.com'],message: 'Hey, we should get together for lunch '}, {
id: 1, sender: 'maria@somecompany.com',subject: 'Where did you leave my laptop?',date: 'Dec 7, 2013 8:15:12', recipients: ['greg@somecompany.com'],message: 'I thought you were going to put it in my desk drawer.'+'But it does not seem to be there.'}, {id: 2, sender: 'bill@somecompany.com', subject: 'Lost python',date: 'Dec 6, 2013 20:35:02', recipients: ['greg@somecompany.com'],message: "Nobody panic, but my pet python is missing from her cage.'+'She doesn't move too fast, so just call me if you see her."}]; function ListController($scope) {
$scope.messages = messages;
}
function DetailController($scope, $routeParams) {
$scope.message = messages[$routeParams.id];
}
</script>
</body>
</html>
angularjs ngRoute demo的更多相关文章
- AngularJs ng-route路由详解
本篇基于ng-route来讲下路由的使用...其实主要是 $routeProvider 搭配 ng-view 实现. ng-view的实现原理,基本就是根据路由的切换,动态编译html模板. 更多内容 ...
- AngularJS入门-demo
双向绑定测试: <body ng-app> 请输入姓名:<input ng-model="myname"> <br> {{myname}},你好 ...
- angularjs ngRoute和ui.router对比
ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...
- angularjs ngRoute的使用简单例子
很丑的小例子,刚学angularjs,写下来方面以后看. 1.例子的工程目录如下: 2.index.html代码如下: <!DOCTYPE html><html><hea ...
- AngularJS +HTML Demo
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- AngularJs Test demo &front end MVVM implementation conjecture and argue.
<!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
- AngularJS入门Demo
1 :表达式 <html> <head> <title>入门小Demo-1</title> <script src="angular.m ...
- angularjs transclude demo
<!doctype html> <html lang="en" ng-app="expanderModule"> <head> ...
- angularjs $watch demo
<!doctype html> <html lang="en" ng-app> <head> <meta charset="UT ...
随机推荐
- MySQL 分组
MySQL GROUP BY 语句 GROUP BY 语句根据一个或多个列对结果集进行分组. 在分组的列上我们可以使用 COUNT, SUM, AVG,等函数. GROUP BY 语法 SELECT ...
- 【CentOS】搭建git服务器
参考资料: https://github.com/jackliu2013/recipes/blob/master/doc/linux/CentOS_6.4_git服务器搭建.md http://blo ...
- jQuery的弹出窗口插件colorbox
官方网站:http://colorpowered.com/colorbox/ 支持 照片,照片组,幻灯片,ajax,内联 和 iframe 框架. 通过CSS 控制外观,使用用户可以很容易重新定制外观 ...
- JS 学习笔记--JS中的事件对象基础
事件:JavaScript中的事件是由访问web页面用户的一系列操作引起的,比如点击鼠标,键盘按键等.当用户执行某些操作的时候再去执行一些代码. 事件模型:内联模型.脚本模型.DOM2模型 内联模型: ...
- 【BZOJ】【4004】【JLOI2015】装备购买
拟阵/贪心 题解戳这里:http://blog.csdn.net/popoqqq/article/details/45148309 思路: 裸拟阵…… 维护线性基,将武器按价格排序,从小到大塞进去,如 ...
- [haoi2010]订货 最小费用流
这道题oj上的标签是动态规划,但我想不出来动态规划怎么搞,空间不爆,时间也要爆的: 好的,不扯淡,此题正常做法是最小费用流: 这道题我写了两遍,为什么呢?原因是第一次写的时候,不会写费用流,又恰好没带 ...
- 如何撰写SCI论文的讨论部分?——经典结构 – 俗称“倒漏斗型。
- RVA与Offset的换算函数
function RVAToFileOffset(FileName:string; RVA: Cardinal): Cardinal; var MemPE: TFileStream; PEDo ...
- nginx 多站点配置方法集合(转)
关于nginx的多站设置,其实和apache很相似,假设我们已经有两个域名,分别是:www.websuitA.com和www.websuitB.com.并且这两个域名已经映射给了IP为192.168. ...
- maven mirror repository
简单点来说,repository就是个仓库.maven里有两种仓库,本地仓库和远程仓库.远程仓库相当于公共的仓库,大家都能看到.本地仓库是你本地的一个山寨版,只有你看的到,主要起缓存作用.当你向仓库请 ...