摘要:关于应用程序的行为类似于状态机。将应用程序的每个功能视为一组状态。当嵌套状态处于活动状态时,该片段将附加到浏览器中父状态的。父状态可用于限制对整个子状态树的访问,但本身不提供任何。如果方案返回,则转换将暂停,直到解决状态顶级状态嵌套状态
关于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内被渲染呈现。
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)
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/93028.html
摘要:回调说白了,就是把函数当参数传给另一根函数,在另一个函数执行时调用此函数例如,在下面这段代码中,上面定义了两个函数和,下面的方法请求成功执行,失败执行异步异步的原理我看了网上的一些博客和例子,大都以定时任务为例子说明,但具体的原理我还是不太 回调 说白了,就是把函数当参数传给另一根函数,在另一个函数执行时调用此函数例如,在下面这段代码中,上面定义了两个函数success和error,下...
摘要:回调说白了,就是把函数当参数传给另一根函数,在另一个函数执行时调用此函数例如,在下面这段代码中,上面定义了两个函数和,下面的方法请求成功执行,失败执行异步异步的原理我看了网上的一些博客和例子,大都以定时任务为例子说明,但具体的原理我还是不太 回调 说白了,就是把函数当参数传给另一根函数,在另一个函数执行时调用此函数例如,在下面这段代码中,上面定义了两个函数success和error,下...
摘要:被认为是为开发者提供的最实用的一个模块。与集成的服务不同的是,可以将视图嵌套,因为它基于的是操作状态而仅非。与传统做法使用不同的是,在里需要使用服务。当在中处理路由和状态时,开发者的重心是当前的状态是什么以及在哪一个页面里。 初学angularjs,第一个实例是官网的phoneCat,里面路由用的是ngRoute,后来看到别的用ui-router,觉得好奇,ui-route是什么呢?百...
摘要:异步加载各个组件就很有必要。在这里我就以为框架来进行异步加载说明。而为了将服务进行异步加载我们不能用普通的或者。而需要调用或者如果采用进行编译打包的话就需要的支持,这样可以对进行拆分打包,达到异步加载的目的。 ui-route相比于angularjs的原生视图路由更好地支持了路由嵌套,状态转移等等。随着视图不断增加,打包的js体积也会越来越大,比如我在应用里面用到了wangeditor...
阅读 2653·2021-11-23 09:51
阅读 3246·2021-11-22 14:44
阅读 4575·2021-11-22 09:34
阅读 5099·2021-10-08 10:14
阅读 2402·2021-09-22 15:47
阅读 3501·2021-09-22 15:40
阅读 1510·2019-08-30 15:44
阅读 1619·2019-08-28 18:23