在AngularJS中，隐式/内联/$inject依赖注入是如何工作的?

Question

我是AngularJS的新手，我想了解更多关于默认情况下注入的依赖项。在通读代码时，我注意到有时依赖项是事先显式声明的，有时不是。例如:

someModule.controller('MyController', ['$scope', 'someService', function($scope, someService) {
  // ...
}]);

给出与

相同的结果:

someModule.controller('MyController', function($scope, someService) {
  // ...
});

这是如何工作的?Angular是否假设注入的模块与参数中的变量命名相同?

而且，奇怪的是，如果你指定了要注入的依赖项，你必须指定所有的，并且以正确的顺序，否则什么都不会起作用。例如，这是破碎的代码:

someModule.controller('MyController', ['someService', '$scope', function($scope, someService) {
  // Won't give us any errors, but also won't load the dependencies properly
}]);

谁能给我解释一下这整个过程是如何工作的?非常感谢!!

Answer 1

是的，Angular中的依赖注入是通过你注册的组件(以及Angular——对于内部组件)的名称来工作的。

下面是一个示例，展示了如何使用几个不同的注释注册服务并将其注入控制器。请注意，依赖注入在Angular中的工作方式总是一样的，也就是说，无论你是向控制器、指令还是服务注入一些东西，都是一样的。

app.service('myService', function () {
    // registering a component - in this case a service
    // the name is 'myService' and is used to inject this
    // service into other components
});

在其他组件中使用(注入)这个组件，我知道有三种不同的注释:

1。隐式注释

你可以指定一个构造函数，将所有依赖项作为参数。是的，这些名称需要与注册这些组件时的名称相同:

app.controller('MyController', function ($http, myService) {
    // ..
});

2。内联数组注释

或者您可以使用数组表示法，其中最后一个参数是包含所有可注入对象的构造函数(在这种情况下变量名无关紧要)。数组中的其他值需要是与可注入对象名称匹配的字符串。Angular可以通过这种方式检测可注入对象的顺序，并恰当地处理它们。

app.controller('MyController', ['$http', 'myService', function ($h, m) {
    /* Now here you can use all properties of $http by name of $h & myService by m */
    // Example
    $h.x="Putting some value"; // $h will be $http for angular app
}]);

3。

第三个选项是在构造函数上指定$inject -属性:

function MyController($http, myService) {
    // ..
}
MyController.$inject = ['$http', 'myService'];
app.controller('MyController', MyController);

最后两个选项可用的原因，至少据我所知，是由于在最小化JavaScript文件时发生的问题，导致参数的名称被重命名。然后Angular就无法再检测要注入什么了。在后两种情况下，可注入对象被定义为字符串，在最小化过程中不会触及它们。

我建议使用版本2或3，因为版本1不能使用缩小/混淆。我更喜欢版本3，因为在我看来它是最明确的。

你可以在网上找到更详细的信息，比如Angular Developer Guide。

Answer 2

只是为了提供一个不同的答案，关于内联/隐式依赖在AngularJS中是如何工作的。Angular会对提供的函数进行toString操作，并从生成的字符串中解析参数名。例子:

function foo(bar) {}
foo.toString() === "function foo(bar) {}"

引用:

源代码

AngularJS依赖注入-揭秘