參考原文:https://github.com/angular-ui/ui-router/wiki/URL-Routing
在你的應用中大多數狀態都有與其相關聯的 url,路由控制不是設計完成 state 之後的事後想法,而是開始開發時就應該考慮的問題。
這裏是如何設置一個基本url。
1 |
$stateProvider |
當我們訪問index.html/contacts
時, 'contacts'
狀態將被激活,同時index.html
中的ui-view
將被'contacts.html'
填充。或者,通過transitionTo('contacts')
方法將狀態轉變到'contacts'
狀態,同時
url 將更新爲index.html/contacts
。
URL參數
基本參數
通常,url動態部分被稱爲參數,有幾個選項用於指定參數。基本參數如下:
1 |
$stateProvider |
或者,你也可以使用花括號的方式來指定參數:
1 |
// 與前面的設置方法等效 |
示例:
'/hello/'
- 只匹配'/hello/'
路徑,沒有對斜槓進行特殊處理,這種模式將匹配整個路徑,而不僅僅是一個前綴。'/user/:id'
- 匹配'/user/bob'
、'/user/1234!!!'
,甚至還匹配'/user/'
,但是不匹配'/user'
和'/user/bob/details'
。第二個路徑段將被捕獲作爲參數"id"
。'/user/{id}'
- 與前面的示例相同,但使用花括號語法。
含正則表達式的參數
使用花括號的方式可以設置一個正則表達式規則的參數:
1 |
// 只會匹配 contactId 爲1到8位的數字 |
示例:
'/user/{id:[^/]*}'
- 與'/user/{id}'
相同'/user/{id:[0-9a-fA-F]{1,8}}'
- 與前面的示例相似,但只匹配1到8爲的數字和字符'/files/{path:.*}'
- 匹配任何以'/files/'
開始的URL路徑,並且捕獲剩餘路徑到參數'path'
中。'/files/*path'
- 與前面相同,捕獲所有特殊的語法。
警告:不要把捕獲圓括號寫進正則表達式,ui-router 的 UrlMatcher 將爲整個正則表達式添加捕獲。
Query Parameters
可以通過?
來指定參數作爲查詢參數
1 |
url: "/contacts?myParam" |
如果你需要不止一個查詢參數,請用&
分隔:
1 |
url: "/contacts?myParam1&myParam2" |
嵌套狀態的路由控制
附加的方式(默認)
在嵌套狀態的路由控制中,默認方式是子狀態的 url 附加到父狀態的 url 之後。
1 |
$stateProvider |
路由將成爲:
'contacts'
狀態將匹配"/contacts"
'contacts.list'
狀態將匹配"/contacts/list"
。子狀態的url是附在父狀態的url之後的。
絕對路由(^)
如果你使用絕對 url 匹配的方式,那麼你需要給你的url字符串加上特殊符號"^"
。
1 |
$stateProvider |
路由將成爲:
'contacts'
狀態將匹配"/contacts"
'contacts.list'
狀態將匹配"/list"
。子狀態的url沒有附在父狀態的url之後的,因爲使用了^
。
$stateParams 服務
之前看到的$stateParams
服務是一個對象,包含 url 中每個參數的鍵/值。$stateParams
可以爲控制器或者服務提供
url 的各個部分。
注意:$stateParams
服務必須與一個控制器相關,並且$stateParams
中的“鍵/值”也必須事先在那個控制器的url
屬性中有定義。
1 |
// 如果狀態中 url 屬性是: |
使用$stateParams
的兩個陷阱
- 只有當狀態被激活並且狀態的所有依賴項都被注入時,
$stateParams
對象才存在。這代表你不能再狀態的resolve
函數中使用$stateParams
對象,可以使用$state.current.params
來代替。
1 |
$stateProvider.state('contacts.detail', { |
- 在狀態控制器中,
$stateParams
對象只包含那些在狀態中定義的參數,因此你不能訪問在其他狀態或者祖先狀態中定義的參數。
1 |
$stateProvider.state('contacts.detail', { |
$urlRouterProvider
$urlRouterProvider
負責處理在狀態配置中指定的url路由方式之外的 url 請求的路由方式。$urlRouterProvider
負責監視$location
,當$location
改變後,$urlRouterProvider
將從一個列表,一個接一個查找匹配項,直到找到。所有
url 都編譯成一個UrlMatcher
對象。
$urlRouterProvider
有一些實用的方法,可以在module.config
中直接使用。
when()
for redirection
重定向
參數:
what
String | RegExp | UrlMatcher,你想重定向的傳入路徑handler
String | Function 將要重定向到的路徑
handler
作爲 String
如果handler
是字符串,它被視爲一個重定向,並且根據匹配語法決定重定向的地址。
1 |
app.config(function($urlRouterProvider){ |
handler
作爲 Function
如果handler
是一個函數,這個函數是注入一些服務的。如果$location
匹配成功,函數將被調用。你可以選擇性注入$match
。
函數可以返回:
- falsy 表明規則不匹配,
$urlRouter
將試圖尋找另一個匹配 - String 該字符串作爲重定向地址並且作爲參數傳遞給
$location.url()
- nothing或者任何爲真的值,告訴
$urlRouter
url 已經被處理
示例:
1 |
$urlRouterProvider.when(state.url, ['$match', '$stateParams', function ($match, $stateParams) { |
otherwise()
無效路由
參數:
path
String | Function 你想重定向url路徑或者一個函數返回url路徑。函數可以包含$injector
和$location
兩個參數。
1 |
app.config(function($urlRouterProvider){ |
rule()
自定義url處理
參數:
handler
Function 一個函數,包含$injector
和$location
兩個服務作爲參數,函數負責返回一個有效的路徑的字符串。
1 |
app.config(function($urlRouterProvider){ |
$urlMatcherFactory 和 UrlMatchers
定義了url模式和參數佔位符的語法。$urlMatcherFactory
是在幕後被$urlRouterProvider
調用,來緩存編譯後的UrlMatcher
對象,而不必在每次
location 改變後重新解析url。大多數用戶不需要直接使用$urlMatcherFactory
方法,但是在狀態配置中非常實用,可以使用$urlMatcherFactory
方法來生成一個UrlMatcher
對象,並在狀態配置中使用該對象。
1 |
var urlMatcher = $urlMatcherFactory.compile("/home/:id?param1"); |