AngularJS压缩最佳实践

Question

AngularJS压缩最佳实践

107

我正在阅读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的，但是......

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

- Whisher

7个回答

37

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

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

- OZ_

8

是的，你需要使用显式依赖注入（第二个变量）。但自Angular 1.3.1以来，你可以关闭隐式依赖注入，这真的有助于一次解决重命名可能出现的问题（在缩小之前）。

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

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

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

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

- dizel3d

7

请注意，如果您使用

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

因为Grunt在压缩代码时考虑了如何管理依赖注入。

- Whisher

1

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

参考：

如何压缩angularjs脚本

使用YO构建

- fxp

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

- no id

0

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

使用隐式注释，代码在缩小后会出现错误。

从文档中得知：

隐式注释

注意：如果您计划缩小您的代码，您的服务名称将被重命名并破坏您的应用程序。

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

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

严格模式在服务尝试使用隐式注释时会抛出错误。

这对于确定问题非常有用。

更多信息，请参见

- georgeawg

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Selvam Palanimalai · Accepted Answer

是的，一直需要！这样即使你的压缩工具将 $scope 转换为变量a并将 $http 转换为变量b，在字符串中它们的身份仍然得以保留。

请参阅AngularJS文档的此页面，向下滚动至关于压缩的注意事项。更新或者，你可以在构建过程中使用ng-annotate npm包来避免这种冗余。