如何在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屬性訪問抽象控制器。