首页 > 代码库 > Angular中ui-router实现路由嵌套案例
Angular中ui-router实现路由嵌套案例
学习 ui-router 资料整理
对于Angular内置的路由是单路由视图，ui-router可以实现路由嵌套。后面将会有一个案例概括前面所有资料整理
学习 ui-router - 管理状态 http://bubkoo.com/2014/01/01/angular/ui-router/guide/state-manager/
学习 ui-router - 状态嵌套和视图嵌套 http://bubkoo.com/2014/01/01/angular/ui-router/guide/nested-states%20&%20nested-views/
学习 ui-router - 多个命名的视图 http://bubkoo.com/2014/01/01/angular/ui-router/guide/multiple-named-views/
ui-router 多个命名的视图
<!-- index.html (root unnamed template) --><body ng-app><div ui-view></div> <!-- contacts.html plugs in here --><div ui-view="status"></div></body>
<!-- contacts.html --><h1>My Contacts</h1><div ui-view></div><div ui-view="detail"></div>
<!-- contacts.detail.html --><h1>Contacts Details</h1><div ui-view="info"></div>
ui-router 相对命名与绝对命名 写法
$stateProvider .state(‘contacts‘, { // 根状态，对应的父模板则是index.html // 所以 contacts.html 将被加载到 index.html 中未命名的 ui-view 中 templateUrl: ‘contacts.html‘ }) .state(‘contacts.detail‘, { views: { // 嵌套状态，对应的父模板是 contacts.html // 相对命名 // contacts.html 中 <div ui-view=‘detail‘/> 将对应下面 "detail" : { }, // 相对命名 // 对应 contacts.html 中的未命名 ui-view <div ui-view/> "" : { }, // 绝对命名 // 对应 contacts.detail.html 中 <div ui-view=‘info‘/> "info@contacts.detail" : { } // 绝对命名 // 对应 contacts.html 中 <div ui-view=‘detail‘/> "detail@contacts" : { } // 绝对命名 // 对应 contacts.html 中的未命名 ui-view <div ui-view/> "@contacts" : { } // 绝对命名 // 对应 index.html 中 <div ui-view=‘status‘/> "status@" : { } // 绝对命名 // 对应 index.html 中 <div ui-view/> "@" : { } });ui-router 实现视图与路由深层嵌套综合案例
源代码下载请点击
作者：Avenstar
出处：http://www.cnblogs.com/zjf-1992/p/6509814.html
关于作者：专注于前端开发
本文版权归作者所有,转载请标明原文链接
Angular中ui-router实现路由嵌套案例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。