如何预先加载角度路线并仅在成功加载路线后进行切换？

Question

我目前正在使用BlurAdmin模板为自己的工作地点开发一个管理仪表板。尽管此模板包含许多出色的功能，但我发现该仪表板并未针对我的用例进行优化。我正在开发的仪表板完全基于我的一位同事单独构建的RESTful API。每个页面都使用AJAX通过此API加载其数据，并且发现大多数情况下，该页面会在API完成之前显示。这意味着，呼叫完成后会偶尔出现。为了使UI体验更加流畅，我已经开始为此寻求解决方案。

当前解决方案
加载路线时，rootScope变量$isLoading设置为true，它显示了覆盖在页面上的加载叠加层。为了确定完成情况，我观察$http.pendingRequests.length直到它等于0，这告诉我该页面已成功加载（仅基于http调用）。

所需的解决方案
在加载路由时，我希望页面不发生变化，而是使用顶部加载程序，并且仅当页面加载时，路由才应更改。

当前，路由是由BlurAdmin使用ui-router模块完成的，并且视图总是由ui-view指令立即显示。

然后我的问题是：如何在构建角度路线时将其预先加载到隐藏视图中，并且只有在我检测到在此新路线上完成所有API调用后，隐藏视图才应切换到可见视图，并且旧的可见视图会被删除？

Answer 1

您可以通过在状态声明中使用resolve来实现。基本思路是从相关状态声明的resolve函数中调用您的API。如果您从这些函数返回了承诺，则在所有承诺均得到解决之前，不会进入状态。然后将这些值绑定到您的组件中。

要在状态转换时显示微调器/加载条，您可以为两个事件注册Transition Hook：onStart和onFinish。在您的onStart挂钩中，在服务上设置了一些状态。假设isTransitioning = true;。在您的onFinish挂钩中，将其设置为false。然后，您的微调器组件可以监视此状态并在适当时显示自己。