angularjs Obsługa Wartość Config ulec zniszczeniu na minifikacji

Question

pewne kłopoty z minifikacji i angularjs ;-(

Znalazłem jsfiddle „Ładowanie” przedłużacz do żądania HTTP, za pośrednictwem strony angularjs Wiki.

To było wspaniałe ., aż opublikował je, a minifikacji niszczy go nie mogę znaleźć sposób na wykorzystanie „wstrzyknąć” w konfiguracji, więc im trochę zagubiony, co robić

kod oryginalny:.

Kod

minified:

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

Co rzuca się następujący błąd: Błąd: Nieznany dostawca: a od app.services

Answer 1

użytkowania inline annotation dla dostawców określających:

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

I, przy okazji, powinieneś ponownie rozważyć użycie wywołań jQuery w swoich konfiguracjach i fabrykach. Bezpośrednia manipulacja DOM powinna być obsługiwana wewnątrz dyrektyw.

Twoim przypadku, zamiast $("#loader").show(); i $("#loader").show(); należy nadawać zdarzenie (np $rootScope.$broadcast('loader_show')), a następnie słuchać tego zdarzenia w niestandardowym 'spinner' dyrektywy:

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

Dla innych w tej samej sytuacji ... Postępowałem zgodnie z radą @Stewiego, i zrobiłem to zamiast tego, ch używa tylko kod angularjs, żadnego głupiego zależność jQuery ;-)

Usługa:

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

dyrektywa

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

Jak dziwne, jak mogłoby się wydawać, można również użyć inline adnotacja, w której należy wykonać rzeczywiste .push(), aby wstrzyknąć zależności na $q i $window, tj. zamiast pause functi na() do $httpProvider.responseInterceptors naciskasz tablicę:

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