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

從網(wǎng)站建設(shè)到定制行業(yè)解決方案，為提供成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)服務(wù)體系，各種行業(yè)企業(yè)客戶提供網(wǎng)站建設(shè)解決方案，助力業(yè)務(wù)快速發(fā)展。成都創(chuàng)新互聯(lián)將不斷加快創(chuàng)新步伐，提供優(yōu)質(zhì)的建站服務(wù)。

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

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

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

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

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

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

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

.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 />' 意思是抽象的，如果路由定位這里其顯示內(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í)行g(shù)etResolve()方法。該方法的目的是獲取數(shù)據(jù)，達(dá)到進(jìn)該頁面前先獲取到該頁面的數(shù)據(jù)，等到該頁面的所有數(shù)據(jù)都獲取完后再跳轉(zhuǎn)到該頁面。這個resolve屬性不懂的可以百度，或者我博客中也有篇介紹的，可以看看。

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

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

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

當(dāng)前標(biāo)題：angularjs中如何使用ui-router分層
網(wǎng)站鏈接：http://www.rwnh.cn/article22/gjhjcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、響應(yīng)式網(wǎng)站、小程序開發(fā)、定制網(wǎng)站、Google、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)