angularjs ngRoute的使用简单例子
很丑的小例子,刚学angularjs,写下来方面以后看。
1.例子的工程目录如下:
2.index.html代码如下:
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body ng-app="app">
<h1>我的邮件</h1>
<!--模板(子视图)将在这个地方插入-->
<div ng-view>
</div>
</body>
</html>
3.app.js内容:
var app = angular.module('app', ['ngRoute']);
//邮件
var messages=[{
id:0,
sender:"王经理",
subject:"项目总结",
date:"2015-4-2 09:00:4",
recipient:"小李",
message:"记得明天上午开会要收项目总结,不要搞砸了。"
},{
id:1,
sender:"小姨子",
subject:"明天吃饭",
date:"2015-4-2 23:12:56",
recipient:"小李",
message:"姐夫明天请我吃饭啦。"
}];
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'
//这个使用/view/:id,当路径进行匹配的时候会自动解析出其中的id,可以通过$routeParams.id获取。如:
// 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和emailDetail.html内容:
<table>
<tr><td>发送者</td><td>主题</td><td>日期</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>
<h2>主题:{{email.subject}}</h2>
<h3>发送者:{{email.sender}}</h3>
<h3>日期:{{email.date}}</h3>
<h3>接收者:{{email.recipient}}</h3>
<h2>内容:{{email.message}}</h2>
<h4><a href="#/"><<<返回</a></h4>
</div>
5.效果图:
angularjs ngRoute的使用简单例子的更多相关文章
- Hibernate4.2.4入门(一)——环境搭建和简单例子
一.前言 发下牢骚,这段时间要做项目,又要学框架,搞得都没时间写笔记,但是觉得这知识学过还是要记录下.进入主题了 1.1.Hibernate简介 什么是Hibernate?Hibernate有什么用? ...
- AgileEAS.NET SOA 中间件平台.Net Socket通信框架-简单例子-实现简单的服务端客户端消息应答
一.AgileEAS.NET SOA中间件Socket/Tcp框架介绍 在文章AgileEAS.NET SOA 中间件平台Socket/Tcp通信框架介绍一文之中我们对AgileEAS.NET SOA ...
- spring mvc(注解)上传文件的简单例子
spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationConte ...
- ko 简单例子
Knockout是在下面三个核心功能是建立起来的: 监控属性(Observables)和依赖跟踪(Dependency tracking) 声明式绑定(Declarative bindings) 模板 ...
- mysql定时任务简单例子
mysql定时任务简单例子 ? 1 2 3 4 5 6 7 8 9 如果要每30秒执行以下语句: [sql] update userinfo set endtime = now() WHE ...
- java socket编程开发简单例子 与 nio非阻塞通道
基本socket编程 1.以下只是简单例子,没有用多线程处理,只能一发一收(由于scan.nextLine()线程会进入等待状态),使用时可以根据具体项目功能进行优化处理 2.以下代码使用了1.8新特 ...
- 一个简单例子:贫血模型or领域模型
转:一个简单例子:贫血模型or领域模型 贫血模型 我们首先用贫血模型来实现.所谓贫血模型就是模型对象之间存在完整的关联(可能存在多余的关联),但是对象除了get和set方外外几乎就没有其它的方法,整个 ...
- [转] 3个学习Socket编程的简单例子:TCP Server/Client, Select
以前都是采用ACE的编写网络应用,最近由于工作需要,需要直接只用socket接口编写CS的代码,重新学习这方面的知识,给出自己所用到的3个简单例子,都是拷贝别人的程序.如果你能完全理解这3个例子,估计 ...
- jsonp的简单例子
jsonp的简单例子 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
随机推荐
- SEO & HTML语义化
SEO SEO的概念:搜索引擎优化,常见的搜索引擎有百度.谷歌等.优化的话,就是通过我们的处理,使得我们的网站在搜索引擎下有一个理想的结果. SEO的目的:当用户在搜索引擎上搜索关键词的时候,看到我们 ...
- 各个浏览器CSS中的Bugs及解决方案
Bugs及解决方案列表(以下实例默认运行环境都为Standard mode): 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px; ...
- Github-Client(ANDROID)开源之旅(三) ------ 巧用ViewPagerIndicator
接上篇博文:Github-Client(ANDROID)开源之旅(二) ------ 浅析ActionBarSherkLock 文中结合了网易新闻客户端讲解了开源库ActionBarSherklock ...
- DELETE - 删除一个表中的行
SYNOPSIS DELETE FROM [ ONLY ] table [ WHERE condition ] DESCRIPTION 描述 DELETE 从指明的表里删除满足 WHERE 子句的行. ...
- 命令终端执行python
windows进入cmd 1.进入cmd窗口,找到存放py文件的地址(如E:\learn_mock) 2.退出python,输入exit() linux下一样
- PyTorch如何构建深度学习模型?
简介 每过一段时间,就会有一个深度学习库被开发,这些深度学习库往往可以改变深度学习领域的景观.Pytorch就是这样一个库. 在过去的一段时间里,我研究了Pytorch,我惊叹于它的操作简易.Pyto ...
- MySQL系列(三)--数据库结构优化
良好的数据库逻辑设计和物理设计是数据库高性能的基础,所以对于数据库结构优化是很有必要的 数据库结构优化目的: 1.减少数据的冗余 2.尽量避免在数据插入.删除和更新异常 例如:有一张设计不得当的学生选 ...
- Sphinx排序模式
目前SPHINX支持6种排序模式.分别是: 1. SPH_SORT_RELEVANCE2. SPH_SORT_ATTR_DESC3. SPH_SORT_ATTR_ASC4. SPH_SORT_TIME ...
- SQL语句新建数据库
CREATE DATABASE 语句. CREATE DATABASE Epiphany ON ( NAME = Epiphany, FILENAME = 'E:\SQL SERVER 2008\Ep ...
- 关于web页面优化
简单汇总了一下web的优化方案(主要的前端优化策略) 减少http请求次数 文件合并(js.css.图片):ps:多个图片合并之后,总体积会变小 内联图片,即data:URL scheme,但容易导致 ...