Question

有时我看到Angular中的依赖注入就像：

angular.module('controllers')
  .controller('BooksListCtrl', ['$scope', 'Books', function($scope, Books){
    Books.get(function(data){
      $scope.books = data;
    });
  }]);

有时看起来如下没有数组，只是将依赖项直接传递给函数：

angular.module('controllers')
  .controller('BooksListCtrl', function($scope, Books){
    Books.get(function(data){
      $scope.books = data;
    });
  });

一个是正确的方法吗？是否取决于你是否在控制器与指令vs等进行依赖注入？

Answer 1

有时我看到Angular中的依赖注入就像：

angular.module('controllers')
  .controller('BooksListCtrl', ['$scope', 'Books', function($scope, Books){
    Books.get(function(data){
      $scope.books = data;
    });
  }]);

有时它看起来像没有数组的下面，只是将依赖项直接传递给函数：

angular.module('controllers')
  .controller('BooksListCtrl', function($scope, Books){
    Books.get(function(data){
      $scope.books = data;
    });
  });

哪一个是正确的方式？

两个

是否取决于您是否在控制器上执行依赖注入vs指令等？

没有

所以他们有什么不同？

第一个表单使您可以自由地使用自己的自定义名称处理依赖项。例如

app.controller('BooksListCtrl', ['$scope', 'Books', function($scope, myOwnBookName){
    myOwnBookName.get(function(data){
      $scope.books = data;
    });
}]);

而第二个没有..但两者都是正确的。

此外，在使用第一个表单时需要保持谨慎，因为您可能会错误地跳过依赖项和/或将其与错误的表单链接。例如，做一些事情：

app.controller('BooksListCtrl',['$scope','$window','$rootScope', function(foo, bar){
 ...
}]);

会造成极大的破坏，因为foo现在指向$scope，bar将指向$window而$rootScope将undefined。/* check if given target is function */ if ($.isFunction(settings.target)) { var str = settings.target.apply(self, [input.val(), settings]); $(self).html(str); self.editing = false; } else {只需保持订单完整并遵循正确的命名约定。

Answer 2

当你在函数中传递依赖时，它不能被混淆。在传递具有复制相同依赖关系的函数的数组时，可以在不中断流程的情况下对代码进行模糊处理

Angular最有可能使用toString方法读出传递的函数中的依赖项。当你进行模糊处理时，angular不能将参数读出为依赖项。现在，当您使用函数的剩余元素作为最后一个元素传递一个数组作为arguement时，angular使用数组元素来识别依赖关系，因为它们是值并且不会受到模糊处理的影响。

正如你在评论中所写，是的！它也是这样。喜欢：

 ['$scope', '$location', function (s, l){}] ;

在此角度尝试读取数组元素以注入依赖项而不是函数的参数。

Answer 3

首选你提到的第一个版本：

angular.module('controllers')
  .controller('BooksListCtrl', ['$scope', 'Books', function($scope, Books){
    Books.get(function(data){
      $scope.books = data;
    });
  }]);

此版本可以防止您的代码在缩小过程中受到损坏（即使您目前没有将代码缩减到最近，也可能会在未来缩小代码）。您提到的第二个版本是完全合法的，但是当缩小时，$scope和Books之类的依赖关系很可能变为a和b，并且您的服务显然永远不会被注入

还有第二种注释依赖注入的方法：

angular.module('controllers')
  .controller('BooksListCtrl', BooksListCtrl);

BooksListCtrl.$inject = ['$scope', 'Books'];

function BooksListCtrl($scope, Books) {
  Books.get(function(data){
    $scope.books = data;
  });
}

这使得您的依赖注入非常清晰，并再次保护您的代码免受缩小损坏。

角度依赖注入 - 我一直看到两种不同的方式

3 个答案: