如何在AngularJS隐含的依赖注入工作？ [英] How does implicit dependency injection work in AngularJS?

问题描述

我是新来AngularJS，我想更多地了解正在由默认注入的依赖关系。尽管通读code我发现有时依赖是事先明确声明，有时他们没有。例如：

I'm new to AngularJS and I would like to understand more about the dependencies that are being injected by default. While reading through code I've noticed that sometimes dependencies are explicitly declared beforehand, and sometimes they aren't. For example:

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

给出相同的结果：

Gives the same results as:

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

这是如何工作的？是角假设被注入被命名为相同的参数

How does this work? Is Angular assuming that the modules being injected are named the same as the variables in the parameters?

此外，奇怪的是，如果你指定将要注入的依赖，必须指定的所有他们与在正确的顺序，否则什么都不会工作。例如，这是破code：

Also, strangely enough, if you do specify the dependencies that are going to be injected, you must specify all of them and in the right order, otherwise nothing will work. For example, this is broken code:

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

有人能澄清我这是怎么全过程的工作？非常感谢你！

Can someone clarify to me how is this whole process working? Thank you very much!!

推荐答案

是，通过组件，您的名字依赖注入的角度作品（和角度 - 为内部的）。注册

Yes, dependency injection in Angular works via the names of the components you (and Angular - for the internal ones) registered.

下面是表示一个服务被注册，并注射入使用几种不同的注解的控制器的例子。请注意，依赖注入始终工作在角是相同的，即如果你的东西注入到一个控制器，一个指令或服务并不重要。

Below is an example showing how a service is registered and injected into a controller using several different annotations. Please note that dependency injection always works the same in Angular, i.e. it doesn't matter if you are injecting something into a controller, a directive or a service.

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

二用（注入）的其他组件此组件，有三种不同的注解我所知道的：

Two use (inject) this component in other components, there are three different annotations I am aware of:

1。隐注释

您可以指定一个构造函数作为参数所有的依赖。是的，名字必须相同，当这些部件被注册为：

You can either specify a constructor function which takes as parameters all the dependencies. And yes, the names need to be the same as when these components were registered:

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

2。内嵌阵列注释

或者你也可以使用一个数组，其中最后一个参数是与所有注射剂类的构造函数（变量名不要在这种情况下重要）使用的符号。阵列中的其它值必须匹配注射的名称的字符串。角可以通过这种方式检测的注射剂的顺序，因此适当地做

Or you can use a notation using an array, where the last parameter is the constructor function with all the injectables (variable names do not matter in this case). The other values in the array need to be strings that match the names of the injectables. Angular can this way detect the order of the injectables and do so appropriately.

app.controller('MyController', ['$htt', 'myService', function ($h, m) {
    // ..
}]);

3。 $注入性注释

第三个选项是指定 $注 -property的构造函数：

A third option is to specify the $inject-property on the constructor function:

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

为什么最后两个选项可供选择，其原因至少就我所知，是由于污染减量的JavaScript文件而导致参数名称被重命名时发生该问题。角则是不能检测到什么再注入。在第二个两例注射剂被定义为字符串，缩小期间不感动。

The reason why the last two options are available, at least as far as I know, is due to issues which occured when minifying the JavaScript files which led to the names of the parameters being renamed. Angular then wasn't able to detect what to inject anymore. In the second two cases the injectables are defined as strings, which are not touched during minification.

我会建议使用版本2或3，如1版不会缩小/模糊处理工作。我preFER第3版从我的角度来看它是最明确的。

I would recommend to use version 2 or 3, as version 1 won't work with minification/obfuscation. I prefer version 3 as from my point of view it is the most explicit.

您可以在网上找到一些更详细的信息，例如在角度开发者指南。

You can find some more detailed information in the internet, e.g. on the Angular Developer Guide.

这篇关于如何在AngularJS隐含的依赖注入工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！