AngularJS Service-Config Wert auf minification

Question

erhalten zerstört

einige Probleme mit minification und AngularJS Mit ;-(

Ich fand diese jsfiddle "Laden" extender für HTTP-Anforderung durch die AngularJS Wiki-Seite.

Es ist großartig gearbeitet ., bis ich es veröffentlicht wurde, und die Verkleinerungs zerstört es ich kann nicht einen Weg zu benutzen „injizieren“ auf der Config, so im kinda verloren finden, was zu tun

Originalcode:.

angular.module("app.services", []).config(function($httpProvider) { 
    var spinnerFunction; 
    $httpProvider.responseInterceptors.push("myHttpInterceptor"); 
    spinnerFunction = function(data, headersGetter) { 
    $("#loader").show(); 
    return data; 
    }; 
    return $httpProvider.defaults.transformRequest.push(spinnerFunction); 
}).factory("myHttpInterceptor", function($q, $window) { 
    return function(promise) { 
    return promise.then((function(response) { 
     $("#loader").hide(); 
     return response; 
    }), function(response) { 
     $("#loader").hide(); 
     return $q.reject(response); 
    }); 
    }; 
}); 

minimierte Code:

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) 
     }) 
    } 
}); 

Welche der folgenden Fehler führt: Fehler: Unbekannter Anbieter: ein von app.services

Answer 1

Verwendung inline annotation zur Definition Anbieter:

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); 
     } 
    ] 
); 

Außerdem sollten Sie die Verwendung von jQuery-Aufrufen in Ihren Konfigurationen und Fabriken überdenken. Direkte DOM-Manipulation sollte innerhalb der Direktiven behandelt werden.

Für Ihren Fall statt $("#loader").show(); und $("#loader").show(); Sie ein Ereignis übertragen sollte (zB $rootScope.$broadcast('loader_show')) und dann für dieses Ereignis in Ihrem benutzerdefinierten 'Spinner' Direktive hören:

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

Gerade für andere in der gleichen Situation ... ich folgte @Stewie ‚s Beratung und machte dies stattdessen whi ch verwendet nur AngularJS Code, keine dummen jQuery Abhängigkeit ;-)

Service:

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); 
     }); 
    }; 
    } 
]); 

Richtlinie

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

So seltsam es scheinen mag, können Sie auch inline verwenden Annotation, wo Sie die tatsächliche .push(), um Ihre Abhängigkeiten auf $q und zu injizieren, dh statt eine Funktion pusing on() in $httpProvider.responseInterceptors Sie schieben ein Array:

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); 
       }); 
     }; 
    }]); 
}]);