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

創(chuàng)新互聯(lián)建站是一家專注于網(wǎng)站設計制作、成都網(wǎng)站建設與策劃設計,根河網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設十年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:根河等地區(qū)。根河做網(wǎng)站價格咨詢:18980820575

首先我們先定義一個總的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中必須要存在一個 作為祖模板。好了到這里就已經(jīng)把最頂層的工作內(nèi)容完成了，現(xiàn)在開始各個模塊路由分配。

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

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

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

.state('home.hr', {
        url: '/hr',
        template: '',
        controller: 'hrCtrl'
      })
      .state('home.hr.dismission', {
        url: '/dismission',
        template: '',
        controller: 'hrNextCtrl'
      })
      });

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

到現(xiàn)在已經(jīng)完成了頂層路由home到hr模塊路由再到dismission模塊路由說明。

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

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

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

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

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

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

以上是“angularjs中如何使用ui-router分層”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)網(wǎng)站建設公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

新聞名稱：angularjs中如何使用ui-router分層-創(chuàng)新互聯(lián)
標題網(wǎng)址：http://weahome.cn/article/dhpsse.html