$stateProvider
在你的应用中大多数状态都有与其相关联的 url,路由控制不是设计完成 state 之后的事后想法,而是开始开发时就应该考虑的问题。
这里是如何设置一个基本url。
1 |
$stateProvider |
当我们访问index.html/contacts
时, 'contacts'
状态将被激活,同时index.html
中的ui-view
将被'contacts.html'
填充。或者,通过transitionTo('contacts')
方法将状态转变到'contacts'
状态,同时 url 将更新为index.html/contacts
。
URL参数
基本参数
通常,url动态部分被称为参数,有几个选项用于指定参数。基本参数如下:
1 |
$stateProvider |
或者,你也可以使用花括号的方式来指定参数:
1 |
// 与前面的设置方法等效 |
示例:
'/hello/'
- 只匹配'/hello/'
路径,没有对斜杠进行特殊处理,这种模式将匹配整个路径,而不仅仅是一个前缀。'/user/:id'
- 匹配'/user/bob'
、'/user/1234!!!'
,甚至还匹配'/user/'
,但是不匹配'/user'
和'/user/bob/details'
。第二个路径段将被捕获作为参数"id"
。'/user/{id}'
- 与前面的示例相同,但使用花括号语法。
含正则表达式的参数
使用花括号的方式可以设置一个正则表达式规则的参数:
1 |
// 只会匹配 contactId 为1到8位的数字 |
示例:
'/user/{id:[^/]*}'
- 与'/user/{id}'
相同'/user/{id:[0-9a-fA-F]{1,8}}'
- 与前面的示例相似,但只匹配1到8为的数字和字符'/files/{path:.*}'
- 匹配任何以'/files/'
开始的URL路径,并且捕获剩余路径到参数'path'
中。'/files/*path'
- 与前面相同,捕获所有特殊的语法。
警告:不要把捕获圆括号写进正则表达式,ui-router 的 UrlMatcher 将为整个正则表达式添加捕获。
Query Parameters
可以通过?
来指定参数作为查询参数
1 |
url: "/contacts?myParam" |
如果你需要不止一个查询参数,请用&
分隔:
1 |
url: "/contacts?myParam1&myParam2" |
嵌套状态的路由控制
附加的方式(默认)
在嵌套状态的路由控制中,默认方式是子状态的 url 附加到父状态的 url 之后。
1 |
$stateProvider |
路由将成为:
'contacts'
状态将匹配"/contacts"
'contacts.list'
状态将匹配"/contacts/list"
。子状态的url是附在父状态的url之后的。
绝对路由(^)
如果你使用绝对 url 匹配的方式,那么你需要给你的url字符串加上特殊符号"^"
。
1 |
$stateProvider |
路由将成为:
'contacts'
状态将匹配"/contacts"
'contacts.list'
状态将匹配"/list"
。子状态的url没有附在父状态的url之后的,因为使用了^
。
$stateParams 服务
之前看到的$stateParams
服务是一个对象,包含 url 中每个参数的键/值。$stateParams
可以为控制器或者服务提供 url 的各个部分。
注意:$stateParams
服务必须与一个控制器相关,并且$stateParams
中的“键/值”也必须事先在那个控制器的url
属性中有定义。
1 |
// 如果状态中 url 属性是: |
使用$stateParams
的两个陷阱
- 只有当状态被激活并且状态的所有依赖项都被注入时,
$stateParams
对象才存在。这代表你不能再状态的resolve
函数中使用$stateParams
对象,可以使用$state.current.params
来代替。
1 |
$stateProvider.state('contacts.detail', { |
- 在状态控制器中,
$stateParams
对象只包含那些在状态中定义的参数,因此你不能访问在其他状态或者祖先状态中定义的参数。
1 |
$stateProvider.state('contacts.detail', { |
$urlRouterProvider
$urlRouterProvider
负责处理在状态配置中指定的url路由方式之外的 url 请求的路由方式。$urlRouterProvider
负责监视$location
,当$location
改变后,$urlRouterProvider
将从一个列表,一个接一个查找匹配项,直到找到。所有 url 都编译成一个UrlMatcher
对象。
$urlRouterProvider
有一些实用的方法,可以在module.config
中直接使用。
when()
for redirection 重定向
参数:
what
String | RegExp | UrlMatcher,你想重定向的传入路径handler
String | Function 将要重定向到的路径
handler
作为 String
如果handler
是字符串,它被视为一个重定向,并且根据匹配语法决定重定向的地址。
1 |
app.config(function($urlRouterProvider){ |
handler
作为 Function
如果handler
是一个函数,这个函数是注入一些服务的。如果$location
匹配成功,函数将被调用。你可以选择性注入$match
。
函数可以返回:
- falsy 表明规则不匹配,
$urlRouter
将试图寻找另一个匹配 - String 该字符串作为重定向地址并且作为参数传递给
$location.url()
- nothing或者任何为真的值,告诉
$urlRouter
url 已经被处理
示例:
1 |
$urlRouterProvider.when(state.url, ['$match', '$stateParams', function ($match, $stateParams) { |
otherwise()
无效路由
参数:
path
String | Function 你想重定向url路径或者一个函数返回url路径。函数可以包含$injector
和$location
两个参数。
1 |
app.config(function($urlRouterProvider){ |
rule()
自定义url处理
参数:
handler
Function 一个函数,包含$injector
和$location
两个服务作为参数,函数负责返回一个有效的路径的字符串。
1 |
app.config(function($urlRouterProvider){ |
$urlMatcherFactory 和 UrlMatchers
定义了url模式和参数占位符的语法。$urlMatcherFactory
是在幕后被$urlRouterProvider
调用,来缓存编译后的UrlMatcher
对象,而不必在每次 location 改变后重新解析url。大多数用户不需要直接使用$urlMatcherFactory
方法,但是在状态配置中非常实用,可以使用$urlMatcherFactory
方法来生成一个UrlMatcher
对象,并在状态配置中使用该对象。
1 |
var urlMatcher = $urlMatcherFactory.compile("/home/:id?param1"); |
随机推荐
- Datatables事件
DataTables格式化渲染加上的html代码按一般方式绑定事件可能会没效果,通过以下方式可以解决 $(document).on("click","#checkchil ...
- 魅族mx4 pro连电脑,adb无法获取devices信息解决
根据 flyme 的文档: K:\MX4 USB Reference Manual\简体\MX4_ADB_参考说明书.txt 操作如下: 二.Windows XP中文环境1. 建立或修改C:\Doc ...
- 【转】sublime配置默认浏览器+多浏览器快捷键
配置在Chrome,Firefox中打开 安装 SideBarEnhancements 然后通过ctrl + k, ctrl + b打开侧边栏,在侧边栏的文件中右击,找到 open width -&g ...
- 传统瀑布式&敏捷开发
---传统瀑布式 瀑布模型式是最典型的预见性的方法,严格遵循预先计划的需求.分析.设计.编码.测试的步骤顺序进行. 步骤成果作为衡量进度的方法,例如需求规格,设计文档,测试计划和代码审阅等等. 瀑布式 ...
- css 实现悬浮效果
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title&g ...
- confirm对话框取消后阻止ajax操作、ajax做批量删除
在做批量删除的时候,需要用confirm弹出一个提示框让用户确认是否删除,点击确定,执行操作,点击取消,取消操作.但是如果使用ajax把选中项的主键值传到处理页面处理时,如果使用下面的方法将confi ...
- sqlserver多文件组数据库的备份和还原实战
数据库文件过大时就要进行数据分区,就是讲数据库拆分到多个文件组中.已方便数据文件管理,提高数据库的读取效能,多文件组如何进行数据库的备份和还原呢,今天主要做多文件组数据库的备份和还原实验. 第一步 创 ...
- C#:泛型(Generic)
前言: 此系列都为个人对C#的回顾,属于个人理解,新司机可参考.求老司机指点.如果有什么问题或不同见解,欢迎大家与我沟通! 目录: 泛型是什么 泛型的好处及用途 如何声明使用泛型 泛型类 泛型方法 ...
- ruby 基础知识(二)
ruby 中的动态方法 http://singleant.iteye.com/blog/1680382 Rails 大量使用了符号(symbol).符号看上去很像变量名,不过以冒号作为前缀.符号的例 ...
- Redis实战阅读笔记——开始
Redis实战这本书,看完以后最大的不是redis本身的东西,而是作者面对实际问题的分析而给出的设计方案,可以看成NoSql设计的应用.个人从这方面收获很多,至于Redis本身的东西,这个就花一两个小 ...