学习 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‘/> "[email protected]" : { } // 绝对命名 // 对应 contacts.html 中 <div ui-view=‘detail‘/> "[email protected]" : { } // 绝对命名 // 对应 contacts.html 中的未命名 ui-view <div ui-view/> "@contacts" : { } // 绝对命名 // 对应 index.html 中 <div ui-view=‘status‘/> "[email protected]" : { } // 绝对命名 // 对应 index.html 中 <div ui-view/> "@" : { } });
ui-router 实现视图与路由深层嵌套综合案例
源代码下载请点击
作者:Avenstar
出处:http://www.cnblogs.com/zjf-1992/p/6509814.html
关于作者:专注于前端开发
本文版权归作者所有,转载请标明原文链接
时间: 2024-08-22 19:33:08