AngularJS缩小最佳实践

我正在阅读http://www.alexrothenberg.com/2013/02/11/the-magic-behind-angularjs-dependency-injection.html，
事实证明，如果缩小，angularjs依赖项注入会出现问题您的javascript
，所以我想知道是否应该使用

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的旧版本但是....
我是否应该始终使用注入方式（第二种方式）？

#1 楼

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

请参阅AngularJS文档的此页面，向下滚动至A Note on缩小。

UPDATE

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

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

– Wootpreprels
2013年9月13日在9:06

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

–塞尔瓦姆·帕兰马利
2013年9月13日上午9:09

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

– jkjustjoshing
2014年4月17日17:49

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

– Razvan.432
16年7月26日在18:24

另请参阅《 AngularJS开发人员指南-隐式注释》。

–georgeawg
18年7月5日在2:31

#2 楼

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

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

#3 楼

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

使用strictDi config属性关闭隐式DI： />

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

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

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

#4 楼

只是指出，如果您使用

Yeoman

，则无需这样做

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

，因为最小化期间的咕take声考虑了如何管理DI。

#5 楼

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

参考：

如何最小化angularjs脚本

用YO构建

#6 楼

您可能要使用此处提到的$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
    })
}

#7 楼

使用严格的依赖注入来诊断问题
使用隐式注释，代码在缩小时会中断。
从文档中：您打算精简代码，服务名称将被重命名并破坏您的应用。 br />

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

每当服务尝试使用隐式批注时，严格模式都会引发错误。
这对于确定发现问题很有用。 /> AngularJS开发人员指南-使用严格依赖注入
AngularJS ng-app指令API参考
AngularJS错误参考-错误：$ injector：unpr未知提供程序

编程黑洞网