angularjs中如何使用ui-router分層

小編給大家分享一下angularjs中如何使用ui-router分層，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

首先我們先定義一個總的state如：

.state('home', {
      url: '/home?backKey',
//     abstract: true,
      templateUrl:'home/home.html',
      controller:'homeCtrl'
    })

在homeCtrl中可以為空，看需求吧。因為這個是最頂層的state所以在angular.module中一定要把下一層的路由angular.module依賴進來。如果有多個模塊那就分別依賴進來，用逗號隔開，這里就依賴一個模塊來說明下。如var m = angular.module("ms.homeRouter", ['ms.hrRouter']);

而在home.html中必須要存在一個<ui-view/> 作為祖模板。好了到這里就已經把最頂層的工作內容完成了，現在開始各個模塊路由分配。

上面已經說到一個ms.hrRouter的模塊依賴進來，現在就已這個為例來說明下配置：在這個模塊中新建個js文件，定義一個angular.module，名字就是ms.hrRouter。

var m = angular.module("ms.hrRouter", [
  'ms.hrDismissionRouter']);

這個就是hr的模塊，在這模塊中又有該模塊的子模塊。angular.module名依賴進來，在這模塊的路由中先配置下總路由，然后再在該路由下分下一層模塊(或者子頁面)路由。

.state('home.hr', {
        url: '/hr',
        template: '<ui-view />',
        controller: 'hrCtrl'
      })
      .state('home.hr.dismission', {
        url: '/dismission',
        template: '<ui-view />',
        controller: 'hrNextCtrl'
      })
      });

說明下上面的代碼：state名為home.hr說明這個是在hr模塊中的頂層路由。其template為'<ui-view />' 意思是抽象的，如果路由定位這里其顯示內容其實是在home層頁面中的ui-view中，這里的hrCtrl內容也可以為空，看需求，但必須要定義出這個控制器否則會報錯（上面home的也是一樣）。接著來解釋下下面state名為home.hr.dismission路由：從名字就可以看出來這個路由就是hr模塊的下一層模塊，名為dismission。而url對象也是這模塊的名字，以便在瀏覽器地址中可以直接看出是在哪模塊哪層哪里。template、controller兩個屬性跟上面解釋是一樣的。

到現在已經完成了頂層路由home到hr模塊路由再到dismission模塊路由說明。

now到dismission模塊中的詳情頁面的路由配置：在dismission模塊中也新建一個路由js文件。這個模塊的angular.module配置為var m = angular.module("ms.hrDismissionRouter", []);

因為這個是最底層的路由了已經再也沒有子路由依賴了，所以后面的[]中是空的。在這頁面中的state配置如：

.state('home.hr.dismission.commonApproval', {
      url: '/commonApproval?taskId&openid&doType',
      templateUrl: 'hr/dismissionAppl/dismissionAppl.html',
      resolve: {
        dismRsl: getResolve()
      },
      controller: 'dismissionApplCtrl'
    })
]);

從state名字也可以看出，這個是在dismission模塊的子層。url也是這個頁面的路由名，以及這個頁面需要帶的參數。這里的resolve的作用是在頁面加載前先執行getResolve()方法。該方法的目的是獲取數據，達到進該頁面前先獲取到該頁面的數據，等到該頁面的所有數據都獲取完后再跳轉到該頁面。這個resolve屬性不懂的可以百度，或者我博客中也有篇介紹的，可以看看。

好了！可能說得不是太明白但總體思路就是這樣。

Note: 最好是在每層模塊中都新建兩個js文件，一個是router.js一個是controller.js這樣好管理。 這是模塊分層對應的文件分層。

以上是“angularjs中如何使用ui-router分層”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！