ui-router學習

關於state

UI-Router應用程序的行爲相似於狀態機。

將應用程序的每一個功能視爲一組狀態。一次只能有一個狀態爲活動狀態。用戶能夠從一種狀態轉換到另外一種狀態，以激活應用程序的不一樣功能。

UI路由器狀態

UI-Router應用程序的基本構建塊是UI-Router狀態。
UI-Router狀態一般對應於應用程序中的整個UI和導航的特徵（或位置）。state一些例子多是dashboard，messages，shoppingcart，或blogentry。

狀態是一個具備特定屬性的JavaScript對象。這些屬性定義了該狀態處於活動狀態時應用程序的功能。

狀態的屬性

name
state的名稱，提供了一種參考state的方
views
視圖，用戶界面的外觀和行爲如何
url
瀏覽器的URL將會是什麼
params
該state要求的參數值（如blog-post-id）
resolve
狀態所需的實際數據（一般使用參數值從後端異步獲取）

嵌套狀態

UI-Router狀態是分層的;UI-Router狀態能夠互相嵌套，造成一棵state樹。
子狀態能夠繼承其父狀態的數據和行爲（例如認證），它們在父狀態的UI內被渲染呈現。

基於state的方法

UI-Router以應用程序做爲狀態樹的方法鼓勵您將應用程序視爲功能層次結構。樹定義了應用程序的功能結構。URL和視圖（即，DOM中組件的渲染樹）是活動狀態的工件。

url

可選的。狀態的URL其實是一個URL片斷。每一個狀態只定義它「擁有」的URL的片斷（部分）。當嵌套狀態處於活動狀態時，該片斷將附加到瀏覽器URL中父狀態的url。

視圖

可選的。您可能會建立父狀態，僅用於將數據或行爲添加到應用程序分支。
例如，您能夠建立一個名爲狀態admin，而後爲您的應用中的每一個管理功能建立子狀態。父admin狀態可用於限制對整個子狀態樹的訪問，但自己不提供任何UI。

嵌套視圖

在激活每一個嵌套狀態時，其視圖將被渲染到其父的嵌套視圖uiview中。

多個命名視圖

轉換（transition）

描述：更改應用程序狀態的過程稱爲轉換。狀態機從一個狀態轉換到另外一個狀態。

轉換的生命週期

注意：
1. 一次只能運行一個轉換。若是上一次轉換在新轉換開始時仍在運行，則路由器將停止前一轉換。

2. 若是試圖轉換到當前狀態和參數，則路由器將忽略轉換嘗試。這可能發生，例如，當用戶點擊到當前激活狀態的連接時。

3. 若是正在運行轉換，並嘗試轉換到相同的目標狀態和參數，則路由器會忽略第二次嘗試。這可能發生，例如，當用戶點擊一個連接兩次，但第一個轉換還沒有完成。

轉換的鉤子函數

每個生命週期事件都有一個鉤子註冊方法
There is a hook registration method for each lifecycle event:
onBefore, onStart, onExit, onRetain, onEnter, onFinish, onSuccess, and onError

註冊狀態

$stateProvider：Because $stateProvider is an Angular Provider, you must inject it into a .config() block using AngularJS Dependency Injection.

myapp.config(function ($stateProvider) {
    $stateProvider.state({
        name: 'hello',
        url: '/hello',
        component: 'hello'
    })
});

resolve

resolve:塊是狀態定義上的一個對象。每一個鍵都是要加載的一些數據的名稱，每一個值都是一個返回數據承諾的函數。UI-Router會在激活狀態state以前執行resolve.resolve過程是異步的。若是resolve方案返回Promise，則轉換將暫停，直到Promise解決

state狀態：頂級狀態(hello、about、people、person、people2)/嵌套狀態（people2.person）