ui-router的探究-創(chuàng)新互聯(lián)

首先是示例：

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

這是我自己寫的一個路由demo，這里我們可以看到，頁面由一個導航條，以及內(nèi)容頁組成，導航條上有三個按鈕，分別對應了三個頁面，而頁面會在內(nèi)容頁進行更新，并不會重新請求新頁面。

而我們看到的home頁上的三行文字，并不是在同一個頁面上，實際上是由額外的3個頁面組織起來的。

ui-sref-active指令檢測當前的激活狀態(tài)，如果你的頁面激活的是這個路由，則該標簽會激活active樣式，ui-sref定義了當前按鈕指向的路由，具體地址的組成可以看圖。

 

這里定義了具體的路由策略。

如果路由到/home，則目標的模板地址為./bt.html（你存放靜態(tài)頁面的路徑），以此類推

home.bt2則定義了該路由的子路由，以此類推。

最后一行代碼定義了非定制的路由策略請求時會重定向到/home/bt2/bt3，注意這里書寫的參數(shù)格式！?。?/p>

這樣，當我們訪問這個頁面時，會通過重定向引導到/home/bt2/bt3的URL上，所以在該過程中所有的相關html都會被加載，我們從網(wǎng)絡請求就可以看出，路由是根據(jù)頁面的請求順序依次向服務器請求頁面的。

最近在工作里發(fā)現(xiàn)項目里的路由定義里有這么一句：

targetHeader: {org: true, space: false},

后來本人也寫了個demo嘗試了一下，弄懂了這句話的用途以及在項目里的功能。

首先，本人在路由定義里也加了這幾句話，并且在對應頁面的控制器里加了作用域的賦值表達式。

查詢了ui-router的文檔，在路由中由用戶自行定義的屬性可以在$state的current屬性中獲取到，我們將它賦值給$scope對象對應的屬性。

然后就可以在頁面中顯示它。

頁面代碼：

我是bt,我接收到了targetHeader.org:`targetHeader`.`org`,和targetHeader.space:`targetHeader`.`space`

$rootScope.$broadcast('$stateChangeSuccess', to.self, toParams, from.self, fromParams);

$rootScope.$on("$stateChangeSuccess", function() {
    $scope.targetHeader = $state.current.targetHeader;
});