(Angular-ui-router) 在解析过程中显示加载动画

问题描述

这是一个由两部分组成的问题:

This is a two part question:

1. 我在加载控制器之前使用 $stateProvider.state() 中的 resolve 属性来获取某些服务器数据.在此过程中我将如何获得加载动画显示?

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?

我有也使用 resolve 属性的子状态.问题是 ui-router 似乎想在加载任何控制器之前完成所有解析.有没有什么办法可以让父控制器在他们的解决方案得到解决后加载，而不必等待所有的子解决方案?对此的回答也可能解决第一个问题.

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.

推荐答案

这是一个更简单的解决方案，经过测试并且运行良好:

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. 在您的应用程序控制器中，侦听 stateChangeStart 事件并检查您是否即将切换到要在解析期间显示微调器的状态(请参阅 https://github.com/angular-ui/ui-router/wiki/Quick-Reference#wiki-events-1)

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
    }
})

当您最终调用控制器时，您可以隐藏微调器

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

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

您可能还想通过侦听 $stateChangeError 事件并在处理错误时隐藏动画来检查在解析过程中可能发生的任何错误.

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.

这篇关于(Angular-ui-router) 在解析过程中显示加载动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！