103

我正在阅读 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')
      .then(function(response) {
        $scope.commits = response.data
      })
  }

你应该使用

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

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

我是否应该始终使用注入方式（第二种方式）？

javascript angularjs dependency-injection

— 威客
source

102

是的，永远！因此，即使您的minifer将$ scope转换为变量a，将$ http转换为变量b，它们的身份仍然保留在字符串中。

请参阅AngularJS文档的此页面，向下滚动至A Mining on Minification。

更新

另外，您可以在构建过程中使用ng-annotate npm软件包来避免这种冗长的描述。

— 塞尔瓦姆·帕兰玛利
source

egghead.io很好地解释了此问题以及其他一些问题。JFYI

— Wottensprels

@Sprottenwels：是的！那里有很多有用的资源。

— Selvam Palanimalai 2013年

8

可以使用ngmin和一个构建工具（例如Grunt）来代替，而不使用这种更冗长的语法，然后再运行缩小。这样，您可以适当地缩小，但也可以使用两种依赖注入语法。

— jkjustjoshing

4

关于缩小的说明已移至此处docs.angularjs.org/tutorial/step_07

— Razvan.432，2016年

另见AngularJS开发人员指南-隐式注释。

— georgeawg '18年

36

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

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

— OZ_
source

7

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

使用strictDiconfig属性关闭隐式DI ：

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

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

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

— dizel3d
source

7

只是指出，如果您使用

约曼

没有必要做喜欢

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

因为最小化期间的咕gr声会考虑如何管理DI。

— 威客
source

1

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

参考：

如何最小化angularjs脚本

用YO构建

— fxp
source

0

您可能要使用这里$inject提到的方法：

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

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

— 没有身份证
source

0

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

使用隐式注释，代码在缩小时会中断。

从文档中：

隐式注释

小心：如果您打算精简代码，则服务名称将被重命名并破坏您的应用程序。

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

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

每当服务尝试使用隐式注释时，严格模式都会引发错误。

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

有关更多信息，请参见

— 乔治
source

AngularJS缩小最佳实践

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

隐式注释