关于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)