angular学习笔记(十七)-路由和切换视图
本篇介绍angular中如何通过判断url的hash值来显示不同的视图模板,并使用不同的控制器:
下面,通过一个例子,来一步一步说明它的用法:
我们要做一个邮箱应用,打开的时候显示的是邮件列表:
然后点击邮件主题,可以查看该邮件的详细内容:
点击返回列表,再回到列表页
一. 创建index页面:
<!DOCTYPE html>
<html>
<head>
<title>14.1路由和视图切换</title>
<meta charset="utf-8">
<script src="../../angular.js"></script>
<script src="controller.js"></script>
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
<div ng-app="A-Mail">
<h3>A-Mail</h3>
<br>
<div ng-view></div>
</div>
</body>
</html>
这一步需要做的事情有:
①. 通过ng-app,使用某个模型来管理页面
②. 通过ng-view,创建空的div,里面的内容会根据url的hash值来调用不同的视图模板,并且使用不同的控制器
③. 写好公共的,始终被显示的视图部分,比如这里的标题: <h3>A-Mail</h3>
二. 创建需要被调用的其它视图, 也就会是放在ng-view中的视图模板:
①list.html:
<table>
<tr><th>发件人</th><th>主题</th><th>发送时间</th></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>
当hash值为空的时候,ng-view中应该显示的是邮件的列表.
注意,其中邮件的链接应该使用"#/..." 使用#开头表示改变路径的hash值
比如我输入这个链接:
http://localhost:801/angular/OREILLY/14.1.路由和视图切换/index.html
打开后,它会自己变成:
http://localhost:801/angular/OREILLY/14.1.路由和视图切换/index.html#/
如果跳转到"#/view/001",
url就会变成: http://localhost:801/angular/OREILLY/14.1.路由和视图切换/index.html#/view/001
②detail.html:
<p><b>主题:</b><span>{{message.subject}}</span></p>
<p><b>发件人:</b><span>{{message.sender}}</span></p>
<p><b>发送时间:</b><span>{{message.date}}</span></p>
<h4>To:</h4>
<ul class="clear_float"><li ng-repeat="name in message.recipients">{{name}}; </li></ul>
<hr>
<div>{{message.content}}</div>
<a class="button" href="#/">返回列表</a>
当hash值为view/id的时候,显示的应该是当前id的邮件详细内容
返回列表按钮返回到没有hash值的路径
三. 创建模块,路由,控制器:
var messages = [
{
"id":"001",
"sender":"兔小宝",
"subject":"给小宝买草",
"date":"Dec 7, 2014 12:32:00",
"recipients": ["小a","米米","小黑"],
"content":"今天一定要给我买草啊!!!"
},
{
"id":"002",
"sender":"周孝刚",
"subject":"给小宝加水",
"date":"May 12, 2014 05:04:00",
"recipients": ["兔兔","粥粥","小白"],
"content":"今天一定要给小宝加水啊!!!"
},
{
"id":"003",
"sender":"code_bunny",
"subject":"买凉席",
"date":"Thu 14, 2014 04:14:00",
"recipients": ["white_bunny","sb","小米"],
"content":"今天一定要给买凉席啊!!!"
}
]; var aMail = angular.module('A-Mail',[]); aMail.controller('listControll',function($scope){
$scope.messages = messages;
});
aMail.controller('detailControll',function($scope, $routeParams){
var index = parseInt($routeParams.id)-1;
$scope.message = messages[index];
}); aMail.config(function($routeProvider){
$routeProvider.when('/',{controller:'listControll',templateUrl:'view/list.html'}).when('/view/:id',{controller:'detailControll',templateUrl:'view/detail.html'}).otherwise({redirectTo:'/'})
});
①.messages是虚拟的数据
②.创建该应用使用的模型
③.给该模型创建两个控制器,分别用于控制邮件列表视图和邮件详细内容视图
④.给该模型配置路由:
aMail.config(function($routeProvider){
$routeProvider.when('hash1',{controller:'someController1',templateUrl:'path/to/view1}).when('hash2',{controller:'someController2',templateUrl:'path/to/view2'})....when().otherwise({redirectTo:'/'})
})
config方法传入一个函数,函数中传入参数"$routeProvider"作为服务.
$routeProvider.when(hash,obj)用于配置路由:
hash: 字符串格式. 匹配url的hash值,注意这里不要#, '/' 就表示hash值为空.
obj: 一个json对象,对象有以下这些属性:
controller: '控制器' : 字符串格式,定义控制ng-view元素的控制器
template: '视图模板' : 字符串格式,定义ng-view元素下应该使用哪个视图模板来填充内容,写的是视图模板的路径
redirectTo: '路径' : 字符串格式,定义重定向到哪里,注意定义的也是hash值
$routeProvider.otherwise()用于当没有匹配到任何路由的时候执行的内容:
参数和when的第二个参数用法一致
⑤.$routeParams服务:
关于服务的概念,可以参考这篇:http://www.cnblogs.com/liulangmao/p/3727808.html
$routeParems可以获取到一个参数化的url组件.这个组件比较复杂,单就这个例子来看,我们在配置路由的时候在when的url属性传入了/view/:id作为匹配,这样,就会把'view/'后面的内容,作为$routeParems对象的id属性值
angular学习笔记(十七)-路由和切换视图的更多相关文章
- Ionic学习笔记4_ionic路由(页面切换)
1.1. ionic路由机制: 状态 1.2. ion-nav-view <body ng-controller="firstCtrl"> <a class= ...
- Angular 学习笔记 （路由外传 - RouteReuseStrategy）
refer : https://github.com/angular/angular/issues/10929 https://stackoverflow.com/questions/41280471 ...
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- angular学习笔记(三十一)-$location(1)
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
- angular学习笔记(三十)-指令(5)-link
这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...
- angular学习笔记(三十)-指令(2)-restrice,replace,template
本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...
- SpringBoot学习笔记：动态数据源切换
SpringBoot学习笔记:动态数据源切换 数据源 Java的javax.sql.DataSource接口提供了一种处理数据库连接的标准方法.通常,DataSource使用URL和一些凭据来建立数据 ...
- python3.4学习笔记(十七) 网络爬虫使用Beautifulsoup4抓取内容
python3.4学习笔记(十七) 网络爬虫使用Beautifulsoup4抓取内容 Beautiful Soup 是用Python写的一个HTML/XML的解析器,它可以很好的处理不规范标记并生成剖 ...
随机推荐
- Swift学习笔记（十五）——程序猿浪漫之用Swift+Unicode说我爱你
程序猿经常被觉得是呆板.宅,不解风情的一帮人.可是有时候.我们也能够使用自己的拿手本领来表现我们的浪漫. 因为Swift语言是支持Unicode编码的,而Unicode最新已经支持emoji(绘文字) ...
- Websocket——Websocket原理
偶然在知乎上看到一篇回帖,瞬间认为之前看的那么多资料都不及这一篇回帖让我对 websocket 的认识深刻有木有.所以转到我博客里,分享一下.比較喜欢看这样的博客,读起来非常轻松.不枯燥,没有布道师的 ...
- TP5报错variable type error： array
variable type error: array 当你在tp5框架中写方法时返回一个数组时,tp5会报错:variable type error: array 这是因为tp5不支持返回数组. ...
- Hibernate日期映射类型
映 射 类 型 Java类型 标准SQL类型 描 述 date java.util.Date或者java.sql.Date DATE 代表日期,形式为: YYYY-MM-DD time java ...
- 【线程篇】stop() 和suspend()
1.为什么不推荐用 stop()和 suspend() stop这个方法将终止所有未结束的方法,包括run方法.当一个线程停止时候,他会立即释放所有他锁住对象上的锁.这会导致对象处于不一致的状态.假如 ...
- 怎样以Root方式执行Xcode
粗略算一下,在第一次接触OSX的时候,我接触Windows已经有14年,刚開始用OSX和Xcode各种不习惯.可是用Xcode写了一星期的代码,我却有一种想把Windows和VS扔了的感觉(真的用着非 ...
- jquery获取td所在的行和列
今天在做项目时.遇到一个须要获取第几行第几列的问题. 后来.网上找了找资料,整理了此文.(使用jquery的preAll()获取列) 代码例如以下: <!DOCTYPE html PUBLIC ...
- ibatis 批量更新（一）
1.4.2.3 批量修改 支持单个动态更新.批量动态更新 <update id="updateCONSULT_SCHEDULEDynamic" parameterClas ...
- scala中:: , +:, :+, :::, +++的区别
4种操作符的区别和联系 一. :: 该方法被称为cons,意为构造,向队列的头部追加数据,创造新的列表. 用法为 x::list,其中x为加入到 头部的元素,无论x是列表与否,它都只将成为新生成列 ...
- TaskController
package main.java.com.zte.controller.system; import java.io.PrintWriter; import java.util.ArrayList; ...