$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