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)

形貌:变动运用程序状况的历程称为转换。状况机从一个状况转换到另一个状况。

转换的生命周期

《ui-router进修》

注重:
1. 一次只能运转一个转换。假如上一次转换在新转换开始时仍在运转,则路由器将中断前一转换。

《ui-router进修》

2. 假如试图转换到当前状况和参数,则路由器将疏忽转换尝试。这可能发生,比方,当用户点击到当前激活状况的链接时。

《ui-router进修》

3. 假如正在运转转换,并尝试转换到雷同的目的状况和参数,则路由器会疏忽第二次尝试。这可能发生,比方,当用户点击一个链接两次,但第一个转换还没有完成。

《ui-router进修》

转换的钩子函数

每一个生命周期事宜都有一个钩子注册要领
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)

    原文作者:一棵菜菜
    原文地址: https://segmentfault.com/a/1190000013445031
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞