AngularJS服务配置值在缩小时被破坏答案

【问题标题】：AngularJS Service Config value get destroyed on minificationAngularJS服务配置值在缩小时被破坏
【发布时间】：2013-03-11 14:50:48
【问题描述】：

在缩小和 AngularJS 方面遇到一些问题；-(

我通过 AngularJS Wiki 页面找到了这个用于 HTTP 请求的 jsfiddle“加载”扩展程序。

在我发布它之前它运行良好，并且缩小会破坏它。我找不到在配置中使用“inject”的方法，所以我有点不知道该怎么做。

原码：

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

缩小代码：

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

这会引发以下错误： 错误：未知提供者：来自 app.services

【问题讨论】：

标签： angularjs minify

【解决方案1】：

使用inline annotation 定义提供者：

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

而且，顺便说一句，您应该重新考虑在您的配置和工厂中使用 jQuery 调用。直接 DOM 操作应在指令内处理。

对于您的情况，您应该广播一个事件（例如 $rootScope.$broadcast('loader_show')），而不是 $("#loader").show(); 和 $("#loader").show();，然后在您的自定义“微调器”指令中侦听该事件：

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

    }

  );

【讨论】：

只是为了澄清，它实际上被称为“内联注释”。
感谢您的建议 ;-) 我收到以下错误，使用您编写的代码 Uncaught Error: Unknown provider: myHttpInterceptorProvider <- myHttpInterceptor <- $http <- $compile 知道错误是由什么引起的吗？
我肯定会尝试使用你关于广播的想法......我的目标是尽可能绕过 jQuery，并且至少不要让 Angular 依赖它......所以你是对的，我肯定会调查;-)
关于您的“未知提供者”错误 - 您需要注入您的 myHttpInterceptor，就像我对 $httpProvider 所做的那样。我会更新我的答案...
其实我觉得叫内联括号表示法，看这里：docs.angularjs.org/tutorial/step_05

【解决方案2】：

仅针对处于相同情况的其他人...我按照@Stewie 的建议做了这个，它只使用 AngularJS 代码，没有愚蠢的 jQuery 依赖 ;-)

服务：

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

指令

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】：

尽管看起来很奇怪，但您也可以使用内联注释，在其中执行实际的 .push() 来注入您对 $q 和 $window 的依赖项，即，而不是将 function() 放入 $httpProvider.responseInterceptors 您推送一个数组：

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

【讨论】：