如何在AngularJS/ui-router中跟踪长时间运行的异步请求

Question

我正在使用由angular-ui/ui-router库提供的状态层次结构构建一个Angular应用程序。

我有一个需要很多分钟才能完成的请求，因此我们的目标是POST请求资源，然后轮询服务器以确定请求何时完成。该应用程序非常大，并且该网站的不同区域被组织成不同的分离模块，但标题由共同的根状态管理。

为了消息完成事件，而不会干扰他们的浏览会话的用户，我想：

• 添加“加载”微调器应用程序的头球时请求时
• 允许用户继续浏览网站，但保留“加载”微调器
• 轮询确定请求已完成后，用“检查”图标代替微调器。

我怎样才能封装这一进程，并允许其继续通过多种状态转换运行？

Answer 1

我不完全确定ui路由器是如何工作的，但是如果它是$ routeProvider（或者您也使用$ routeProvider），那么您可以将控制器分配给“应用程序的标题”并让该控制器完成这项工作。

下面是它将如何工作的基本示例。 _handleLoad模拟轮询服务器，当完成时，您可以轻松地更改标头（或使用$ broadcast的网站其他部分）。使用$ routeProvider让用户在页面上继续执行HeaderCtrl的同时浏览网站。

http://plnkr.co/edit/EYqcjhX8kI1GmkYs5VZe?p=preview

app.controller('HeaderCtrl', function ($scope, $timeout) { 
    var _i = 0, 
     _handleLoad = function() { 
     console.log('checking..'); 
     // TODO check the server here, fire the $timeout in the callback if the process isn't complete 
     if (_i == 3) { 
      $scope.loading = false; 
      _i = 0; 
      $scope.headerText = 'we have loaded something'; 
      console.log('all done'); 
      return; 
     } 
     _i += 1; 

     $timeout(_handleLoad, 1000); 
     }; 

    $scope.headerText = 'click here to load something'; 
    $scope.loading = false; 

    $scope.load = function() { 
    $scope.loading = true; 
    _handleLoad(); 
    } 
}); 

Answer 2

您可以创建子状态将从其继承的抽象状态。添加一个服务，用于轮询长时间运行的请求的状态。所有儿童州将通过$scope.$parent属性访问抽象控制器。