ui-router學習

sixleaves 發(fā)布于2019-08-22 14:57 / 2284人閱讀

摘要：關(guān)于應用程序的行為類似于狀態(tài)機。將應用程序的每個功能視為一組狀態(tài)。當嵌套狀態(tài)處于活動狀態(tài)時，該片段將附加到瀏覽器中父狀態(tài)的。父狀態(tài)可用于限制對整個子狀態(tài)樹的訪問，但本身不提供任何。如果方案返回，則轉(zhuǎn)換將暫停，直到解決狀態(tài)頂級狀態(tài)嵌套狀態(tài)

關(guān)于state

UI-Router應用程序的行為類似于狀態(tài)機。

將應用程序的每個功能視為一組狀態(tài)。一次只能有一個狀態(tài)為活動狀態(tài)。用戶可以從一種狀態(tài)轉(zhuǎn)換到另一種狀態(tài)，以激活應用程序的不同功能。

UI路由器狀態(tài)

UI-Router應用程序的基本構(gòu)建塊是UI-Router狀態(tài)。
UI-Router狀態(tài)通常對應于應用程序中的整個UI和導航的特征（或位置）。state一些例子可能是dashboard，messages，shoppingcart，或blogentry。

狀態(tài)是一個具有特定屬性的JavaScript對象。這些屬性定義了該狀態(tài)處于活動狀態(tài)時應用程序的功能。

狀態(tài)的屬性

name
state的名稱，提供了一種參考state的方
views
視圖，用戶界面的外觀和行為如何
url
瀏覽器的URL將會是什么
params
該state要求的參數(shù)值（如blog-post-id）
resolve
狀態(tài)所需的實際數(shù)據(jù)（通常使用參數(shù)值從后端異步獲取）

嵌套狀態(tài)

UI-Router狀態(tài)是分層的;UI-Router狀態(tài)可以互相嵌套，形成一棵state樹。
子狀態(tài)可以繼承其父狀態(tài)的數(shù)據(jù)和行為（例如認證），它們在父狀態(tài)的UI內(nèi)被渲染呈現(xiàn)。

基于state的方法

UI-Router以應用程序作為狀態(tài)樹的方法鼓勵您將應用程序視為功能層次結(jié)構(gòu)。樹定義了應用程序的功能結(jié)構(gòu)。URL和視圖（即，DOM中組件的渲染樹）是活動狀態(tài)的工件。

url

可選的。狀態(tài)的URL實際上是一個URL片段。每個狀態(tài)只定義它“擁有”的URL的片段（部分）。當嵌套狀態(tài)處于活動狀態(tài)時，該片段將附加到瀏覽器URL中父狀態(tài)的url。

視圖

可選的。您可能會創(chuàng)建父狀態(tài)，僅用于將數(shù)據(jù)或行為添加到應用程序分支。
例如，您可以創(chuàng)建一個名為狀態(tài)admin，然后為您的應用中的每個管理功能創(chuàng)建子狀態(tài)。父admin狀態(tài)可用于限制對整個子狀態(tài)樹的訪問，但本身不提供任何UI。

嵌套視圖

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

多個命名視圖 轉(zhuǎn)換（transition）

描述：更改應用程序狀態(tài)的過程稱為轉(zhuǎn)換。狀態(tài)機從一個狀態(tài)轉(zhuǎn)換到另一個狀態(tài)。

轉(zhuǎn)換的生命周期

注意：
1. 一次只能運行一個轉(zhuǎn)換。如果上一次轉(zhuǎn)換在新轉(zhuǎn)換開始時仍在運行，則路由器將中止前一轉(zhuǎn)換。

2. 如果試圖轉(zhuǎn)換到當前狀態(tài)和參數(shù)，則路由器將忽略轉(zhuǎn)換嘗試。這可能發(fā)生，例如，當用戶點擊到當前激活狀態(tài)的鏈接時。

3. 如果正在運行轉(zhuǎn)換，并嘗試轉(zhuǎn)換到相同的目標狀態(tài)和參數(shù)，則路由器會忽略第二次嘗試。這可能發(fā)生，例如，當用戶點擊一個鏈接兩次，但第一個轉(zhuǎn)換尚未完成。

轉(zhuǎn)換的鉤子函數(shù)

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

注冊狀態(tài)

$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:塊是狀態(tài)定義上的一個對象。每個鍵都是要加載的一些數(shù)據(jù)的名稱，每個值都是一個返回數(shù)據(jù)承諾的函數(shù)。UI-Router會在激活狀態(tài)state之前執(zhí)行resolve.resolve過程是異步的。如果resolve方案返回Promise，則轉(zhuǎn)換將暫停，直到Promise解決

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