javascript - Angularjs 缩小最佳实践

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')
      .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 但是....

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

score 104 · Accepted Answer

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

请参阅AngularJS 文档的这一页，向下滚动到A Note on Minification。

更新

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

score 37 · Accepted Answer

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

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

score 8 · Accepted Answer

是的，您需要使用显式依赖注入（第二个变体）。但是从Angular 1.3.1开始，您可以关闭隐式依赖注入，这对于解决一次重命名的潜在问题非常有帮助（在缩小之前）。

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

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

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

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

score 7 · Accepted Answer

只是要指出，如果你使用

约曼

没有必要这样做

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

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

score 1 · Accepted Answer

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

参考：

如何缩小 angularjs 脚本

与 YO 一起建造

score 0 · Accepted Answer

您可能想使用这里$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
    })
}

score 0 · Accepted Answer

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

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

从文档：

隐式注释

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

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

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

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

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

有关详细信息，请参阅

javascript - Angularjs 缩小最佳实践

7 回答 7

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

隐式注释

Related

Reference