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 多个命名的视图

My Contacts

Contacts Details
　

 ui-router 相对命名与绝对命名 写法

$stateProvider
  .state('contacts', {
    // 根状态，对应的父模板则是index.html
    // 所以 contacts.html 将被加载到 index.html 中未命名的 ui-view 中
    templateUrl: 'contacts.html'   
  })
  .state('contacts.detail', {
    views: {
        // 嵌套状态，对应的父模板是 contacts.html
        // 相对命名
        // contacts.html 中 
 将对应下面
        "detail" : { },   
         
        // 相对命名
        // 对应 contacts.html 中的未命名 ui-view 

        "" : { }, 
        // 绝对命名
        // 对应 contacts.detail.html 中 

        "[email protected]" : { }
        // 绝对命名
        // 对应 contacts.html 中 

        "detail@contacts" : { }
        // 绝对命名
        // 对应 contacts.html 中的未命名 ui-view 

        "@contacts" : { }
        // 绝对命名
        // 对应 index.html 中 
 
        "status@" : { }
        // 绝对命名
        // 对应 index.html 中 

        "@" : { } 
  });

   ui-router  实现视图与路由深层嵌套综合案例

源代码下载请点击

作者：Avenstar

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

关于作者：专注于前端开发

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

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

转载于:https://www.cnblogs.com/zjf-1992/p/6509814.html