Как отслеживать длительный запрос async в AngularJS/ui-router

Question

Я создаю приложение с угловым выражением, используя государственную иерархию, предоставляемую библиотекой angular-ui/ui-router.

У меня есть запрос, который занимает много минут, поэтому цель - POST ресурсу запроса, а затем опросить сервер, чтобы определить, когда запрос завершен. Приложение довольно большое, и различные области сайта организованы в разные развязанные модули, но заголовок управляется общим корневым состоянием.

Для того, чтобы сообщения события завершения пользователю не нарушая их сеанс просмотра, я хотел бы:

• Добавить «загрузка» вертушку в заголовок приложения, когда запрос сделан
• Позвольте пользователю продолжить просмотр сайта, но сохраните «загрузочный» счетчик
• Замените счетчик значком «проверить», как только опрос определит, что запрос был завершен.

Как я могу инкапсулировать этот процесс и позволить ему продолжать работать через несколько состояний?

Answer 1

Я не совсем уверен, как работает 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(); 
    } 
}); 

Answer 2

Вы можете создать абстрактное состояние, на которое наследуются дочерние состояния. Добавьте службу, которая проверяет статус долгого запроса. Все дочерние штаты будут иметь доступ к абстрактному контроллеру через свойство $scope.$parent.