（角UI路由器）展会期间解析过程加载动画 [英] (Angular-ui-router) Show loading animation during resolve process

问题描述

这是一个问题的两个部分：

1. 我使用$ stateProvider.state（）内的决心属性中加载控制器之前抢某些服务器数据。我怎么会去在这个过程中得到一个加载动画显示？




2. 我有孩子的状态还利用resolve属性。问题是，UI路由器似乎想完成的所有加载的任何的控制器之前解决。有没有什么办法可以让家长控制器来加载，一旦他们做出决议已经解决，而不必等待所有的孩子解决？这个答案可能还解决了第一个问题。

解决方案

编辑：下面是一个更简单的解决方案，测试和很好的工作：

在我的主控制器我只是有

  $范围。在$（'$ stateChangeStart'，函数（事件，toState，toParams，fromState，fromParams）{
    如果（toState.resolve）{
        $ scope.showSpinner（）;
    }
}）;
$范围。在$（'$ stateChangeSuccess'，函数（事件，toState，toParams，fromState，fromParams）{
    如果（toState.resolve）{
        $ scope.hideSpinner（）;
    }
}）;
 

这说明只要我们即将去那个有什么化解和隐藏它，当状态变更完成状态的微调。您可能要增加一些检查了国家层次（即还表明如果被加载的父状态解决一些微调），但这个解决方案工作正常，我。

下面是我的老建议，以供参考，并作为替代：

1. 在您的应用程序控制器，听 stateChangeStart 事件和检查，如果您要切换到要解决过程中表现出微调的状态（看<一个href=\"https://github.com/angular-ui/ui-router/wiki/Quick-Reference#wiki-events-1\">https://github.com/angular-ui/ui-router/wiki/Quick-Reference#wiki-events-1)

     $ rootScope。在$（'$ stateChangeStart'，函数（事件，toState，toParams，fromState，fromParams）{
       如果（toState.name =='state.with.resolve'）{
           $ scope.showSpinner（）; //这是您创建显示加载动画功能
       }
   }）
    




2. 当您在控制器终于被调用，您可以隐藏微调

     .controller（'StateWithResolveCtrl'，函数（$范围）{
       $ scope.hideSpinner（）;
   }）
    

您可能还需要检查是否有可能会解决过程中通过听 $ stateChangeError 事件和隐藏的动画，而你处理错误发生的任何错误。

这是不是完全干净的，你分配逻辑控制器之​​间的微调，但它是一个方法。希望它帮助。

This is a two part question:

1. I am using the resolve property inside $stateProvider.state() to grab certain server data before loading the controller. How would I go about getting a loading animation to show during this process?

2. I have child states that also utilise the resolve property. The problem is that ui-router seems to want to finalise all resolves before loading any controller. Is there any way I can get the parent controllers to load once their resolves have been resolved, without having to wait for all the child resolves? An answer to this will likely also solve the first problem.

解决方案

EDIT: Here is an even easier solution, tested and working nicely:

In my main controller I simply have

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    if (toState.resolve) {
        $scope.showSpinner();
    }
});
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
    if (toState.resolve) {
        $scope.hideSpinner();
    }
});

This shows the spinner whenever we are about to go to a state that has anything to resolve and hides it, when the state change is complete. You might want to add some check up the state hierarchy (i.e. also show the spinner if a parent state that is being loaded resolves something) but this solution works fine for me.

Here is my old suggestion for reference and as an alternative:

1. In your application controller, listen to the stateChangeStart event and check if you are about to switch to a state where you want to show a spinner during resolve (see https://github.com/angular-ui/ui-router/wiki/Quick-Reference#wiki-events-1)

   $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
       if (toState.name == 'state.with.resolve') {
           $scope.showSpinner();  //this is a function you created to show the loading animation
       }
   })
   

2. When you controller finally gets called, you can hide the spinner

   .controller('StateWithResolveCtrl', function($scope) {
       $scope.hideSpinner();
   })
   

You also might want to check for any errors that may have occurred during resolve by listening to the $stateChangeError event and hiding the animation while you handle the error.

This is not totally clean as you distribute the logic for the spinner between controllers, but it's a way. Hope it helps.

这篇关于（角UI路由器）展会期间解析过程加载动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！