最近感覺(jué)有很多學(xué)angular 的童鞋在路由問(wèn)題中還不清楚怎么使用。其實(shí)我之前也是一直暈暈的不懂怎么用，現(xiàn)在要好得多了。在這里就記錄下ui-router使用。

就已目前做的這個(gè)項(xiàng)目來(lái)介紹下怎么使用吧。Note:最好是按照層次規(guī)則來(lái)設(shè)置路由名，好處是容易看懂，也便于管理。

我這里是以總state到模塊state再到下一層模塊state（再到下一層模塊state）最后到詳細(xì)頁(yè)面的state來(lái)分層。

首先我們先定義一個(gè)總的state如：

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

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

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

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

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

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

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

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

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

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

因?yàn)檫@個(gè)是最底層的路由了已經(jīng)再也沒(méi)有子路由依賴了，所以后面的[]中是空的。在這頁(yè)面中的state配置如：

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

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論