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

有时我看到Angular中的依赖项注入是这样做的：

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

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

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

---

这条路对吗？它是否取决于您是在控制器上执行依赖项注入还是在指令上执行依赖项注入？当您只是在函数中传递依赖项时，它不能被混淆。当传递具有复制相同依赖项的函数的数组时，可以在不中断流的情况下混淆代码

Angular很可能使用toString方法读取传递的函数中的依赖项。当您混淆时，angular将无法将参数作为依赖项读取。现在，当您以相同的顺序使用元素的其余部分作为参数传递函数为最后一个元素的数组时，angular使用数组元素来标识依赖项，因为它们是值，不会受到混淆的影响

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

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

在此示例中，尝试读取数组元素以注入依赖项，而不是函数的参数

有时我看到Angular中的依赖项注入是这样做的：

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

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

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

哪条路是正确的？

两者

这是否取决于您是在控制器上执行依赖项注入还是在指令上执行依赖项注入

没有

那么它们有什么不同呢？

第一个表单允许您自由地使用自己的自定义名称处理依赖项。比如说

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

将

未定义

，则会造成极大的破坏。只需保持顺序不变，并遵循正确的命名约定即可

更喜欢您提到的第一个版本，而不是第二个版本：

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

此版本可保护您的代码在缩小过程中不受损坏（即使您当前没有缩小代码，将来也很可能会这样）。您提到的第二个版本是完全合法的，但是当您的依赖项（如

$scope

和

书籍

缩小时，很可能会变成

a

和

b

），您的服务显然永远不会被注入

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

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

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

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

---

这使依赖项注入变得非常清晰，并再次保护代码不被缩小或损坏。

您能举一个模糊处理的例子吗？是['$scope'，Books'，function（s，b）{…}]将$scope和Books混淆为's'和'b'吗？还有第三种方法是通过$inject。不建议使用第二种方法，因为它会破坏缩小，请参阅隐式注释部分。您还应记住，如果要缩小应用程序，则需要使用[]语法，否则变量名称将发生更改，并且无法解析。确切地说，每次使用服务或工厂的AveryLongNameforServiceOfFactory.anyMethod（）。都会让事情看起来很难看。特别是如果您不拥有更改其名称的服务/工厂，我实际上指的是：