La valeur de configuration du service AngularJS est détruite lors de la minification

Avoir quelques ennuis avec minification et AngularJS ;-(

J'ai trouvé ce jsfiddle "chargement" extender pour la requête HTTP, par le biais de la AngularJS page Wiki.

Il fonctionnait très bien jusqu'à ce que je l'ai édité, et la minification détruit.
Je ne peux pas trouver un moyen d'utiliser "injecter" sur la config, donc j'ai un peu perdu sur la marche à suivre.

Code Original:

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

Minifiés 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)
        })
    }
});

Qui met l'erreur suivante:
Erreur: Inconnu fournisseur de: une à partir de l'app.services

source d'informationauteur Marco Johannesen

  1. 30

    Utilisation inline annotation pour la définition des fournisseurs:

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

    Et, btw, vous devriez reconsidérer utilisant jQuery, les appels à l'intérieur de vos configs et les usines. Direct de manipulation du DOM doit être manipulé à l'intérieur de la directives.

    Pour votre cas, au lieu de $("#loader").show(); et $("#loader").show(); vous devriez diffuser un événement (par exemple,$rootScope.$broadcast('loader_show')), puis de les écouter pour cet événement dans votre personnalisé 'spinner' directive:

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

    }

  );
  2. 3

    Juste pour les autres dans la même situation... j'ai suivi @Stewie 's des conseils, et fait de ce lieu, qui n'utilise que AngularJS code, pas de bête jQuery de la dépendance 😉

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

    Directive

    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");
    });
  };
});
  3. 3

    Aussi étrange que cela puisse paraître, vous pouvez également utiliser inline annotation où vous ne le réel .push() à injecter des dépendances sur $q et $window exemple, au lieu de pusing une fonction de() en $httpProvider.responseInterceptors vous poussez un tableau:

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