route相關方法

2019-11-06 09:54:39

字體：大中小

來源：轉載

供稿：網友

route? $route -$ routePRovider服務 -依賴ngRoute模塊

route能夠在路徑發(fā)生改變的時候,渲染不同的視圖,調用不同的控制器.它監(jiān)測了location.url(),然后根據路徑來匹配相應的路由。

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

方法:

reload()在路由沒有改變的時候,再次加載當前路徑的路由,重新渲染ng-view,實例化一個控制器

事件:

$routeChangeStart在路由變化之前被觸發(fā),在這個時間點上,路由服務會resolve所有的路由變化所需要的依賴(詳見$routeProvider),以及獲取需要被渲染的視圖模板,已經解析所有加載新路由所需要的依賴.當所有的依賴都被解析以后,$routeChangeSuccess事件就會被觸發(fā)類型: broadcast目標元素: root scope(即在根作用域內綁定)$routeChangeSuccess在所有路由依賴被解析完成后觸發(fā),ng-view會根據指令實例化控制器,渲染視圖類型: broadcast目標元素: root scope$routeChangeError當解析路由依賴時,promise對象沒有正常解析,而是reject出錯的時候被觸發(fā). (詳見$q)類型: broadcast目標元素: root scope$routeUpdatereloadOnSearch屬性設置為false,再次使用相同的控制器實例這個屬性在$route.current.$route對象里類型: broadcast目標元素: root scope

方法

$location.path():路由一變化就隨之變化,獲取新的url$route.current.templateUrl:路由一變化就隨之變化,獲取新路由的模板url$route.current.params:路由一變化就隨之變化,獲取新路由的模板url的參數$route.current.scope:路由一變化,它會成為空,等到路由變化完成,再把新路由的作用域賦給它$routeParam:路由一變化,它不會變?yōu)榭?會保持上一次路由變化,等到路由變化完成,再把新路由url參數賦給它視圖:路由變化完成后進行渲染

示例：

/** * Created by Administrator on 2017/2/27. */(function (angular) { 'use strict'; /*將"use strict"放在腳本文件的第一行，則整個腳本都將以"嚴格模式"運行。 * 將"use strict"放在函數體的第一行，則整個函數以"嚴格模式"運行。 * 設立"嚴格模式"的目的，主要有以下幾個：　　- 消除javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為; 　　- 消除代碼運行的一些不安全之處，保證代碼運行的安全；　　- 提高編譯器效率，增加運行速度；　　- 為未來新版本的Javascript做好鋪墊。*/ angular.module('ngRouteExample', ['ngRoute']) .controller('MainController', function ($scope, $route, $routeParams, $location) { $scope.$route = $route; $scope.$location = $location; $scope.$routeParams = $routeParams; // $scope.$on('$routeChangeSuccess', function(evt, next, previous) { // debugger; // }); }) .controller('BookController', function ($scope, $routeParams) { $scope.name = "BookController"; $scope.params = $routeParams; }) .controller('ChapterController', function ($scope, $routeParams) { $scope.name = "ChapterController"; $scope.params = $routeParams; }) .config(function ($routeProvider, $locationProvider) { $routeProvider //使用$locationProvider.html5Mode(true); /*http://localhost:63342/untitled18/app /Book/Scarlet*/ /*http://localhost:63342/untitled18/app /Book/Gatsby*/ /*http://localhost:63342/untitled18/app /Book/Moby*/ //不使用$locationProvider.html5Mode(true); /*http://localhost:63342/untitled18/app/index7.html #/Book/Scarlet*/ /*http://localhost:63342/untitled18/app/index7.html #/Book/Gatsby*/ /*http://localhost:63342/untitled18/app/index7.html# /Book/Moby*/ .when('/Book/:bookId', { templateUrl: 'book.html', controller: 'BookController', resolve: { // 1秒延遲 delay: function ($q, $timeout) { var delay = $q.defer(); $timeout(delay.resolve, 1000); return delay.promise; } } }) //使用$locationProvider.html5Mode(true); /*http://localhost:63342/untitled18/app /Book/Gatsby/ch/4?key=value*/ /*http://localhost:63342/untitled18/app /Book/Moby/ch/1*/ //不使用$locationProvider.html5Mode(true); /*http://localhost:63342/untitled18/app/index7.html #/Book/Gatsby/ch/4?key=value*/ /*http://localhost:63342/untitled18/app/index7.html #/Book/Moby/ch/1*/ .when('/Book/:bookId/ch/:chapterId', { templateUrl: 'chapter.html', controller: 'ChapterController' }); // configure html5 to get links working on jsfiddle // $locationProvider.html5Mode(true); /**/ });})(window.angular); <a href="#Book/Moby">Moby</a> | <a href="#Book/Moby/ch/1">Moby: Ch1</a> | <a href="#Book/Gatsby">Gatsby</a> | <a href="#Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> | <a href="#Book/Scarlet">Scarlet Letter</a><br/> <div ng-view></div> <hr/> <pre>$location.path() = {{$location.path()}}</pre> <pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre> <pre>$route.current.params = {{$route.current.params}}</pre> <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre> <pre>$routeParams = {{$routeParams}}</pre>http://localhost:63342/untitled18/app/index7.html#/Book/Scarletcontroller: BookControllerBook Id: Scarlet//新的url(#后面參數)$location.path() = /Book/Scarlet//模板url$route.current.templateUrl = book.html//新路由的模板url的參數，路由一變化就隨之變化$route.current.params = {"bookId":"Scarlet"}//把新路由的作用域賦給它$route.current.scope.name = BookController//路由一變化,它不會變?yōu)榭?會保持上一次路由變化,//等到路由變化完成,再把新路由url參數賦給它$routeParams = {"bookId":"Scarlet"}

參考：

angular – $route API翻譯 - 流浪貓の窩

上一篇：RunTime

下一篇：《Head first設計模式》學習筆記 – 適配器模式