angular -- $route API翻譯

標籤：style   blog   http   color   使用   strong   

$route 

-$routeProvider服務

-依賴ngRoute模組

$route能夠在路徑發生改變的時候,渲染不同的視圖,調用不同的控制器.它監測了$location.url(),然後根據路徑來匹配相應的路由,路由的定義方法詳見$routeProvider的API.

$route通常和$routeProvider服務和ngView指令一起使用

 

依賴:

$location
$routeParams

 

方法:

reload()

在路由沒有改變的時候,再次載入當前路徑的路由,重新渲染ng-view,執行個體化一個控制器

 

事件:

$routeChangeStart

在路由變化之前被觸發,在這個時間點上,路由服務會resolve所有的路由變化所需要的依賴(詳見$routeProvider),以及擷取需要被渲染的視圖模板,已經解析所有載入新路由所需要的依賴.當所有的依賴都被解析以後,$routeChangeSuccess事件就會被觸發

類型: broadcast

目標元素: root scope(即在根範圍內綁定)

 

$routeChangeSuccess

在所有路由依賴被解析完成後觸發,ng-view會根據指令執行個體化控制器,渲染視圖

類型: broadcast

目標元素: root scope

 

$routeChangeError

當解析路由依賴時,promise對象沒有正常解析,而是reject出錯的時候被觸發. (詳見$q)

類型: broadcast

目標元素: root scope

 

$routeUpdate

reloadOnSearch屬性設定為false,再次使用相同的控制器執行個體

這個屬性在$route.current.$route對象裡

類型: broadcast

目標元素: root scope

 

屬性:

(以下這段不是翻譯,勝似翻譯)

$route對象共有三個屬性:

1.current

   current對象又有以下幾個屬性:

   ①$route:

   

      $route對象包含controller屬性: 當前視圖的控制器

      $route對象包含reloadOnSearch屬性: 見上

      $route對象包含resolve屬性: 需要被解析的依賴(還沒有解析)

      $route對象包含templateUrl屬性: 視圖模板路徑

    ②locals:

   

       locals對象包含$scope屬性: 當前範圍

       locals對象包含$template屬性: 視圖模板的內容

       locals對象還包含已經解析完的依賴(在這裡就是recipe屬性) 

    ③params:

     

      當前路徑的參數對象

    ④pathParams:

       

      也是當前路徑的參數對象(區別不詳)

      

2.reload方法   

3.routes對象:

   

    routes對象包含了當前單頁應用的所有路由規則,每個路由規則所對應的視圖模板,控制器,依賴,以及reloadOnSearch屬性

 

這裡是一個$route的demo,這個demo故意延遲路由的resolve的解析時間,

通過這個demo可以看到,分析下面這幾項的變化情況:

$location.path():

路由一變化就隨之變化,擷取新的url

$route.current.templateUrl:

路由一變化就隨之變化,擷取新路由的模板url

$route.current.params:

路由一變化就隨之變化,擷取新路由的模板url的參數

$route.current.scope:

路由一變化,它會成為空白,等到路由變化完成,再把新路由的範圍賦給它

$routeParam:

路由一變化,它不會變為空白,會保持上一次路由變化,等到路由變化完成,再把新路由url參數賦給它

視圖:

路由變化完成後進行渲染

demo地址:

https://github.com/OOP-Code-Bunny/angular/tree/master/%24route