각도 서비스의 표시기를 로딩하는 방법

Question

나는 ajax 요청이 여전히 실행 중임을 사용자에게 보여줄 뭔가를 만들어야한다.

var myServices = angular.module('myServices', ['ngResource']); 
myServices.factory('MyInfo', ['$resource',function($resource){ 
    return $resource('/api/:method', {}, { 
     getSettings: {method:'POST', params:{method:'get_my_settings'}}, 
     getInfo: {method:'POST',params:{method:'get_my_info'}} 
    }); 
}]); 

그리고 내 컨트롤러 :

var myModule = angular.module('myModule', [ 
    'ngRoute', 
    'ngCookies', 
    'localization', 
    'myControllers', 
    'myServices' 
]); 

내 서비스는 다음과 같습니다

나는 각도 모듈이

var myControllers = angular.module('myControllers', []); 
myControllers.controller('someCtrl', ['$scope', 'MyInfo', 
    function($scope, MyInfo) { 
     $scope.myInfo = MyInfo.getInfo(); 
    } 
]); 

모든 것이 잘 작동! 하지만 요청을 보내기 전에 몇 가지 작업을 수행하고 요청이 완료되고 응답을 받았을 때이 작업을 완료하려면 어떻게해야합니까?

jquery의 ajax에는 보내기 전에 수행 할 작업과 요청이 완료 될 때 정의 할 수있는 "beforeSend"및 "complete"매개 변수가 있습니다.

각도로 표시하는 방법은 무엇입니까?

Answer 1

각도

덕분에 당신이 pendingRequests 속성을 가지고있는 $http 모듈에 대한 액세스를 제공합니다.

예를 들어, 참조 : https://github.com/angular-app/angular-app/blob/master/client/src/common/services/httpRequestTracker.js

을 그들은 서비스를 만들 :

이

angular.module('services.httpRequestTracker', []) 

.factory('httpRequestTracker', ['$http', 
    function($http) { 

     var httpRequestTracker = {}; 
     httpRequestTracker.hasPendingRequests = function() { 
      return $http.pendingRequests.length > 0; 
     }; 

     return httpRequestTracker; 
    } 
]) 

그런 다음 당신은 지금 아약스 로더 (또는 어떤 다른 사람)이 서비스가 출원을 반환 보여주기위한 지침을 만들 수 있습니다 요청 :

angular.module('directives.ajaxLoader', [ 
    'services.httpRequestTracker' 
]) 

.directive('ajaxLoader', ['httpRequestTracker', 
    function(httpRequestTracker) { 
     return { 
      templateUrl: 'common/ajaxLoader.tpl.html', 
      restrict: 'EA', 
      replace: true, 
      scope: true, 
      link: function($scope) { // This function can have more parameters after $scope, $element, $attrs, $controller 
       $scope.hasPendingRequests = function() { 
        return httpRequestTracker.hasPendingRequests(); 
       }; 
      } 
     }; 
    } 
]) 

ajaxLoader.tpl.html :

<div class="fade" ng-class="{in: hasPendingRequests(), out: !hasPendingRequests()}"> 
    LOADING ... 
</div> 

희망이 도움이되었습니다.