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

Question

我有一个使用ui-router的AngularJS应用程序。有时候应用程序在从一个状态移动到另一个状态时等待，而且两个结果仍在进行中。

有没有人（或者他们看到过）在从一个州到另一个州的解决期间如何在屏幕上呈现“正在进行中”的加载栏的任何示例？

Answer 1

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

Plunker

这样的事情：

$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

  

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

     

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