使用严格的依赖注入来诊断问题

Question

我正在阅读http://www.alexrothenberg.com/2013/02/11/the-magic-behind-angularjs-dependency-injection.html和事实证明，如果你缩小你的javascript，angularjs依赖注入有问题所以我想知道是否而不是

var MyController = function($scope, $http) {
    $http.get('https://api.github.com/repos/angular/angular.js/commits')
      .success(function(commits) {
        $scope.commits = commits
      })
  }

你应该使用

var MyController = ['$scope', '$http', function($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .success(function(commits) {
      $scope.commits = commits
    })
}]

总而言之，我认为第二个片段是针对旧版本的angularjs但是....

我应该总是使用注入方式（第二种方式）吗？

Answer 1

是，永远！所以这种方式即使你的minifer将$ scope转换为变量a和$ http转换为变量b，它们的标识仍然保留在字符串中。

请参阅AngularJS文档的this page，向下滚动至 A Note on Minification 。

<强>更新

或者，您可以在构建过程中使用ng-annotate npm包来避免这种冗长。

Answer 2

使用第二个变体更安全，但也可以使用ngmin安全地使用第一个变体。

<强>更新
现在ng-annotate成为解决此问题的新默认工具。

Answer 3

请注意，如果您使用

Yeoman

没有必要像

那样

var MyController = ['$scope', '$http', function($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .success(function(commits) {
      $scope.commits = commits
    })
}]

因为minify期间的grunt会考虑如何管理DI。

Answer 4

是的，您需要使用显式依赖注入（第二个变体）。但是，由于Angular 1.3.1您可以关闭隐式依赖注入，因此解决一次重命名（缩小之前）的潜在问题确实很有帮助。

使用strictDi配置属性关闭隐式DI：

angular.bootstrap(document, ['myApp'], {
    strictDi: true
});

使用ng-strict-di指令关闭隐式DI：

<html ng-app="myApp" ng-strict-di>

Answer 5

就像OZ_所说的那样，使用ngmin来缩小所有的角度js文件，比如directive.js service.js。之后，您可以使用Closure编译器来优化它。

参考：

How to minify angularjs scripts

Build with YO

Answer 6

您可能希望使用$inject提及here：

MyController.$inject = ['$scope', '$http'];

function MyController($scope, $http) {
  $http.get('https://api.github.com/repos/angular/angular.js/commits')
    .success(function(commits) {
      $scope.commits = commits
    })
}

Answer 7

使用严格的依赖注入来诊断问题

使用Implicit Annotation，代码在缩小后会中断。

从文档中：

隐式注释


谨慎：如果您打算缩小代码，则您的服务名称将被重命名并破坏您的应用。

您可以在与ng-strict-di相同的元素上添加ng-app指令，以选择进入严格的DI模式。

<body ng-app="myApp" ng-strict-di>

严格模式在服务尝试使用隐式注释时引发错误。

这对于确定发现问题很有用。

有关更多信息，请参见

Angularjs缩小了最佳实践

7 个答案:

使用严格的依赖注入来诊断问题

隐式注释