javascript - 如何预加载 Angular 路由并仅在成功加载路由时切换？

Question

我目前正在使用 BlurAdmin 为我的工作场所开发一个管理仪表板模板。虽然此模板包含许多出色的特性和功能，但我发现此仪表板并未针对我的用例进行优化。我正在开发的仪表板完全基于我的一位同事单独构建的 RESTful API。每个页面都使用 AJAX 通过此 API 加载其数据，并且发现大多数情况下，页面会在 API 完成之前显示。这意味着在调用完成时，事情只是偶尔出现。为了获得更流畅的 UI 体验，我已经开始研究解决方案。

当前解决方案
在加载路由时，rootScope 变量 $isLoading 设置为 true，它显示在页面上拉伸(stretch)的加载叠加层。为了确定是否完成，我观察了 $http.pendingRequests.length 直到它等于 0，这告诉我页面已成功加载(仅基于 http 调用)。

所需的解决方案
在加载路由时，我希望页面不要更改，而是使用顶部栏加载程序，并且只有在加载页面时，路由才会更改。

路由目前由 BlurAdmin 使用 ui-router 完成模块和 View 始终由 ui-view 指令立即显示。

然后我的问题是:如何在构建时将 Angular 路径预加载到隐藏 View 中，并且只有在我检测到所有 API 调用都已在此新路径上完成后，隐藏 View 才应该切换到可见 View 并且删除旧的可见 View ？

Answer 1

您可以使用 resolve 来做到这一点在你的国家声明上。基本思想是从相关状态声明的解析函数调用 API。如果您从这些函数返回 promise ，则在 promise 全部解决之前不会进入状态。然后这些值将绑定(bind)到您的组件中。

要在状态转换时显示微调器/加载栏，您可以注册一个 Transition Hook对于 2 个事件:onStart 和 onFinish。在您的 onStart Hook 中，为服务设置一些状态。假设 isTransitioning = true;。在您的 onFinish Hook 中，将其设置为 false。然后，您的微调器组件可以观察此状态并在适当的时候显示自己。