如何在 ui-路由器状态转换之间调出 "in progress" 加载栏？

Question

我有一个使用 ui-路由器的 AngularJS 应用程序。有时应用程序在从一种状态移动到另一种状态时等待，而解析仍在进行中。

有没有人有（或他们见过）我如何在从一种状态到另一种状态的解析期间在屏幕上显示 "in-progress" 加载栏的任何示例？

Answer 1

您可以使用 ui-router（以及本机 routeProvider）发出的事件。

像这样：

$rootScope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){ 
    $rootScope.stateIsLoading = true;
})

$rootScope.$on('$stateChangeSuccess', 
function(event, toState, toParams, fromState, fromParams){
    $rootScope.stateIsLoading = false;
})

然后在HTML:

<section ui-view ng-hide="stateIsLoading"></section>
<div class="loader" ng-show="stateIsLoading"></div>

docs

You can use resolve to provide your controller with content or data that is custom to the state. resolve is an optional map of dependencies which should be injected into the controller.

If any of these dependencies are promises, they will be resolved and converted to a value before the controller is instantiated and the $stateChangeSuccess event is fired.

如何在 ui-路由器状态转换之间调出 "in progress" 加载栏？

How can I bring up an "in progress" loading bar in between ui-router state transitions?

angularjs

angular-ui-router