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 ...
随机推荐
- CSS中盒子模型和position(一)
今天遇到几个css中的重要的知识点,记得这些都是以前看过的:margin.padding.border和position.可是用起来还是有很多的问题,以前自己看过去总是懒得记录,等到用起来了都不知道自 ...
- 向Array中添加选择排序
选择排序思路 在无序区中选出最小的元素,然后将它和有序区的第一个元素交换位置. 选择排序实现 Function.prototype.method = function(name, func){ thi ...
- 互联网产品设计常用文档类型-BRD、MRD、PRD、FSD (
BRD Business Requirements Document,商业需求文档.这是产品声明周期中最早的问的文档,再早就应该是脑中的构思了,其内容涉及市场分析,销售策略,盈利预测等,通常是和老大们 ...
- 我存在,你深深的循环里--从反射看JSON死循环
JSON有一个非常经典的问题:JSONException: There is a cycle in the hierarchy!俗称死循环.解决这个问题至少有三种以上的办法,总之一句话就是过滤.今 ...
- Netsharp快速入门(之16) Netsharp基础功能(权限管理)
第5章 Netsharp基础功能 5.1 权限配置 5.1.1 功能权限 1.配置权限功能点,打开平台工具-基础业务-操作管理 2.选择资源节点为销售订单,点添加常用操作,添加完成后 ...
- 深入理解jQuery中live与bind方法的区别
本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 ...
- 【BZOJ】【1069】【SCOI2007】最大土地面积
计算几何/旋转卡壳 从已知点中选出四个使得选出的四边形面积最大,很明显我们应该在凸包上搞. 我一开始的思路是:枚举 i ,找到 i 的对锺点cur1,这两个点将凸包分成了两半,我们在左半中枚举一个 j ...
- [剑指OFFER] 数组中的逆序对
题目描述 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数. 分析:利用归并排序的思想,分成2部分,每一部分按照从大到 ...
- 9 I/O复用
I/O复用使得程序能够同时监听多个文件描述符,适用于以下情况: 客户端同时处理多个socket,比如非阻塞connect 客户端同时处理用户输入和网络连接,比如聊天室程序 TCP服务器同时处理监听so ...
- switch语句的使用,非常好
这是谭浩强课本上枚举类型的例子,但是我贴这个例子的代码不是因为枚举类型,是因为这个代码使用switch语句用得非常好,值得一贴. 题目是这样的:有红.黄.蓝.白.黑5中颜色的球若干,依次取出3个球,求 ...