AngularJS依赖注入为何存在两种写法？哪种正确？

嘿，我来帮你把这事儿掰明白～ AngularJS里的依赖注入确实有两种常见写法，咱们先把它们摆出来，再讲差异和为啥你的第二种失效：

第一种（能正常工作的写法：显式数组语法） #

这是AngularJS推荐的显式依赖注入写法，结构是数组包裹依赖名称字符串，最后跟着实际的函数：

// 示例：控制器注入$scope和$http
app.controller('MyController', ['$scope', '$http', function($scope, $http) {
  // 你的业务逻辑
  $scope.data = [];
  $http.get('/api/data').then(res => $scope.data = res.data);
}]);

第二种（失效的写法：隐式推断式语法） #

这种写法是直接把依赖作为函数参数传入，看起来更简洁：

app.controller('MyController', function($scope, $http) {
  // 同样的业务逻辑
  $scope.data = [];
  $http.get('/api/data').then(res => $scope.data = res.data);
});

二者核心差异 #

1. 依赖识别方式不同

   • 显式数组写法：AngularJS通过数组里的字符串字面量来识别依赖，这些字符串不会被代码压缩工具修改，所以无论代码怎么压缩，Angular都能准确找到对应的服务。
   • 隐式推断写法：AngularJS会通过函数参数的名称来推断要注入的依赖。但问题来了——当你把代码部署到生产环境时，通常会用压缩工具（比如UglifyJS）把变量名改成a、b这类短名称，压缩后代码会变成这样：

     app.controller('MyController',function(a,b){a.data=[];b.get('/api/data').then(res=>a.data=res.data)});
     

     这时候AngularJS完全不知道a和b对应哪个服务，自然就会失效报错。

2. 健壮性不同

   • 显式数组写法：完全不受代码压缩的影响，在开发和生产环境都能稳定运行，是AngularJS官方首推的写法。
   • 隐式推断写法：只能在未压缩的开发环境正常工作，生产环境必须配合ng-annotate这类工具给代码自动添加注入注释，才能让压缩工具保留依赖信息，步骤更繁琐。

哪种写法是正确的？ #

两种写法本身都是AngularJS官方认可的语法，但显式数组写法是更安全、更通用的正确写法——尤其是当你需要把代码部署到生产环境时，它能避免压缩带来的依赖识别问题。如果实在喜欢隐式写法的简洁性，记得在构建流程中加入ng-annotate工具处理代码，否则生产环境必出问题。

内容的提问来源于stack exchange，提问作者TheValyreanGroup