Angular(三)路由ui-router
来源:互联网 发布:水乳推荐20到25岁 知乎 编辑:程序博客网 时间:2024/06/05 10:48
一、ui-router相对ngRouter的优点
由于angular内置的路由机制那个ng-router存在一些缺陷,不能很好的实现多视图与嵌套视图,所以一般都会选择angularUI提供的ui-router来代替ng-router。
ui-router中的一些指令:
- $urlRouterProvider:服务提供商,用来配置路由重定向
- $stateProvider:服务提供商,用来配置路由
- $state:服务,用来显示当前路由状态信息,以及一些路由方法(如跳转)
ui.router在创建路由时,会实例化一个state对象,并存储在states集合里面;每个state对象都有一个state.name进行唯一标识(如:“main”)
ui.router提供了一个指令“ui-sref”来解决循环遍历rules的问题
<a ui-sref="main" ></a>
当点击<a>标签时,会直接跳到“main”state,而不是循环遍历rules;跳到对应的state后,ui.router会改变hash值,所以会触发“$locationChangeSuccess”事件,然后执行回调。
$stateProvider.state('state1',{ url: '/', template: {<p>this is state one</p>}}).state('state2',{ url: '/main', template: {<p>this is state2</p>}})
二、多视图
ui-router的最大特点是可以实现多视图与嵌套视图
所谓多视图,就是一个页面中可以显示多个动态变化的不同区域。
- 在ui-router中,可以给视图命名(如:ui-view=“state1”)
- 可以再路由配置中根据视图名字(如:“state1”)来配置不同的模块、控制器等;
- 视图名是一个字符串,不可以包含“@”字符(@在视图命名中有特殊含义)
多视图的一个例子:
$stateProvider.state('main.stateOne',{ url: '/state:[0-9]', view: { '@main': {temp;ate: <div>this is stateOne</div>}, //模板内容会被安插到福路由main模板的匿名视图下(ui-view) 'state2@': {template: <div>this is stateTwo</div>}, //模板内容会被安插到跟路由模板名为“state1”的视图下(ui-wview=“state1”) 'state3@main': {template: <p>this is stateThree</p>} //模板内容会被安插到福路由(main)模板名为“state3”的视图下 }});
views 用来显示多个视图,它的值为: “ 视图名@ 状态名 ”
视图名是“ui-view=‘state1’”中的state1,也可以是空字符串或者省略,代表匿名视图;
状态名默认情况下是父路由的state.name(即父路由的状态名),也可以是空字符串,表示顶层rootState(最外层的状态名),还可以是该视图的任意祖先的state.name;
三、嵌套视图
所谓嵌套视图,就是在页面中某个动态变化的区域中,嵌套这另一个可以动态变化的区域。
<div ui-view="parentView> Parent view <div ui-view="childView">Child view</div></div>
参考文章:Angular路由深入浅出(五)
0 0
- Angular(三)路由ui-router
- Angular路由:ui-router
- angular路由 ui.router
- angular-ui-router页面路由
- 初学AngularJs路由(三):Ui-router
- AngularJS路由之ui-router(三)
- angular router ui 路由模块(父子)层级说明
- AngularJS Router原生路由和Angular UI Router嵌套路由
- angular ui.router 路由传参数
- angular 路由,ui-router,ocLazyLoad的使用
- Angular中嵌套路由ui-router
- Angular的第三方路由:ui-router
- angular中的路由 ng-router vs ui.router
- angular中的路由 ng-router vs ui.router
- angular-ui-router (上)
- angular-ui-router (下)
- AngularJS路由之ui-router(三)大小写处理
- Angular JS路由插件ui.router源码解析
- Jquery扩展的两种方式
- Unity内存的优化
- 结构体指针
- 剑指Offer面试题54:表示数值的字符串
- java中如何读写文件
- Angular(三)路由ui-router
- 关于static的一些认识
- fast-rcnn配置运行VGG16.caffemodel和VGG_CNN_M_1024.v2.caffemodel(Ubuntu14.04)
- 软件自我成长之路——关于自动更新
- html5 语义化标签
- 提取文件路径名的扩展名
- MySQL存储引擎
- PV操作与信号量
- CvMat、Mat、IplImage之间的转换详解及实例