AngularJS Dịch vụ giá trị Config bị phá hủy trên việc rút gọn

Question

Có một số rắc rối với việc rút gọn và AngularJS ;-(

tôi thấy jsfiddle "tải" mở rộng này cho yêu cầu HTTP, thông qua trang AngularJS Wiki.

Nó làm việc rất lớn . cho đến khi tôi xuất bản nó, và việc rút gọn phá hủy nó tôi không thể tìm thấy một cách để sử dụng "bơm" vào cấu hình, vì vậy im kinda mất về những việc cần làm

đang Original:.

đang

được rút gọn:

angular.module("app.services", []).config(function (a) { 
    var b; 
    a.responseInterceptors.push("myHttpInterceptor"); 
    b = function (d, c) { 
     $("#loader").show(); 
     return d 
    }; 
    return a.defaults.transformRequest.push(b) 
}).factory("myHttpInterceptor", function (a, b) { 
    return function (c) { 
     return c.then((function (d) { 
      $("#loader").hide(); 
      return d 
     }), function (d) { 
      $("#loader").hide(); 
      return a.reject(d) 
     }) 
    } 
}); 

nào ném được lỗi sau: Lỗi: Không rõ nhà cung cấp: một từ app.services

Answer 1

Sử dụng inline annotation cho các nhà cung cấp quy định:

angular.module("app.services", []) 
    .config(
    [ 
     '$httpProvider', 
     'myHttpInterceptor', 
     function($httpProvider, myHttpInterceptor) { 
     var spinnerFunction; 
     $httpProvider.responseInterceptors.push(myHttpInterceptor); 
     spinnerFunction = function(data, headersGetter) { 
     $("#loader").show(); 
     return data; 
     }; 
     return $httpProvider.defaults.transformRequest.push(spinnerFunction); 
     } 
    ] 
); 

Và, btw, bạn nên xem xét lại việc sử dụng các cuộc gọi jQuery bên trong các cấu hình và các nhà máy của bạn. Thao tác DOM trực tiếp nên được xử lý bên trong các chỉ thị.

Đối với trường hợp của bạn, thay vì $("#loader").show(); và $("#loader").show(); bạn nên phát sóng sự kiện (ví dụ $rootScope.$broadcast('loader_show')), và sau đó lắng nghe cho rằng sự kiện trong tùy chỉnh 'spinner' chỉ thị của bạn:

HTML:

<div spinner class="loader"></div> 

JS:

app.directive('spinner', 
    function() { 
     return function ($scope, element, attrs) { 
     $scope.$on('loader_show', function(){ 
      element.show(); 
     }); 

     $scope.$on('loader_hide', function(){ 
      element.hide(); 
     }); 
     }; 

    } 

); 

Answer 2

Chỉ dành cho những người khác trong cùng một tình huống ... Tôi theo lời khuyên của @Stewie và thực hiện việc này thay vào đó, whi ch chỉ sử dụng mã AngularJS, không phụ thuộc jQuery ngu ngốc ;-)

dịch vụ:

app.config([ 
    "$httpProvider", function($httpProvider) { 
    var spinnerFunction; 
    $httpProvider.responseInterceptors.push("myHttpInterceptor"); 
    spinnerFunction = function(data, headersGetter) { 
     return data; 
    }; 
    return $httpProvider.defaults.transformRequest.push(spinnerFunction); 
    } 
]).factory("myHttpInterceptor", [ 
    "$q", "$window", "$rootScope", function($q, $window, $rootScope) { 
    return function(promise) { 
     $rootScope.$broadcast("loader_show"); 
     return promise.then((function(response) { 
     $rootScope.$broadcast("loader_hide"); 
     return response; 
     }), function(response) { 
     $rootScope.$broadcast("loader_hide"); 
     $rootScope.network_error = true; 
     return $q.reject(response); 
     }); 
    }; 
    } 
]); 

Chỉ

app.directive("spinner", function() { 
    return function($scope, element, attrs) { 
    $scope.$on("loader_show", function() { 
     return element.removeClass("hide"); 
    }); 
    return $scope.$on("loader_hide", function() { 
     return element.addClass("hide"); 
    }); 
    }; 
}); 

Answer 3

Như lạ như nó có vẻ, bạn cũng có thể sử dụng inline chú thích nơi bạn thực hiện .push() thực tế để chèn phụ thuộc của mình vào $q và $window tức là thay vì pusing một functi trên() vào $httpProvider.responseInterceptors bạn đẩy một mảng:

app.config(["$httpProvider", function($httpProvider) { 
    $httpProvider.responseInterceptors.push(['$q', '$window', function($q, $window) { 
     return function(promise) { 
      return promise.then(function(response) { 
        $("#loader").hide(); 
        return response; 
       }, 
       function(response) { 
        $("#loader").hide(); 
        return $q.reject(response); 
       }); 
     }; 
    }]); 
}]);