AngularJSAngular中ui-router实现路由于嵌套案例

   学习 ui-router 资料整理

 对于Angular内置的路由是单路由视图,ui-router可以实现路由于嵌套。后面将会晤来一个案例概括前面有素材整理AngularJS 1

修 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
 实现视图与程由于深层嵌套综合案例

AngularJS 2

源代码下载请点击

作者:Avenstar

出处:http://www.cnblogs.com/zjf-1992/p/6509814.html

有关作者:专注于前端开发

本文版权归作者所有,转载请标明原文链接

引进学习AngularJS Routing Using UI-Router  https://scotch.io/tutorials/angular-routing-using-ui-router

相关文章