[TOC] # 路由控制 在你的應用中大多數狀態都有與其相關聯的 url，路由控制不是設計完成 state 之后的事后想法，而是開始開發時就應該考慮的問題。 ## 設置一個基本url。使用url屬性 ~~~ $stateProvider.state('home', { //配置路由使用屬性url url:'/home', templateUrl: basePathProvider.getPath('homeTpl.html'), }); ~~~ # URL參數 ## 基本參數 url動態部分被稱為參數，有幾個選項用于指定參數。 * 冒號語法 ~~~ //設置一個參數 //匹配home/12 //匹配home/sss url: "/home/:id" //設置多個參數 url: "/home/:id/:name" ~~~ * 花括號語法 ~~~ //設置一個參數 //匹配home/12 //匹配home/sss url: "/home/{id}" //設置多個參數 url: "/home/{id}/{name}" ~~~ * 帶正則表達式語法 ~~~ //設置一個參數 // 只會匹配 id 為1到8位的數字 //匹配home/4 //不匹配home/111 //不匹配home/sss url: "/home/{id:[0-9]{1,8}}" ~~~ * 可以使用以前的?號方法設置參數 ~~~ //單個參數 //匹配 "/contacts?myParam=value" url: "/contacts?myParam" //多個參數 //匹配 "/contacts?myParam1=value1&myParam2=wowcool" url: "/contacts?myParam1&myParam2" ~~~ # 嵌套狀態的路由控制 ## 附加的方式（默認） 嵌套狀態的路由控制中，默認方式是子狀態的 url 附加到父狀態的 url 之后。 ~~~ $stateProvider .state('contacts', { url: '/contacts', ... }) .state('contacts.list', { url: '/list', ... }); ~~~ 路由將成為： ~~~ 'contacts'狀態將匹配"/contacts" 'contacts.list'狀態將匹配"/contacts/list"。子狀態的url是附在父狀態的url之后的。 ~~~ ## 絕對路由（^） 如果你使用絕對 url 匹配的方式，那么你需要給你的url字符串加上特殊符號"^"。 ~~~ $stateProvider .state('contacts', { url: '/contacts', ... }) .state('contacts.list', { url: '^/list', }); ~~~ 路由將成為： ~~~ 'contacts'狀態將匹配"/contacts" 'contacts.list'狀態將匹配"/list"。子狀態的url沒有附在父狀態的url之后的，因為使用了^。 ~~~ # 捕獲參數 ## $stateParams 服務 * $stateParams服務是一個對象，包含 url 中每個參數的鍵/值。$stateParams可以為控制器或者服務提供 url 的各個部分。 * $stateParams服務必須與一個控制器相關，并且$stateParams中的“鍵/值”也必須事先在那個控制器的url屬性中有定義。 * $stateParams服務不能在resolve中使用，但是可以使用$state.current.params來代替。 * 在狀態控制器中，$stateParams對象只包含那些在狀態中定義的參數，因此你不能訪問在其他狀態或者祖先狀態中定義的參數。 ~~~ // 如果狀態中 url 屬性是： url: '/users/:id/details/{type}/{repeat:[0-9]+}?from&to' // 當瀏覽 '/users/123/details//0' // $stateParams 對象將是 { id:'123', type:'', repeat:'0' } // 當瀏覽 '/users/123/details/default/0?from=there&to=here' // $stateParams 對象將是 { id:'123', type:'default', repeat:'0', from:'there', to:'here' } ~~~ 【控制器中使用$stateParams】 ~~~ angular.module('myapp').controller('homeTplCtrl', function ($scope,$stateParams) { console.log($stateParams.id); $scope.$on('$viewContentLoaded', function (event, viewName) { }); }); ~~~ 【resolve中使用$stateParams，注意使用$state.current.params來代替】 ~~~ resolve: { someResolve: function($state){ //*** 不能在這里使用 $stateParams , the service is not ready ***// //*** 使用 $state.current.params 來代替 ***// return $state.current.params.contactId + "!" }; }, ~~~ ## $urlRouterProvider服務 * $urlRouterProvider負責處理在狀態配置中指定的url路由方式之外的 url 請求的路由方式。 * $urlRouterProvider負責監視$location，當$location改變后，$urlRouterProvider將從一個列表，一個接一個查找匹配項，直到找到。所有 url 都編譯成一個UrlMatcher對象。 * $urlRouterProvider有一些實用的方法，可以在module.config中直接使用。 ### $urlRouterProvider服務的一些方法 * when() 重定向方法 * 參數： * what String | RegExp | UrlMatcher，你想重定向的傳入路徑 * handler String | Function 將要重定向到的路徑 * handler 作為 String 如果handler是字符串，它被視為一個重定向，并且根據匹配語法決定重定向的地址。 ~~~ app.config(function($urlRouterProvider){ // 如果是一個空路由則直接重定向到index頁面 $urlRouterProvider.when('', '/index'); //如果是一個指定的路由也可以重定向到index頁面 $urlRouterProvider.when('/aspx/i', '/index'); }) ~~~ * handler 作為 Function 如果handler是一個函數，如果$location匹配成功，函數將被調用。你可以選擇性注入$match。 函數可以返回： * falsy 表明規則不匹配，$urlRouter將試圖尋找另一個匹配 * String 該字符串作為重定向地址并且作為參數傳遞給$location.url() * nothing或者任何為真的值，告訴$urlRouterurl 已經被處理 * otherwise() 無效路由 * 參數： path String | Function 你想重定向url路徑或者一個函數返回url路徑。函數可以包含$injector和$location兩個參數。 ## $urlMatcherFactory 和 UrlMatchers 定義了url模式和參數占位符的語法。$urlMatcherFactory是在幕后被$urlRouterProvider調用，來緩存編譯后的UrlMatcher對象，而不必在每次 location 改變后重新解析url。大多數用戶不需要直接使用$urlMatcherFactory方法，但是在狀態配置中非常實用，可以使用$urlMatcherFactory方法來生成一個UrlMatcher對象，并在狀態配置中使用該對象。 ~~~ var urlMatcher = $urlMatcherFactory.compile("/home/:id?param1"); $stateProvider.state('myState', { url: urlMatcher }); ~~~