學習 ui-router - 路由控制時查找的資料,記錄下來以供後期使用

在你的應用中大多數狀態都有與其相關聯的 url,路由控制不是設計完成 state 以後的過後想法,而是開始開發時就應該考慮的問題。html

這裏是如何設置一個基本url。正則表達式


URL參數當咱們訪問index.html/contacts時, 'contacts'狀態將被激活,同時index.html中的ui-view將被'contacts.html'填充。或者,經過transitionTo('contacts')方法將狀態轉變到'contacts'狀態,同時 url 將更新爲index.html/contacts緩存

基本參數

一般,url動態部分被稱爲參數,有幾個選項用於指定參數。基本參數以下:ide

或者,你也可使用花括號的方式來指定參數:函數

示例:ui

  • '/hello/' - 只匹配'/hello/'路徑,沒有對斜槓進行特殊處理,這種模式將匹配整個路徑,而不單單是一個前綴。
  • '/user/:id' - 匹配'/user/bob''/user/1234!!!',甚至還匹配 '/user/',可是不匹配'/user''/user/bob/details'。第二個路徑段將被捕獲做爲參數"id"
  • '/user/{id}' - 與前面的示例相同,但使用花括號語法。

含正則表達式的參數

使用花括號的方式能夠設置一個正則表達式規則的參數:url

'/user/{id:[^/]*}' - 與'/user/{id}'相同示例:spa

  • '/user/{id:[0-9a-fA-F]{1,8}}' - 與前面的示例類似,但只匹配1到8爲的數字和字符
  • '/files/{path:.*}' - 匹配任何以'/files/'開始的URL路徑,而且捕獲剩餘路徑到參數'path'中。
  • '/files/*path' - 與前面相同,捕獲全部特殊的語法。

警告:不要把捕獲圓括號寫進正則表達式,ui-router 的 UrlMatcher 將爲整個正則表達式添加捕獲。設計

Query Parameters

能夠經過?來指定參數做爲查詢參數code

若是你須要不止一個查詢參數,請用&分隔:

嵌套狀態的路由控制

附加的方式(默認)

在嵌套狀態的路由控制中,默認方式是子狀態的 url 附加到父狀態的 url 以後。

'contacts'狀態將匹配"/contacts"路由將成爲:

  • 'contacts.list'狀態將匹配"/contacts/list"。子狀態的url是附在父狀態的url以後的。

絕對路由(^)

若是你使用絕對 url 匹配的方式,那麼你須要給你的url字符串加上特殊符號"^"

'contacts'狀態將匹配"/contacts"路由將成爲:

  • 'contacts.list'狀態將匹配"/list"。子狀態的url沒有附在父狀態的url以後的,由於使用了^

$stateParams 服務

以前看到的$stateParams服務是一個對象,包含 url 中每一個參數的鍵/值。$stateParams能夠爲控制器或者服務提供 url 的各個部分。
注意:$stateParams服務必須與一個控制器相關,而且$stateParams中的「鍵/值」也必須事先在那個控制器的url屬性中有定義。

 

使用$stateParams的兩個陷阱


1.只有當狀態被激活而且狀態的全部依賴項都被注入時,$stateParams對象才存在。這表明你不能再狀態的resolve函數中使用$stateParams對象,可使用$state.current.params來代替。

2.在狀態控制器中,$stateParams對象只包含那些在狀態中定義的參數,所以你不能訪問在其餘狀態或者祖先狀態中定義的參數。

$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是字符串,它被視爲一個重定向,而且根據匹配語法決定重定向的地址。

函數能夠返回:handler 做爲 Function
若是handler是一個函數,這個函數是注入一些服務的。若是$location匹配成功,函數將被調用。你能夠選擇性注入$match

  • falsy 代表規則不匹配,$urlRouter將試圖尋找另外一個匹配
  • String 該字符串做爲重定向地址而且做爲參數傳遞給$location.url()
  • nothing或者任何爲真的值,告訴$urlRouterurl 已經被處理

示例:


參數:otherwise() 無效路由

  • path String | Function 你想重定向url路徑或者一個函數返回url路徑。函數能夠包含$injector$location兩個參數。

參數:rule() 自定義url處理

  • handler Function 一個函數,包含$injector$location兩個服務做爲參數,函數負責返回一個有效的路徑的字符串。

  • 定義了url模式和參數佔位符的語法。$urlMatcherFactory是在幕後被$urlRouterProvider調用,來緩存編譯後的UrlMatcher對象,而沒必要在每次 location 改變後從新解析url。大多數用戶不須要直接使用$urlMatcherFactory方法,可是在狀態配置中很是實用,可使用$urlMatcherFactory方法來生成一個UrlMatcher對象,並在狀態配置中使用該對象。$urlMatcherFactory 和 UrlMatchers
相關文章
相關標籤/搜索