ui-router学习

关于state

UI-Router应用程序的行为相似于状态机。javascript

将应用程序的每一个功能视为一组状态。一次只能有一个状态为活动状态。用户能够从一种状态转换到另外一种状态,以激活应用程序的不一样功能。java

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
状态所需的实际数据(一般使用参数值从后端异步获取)app

嵌套状态

UI-Router状态是分层的;UI-Router状态能够互相嵌套,造成一棵state树。
子状态能够继承其父状态的数据和行为(例如认证),它们在父状态的UI内被渲染呈现。iview

基于state的方法

UI-Router以应用程序做为状态树的方法鼓励您将应用程序视为功能层次结构。树定义了应用程序的功能结构。URL和视图(即,DOM中组件的渲染树)是活动状态的工件。异步

url

可选的。状态的URL其实是一个URL片断。每一个状态只定义它“拥有”的URL的片断(部分)。当嵌套状态处于活动状态时,该片断将附加到浏览器URL中父状态的url。ide

视图

可选的。您可能会建立父状态,仅用于将数据或行为添加到应用程序分支。
例如,您能够建立一个名为状态admin,而后为您的应用中的每一个管理功能建立子状态。父admin状态可用于限制对整个子状态树的访问,但自己不提供任何UI。函数

嵌套视图

在激活每一个嵌套状态时,其视图将被渲染到其父的嵌套视图uiview中。post

多个命名视图

转换(transition)

描述:更改应用程序状态的过程称为转换。状态机从一个状态转换到另外一个状态。

转换的生命周期

clipboard.png

注意:
1. 一次只能运行一个转换。若是上一次转换在新转换开始时仍在运行,则路由器将停止前一转换。

clipboard.png

2. 若是试图转换到当前状态和参数,则路由器将忽略转换尝试。这可能发生,例如,当用户点击到当前激活状态的连接时。

clipboard.png

3. 若是正在运行转换,并尝试转换到相同的目标状态和参数,则路由器会忽略第二次尝试。这可能发生,例如,当用户点击一个连接两次,但第一个转换还没有完成。

clipboard.png

转换的钩子函数

每个生命周期事件都有一个钩子注册方法
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)

相关文章
相关标签/搜索