如何在 ui-router 状态转换之间调出“正在进行”的加载栏？

我有一个使用 ui-router 的 AngularJS 应用程序。有时，应用程序在从一种状态转移到另一种状态时以及解析仍在进行中时会等待。

有没有人有（或他们见过）任何示例，说明如何在从一种状态解析到另一种状态期间在屏幕上呈现“正在进行的”加载栏？

您可以使用发出的事件ui-router（还有本土的routeProvider).

Plunker http://plnkr.co/edit/tbO4MpvUuEIpoWhrGlzW?p=preview

像这样的事情：

$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 https://github.com/angular-ui/ui-router/wiki#state-change-events

您可以使用resolve为您的控制器提供内容或数据 这是国家的习惯。解析是一个可选的映射 应该注入到控制器中的依赖项。

如果这些依赖项中有任何一个是承诺，它们将被解决并且 转换为值在控制器被实例化之前并且 $stateChangeSuccess 事件被触发.