Question

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

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

为了在不打扰浏览会话的情况下向用户发送完成事件，我想：

在发出请求时，将“加载”微调器添加到应用程序的标题
允许用户继续浏览网站，但保留“加载”微调器
轮询确定请求已完成后，用“检查”图标替换微调器。

如何封装此过程并允许它继续运行多个状态转换？

Answer 1

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

Answer 2

我不完全确定ui-router是如何工作的，但是如果它类似于$ 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();
  }
});

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

2 个答案: