隐式/内联/$ inject依赖项注入在AngularJS中如何工作? [英] How does implicit/inline/$inject dependency injection work in AngularJS?

问题描述

我是AngularJS的新手，我想了解更多有关默认情况下注入的依赖项的信息.在阅读代码时，我注意到有时依赖项是事先明确声明的，有时则不是.例如:

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) {
  // ...
});

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

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

也很奇怪，如果您确实指定将要注入的依赖项，则必须以正确的顺序指定它们的 all ，否则什么也不会工作.例如，这是损坏的代码:

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!!

推荐答案

是的，Angular中的依赖项注入通过您注册的组件名称(以及Angular-内部组件)进行工作.

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

下面是一个示例，显示了如何使用几种不同的注释将服务注册并注入到控制器中.请注意，依赖项注入在Angular中始终相同，即，是否将某些内容注入到控制器，指令或服务中都没关系.

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.内联数组注释

或者您可以使用使用数组的表示法，其中最后一个参数是具有所有可注入对象的构造函数(在这种情况下，变量名称无关紧要).数组中的其他值必须是与可注射物名称匹配的字符串. Angular可以通过这种方式检测注射剂的顺序并适当地进行检测.

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', ['$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属性注释

第三个选择是在构造函数上指定$inject -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文件时发生的问题导致了参数名被重命名.然后，Angular无法检测到要注入的东西.在后两种情况中，将可注射物定义为字符串，在缩小过程中不会碰到它们.

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不适用于缩小/混淆.我认为版本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.

您可以在互联网上找到一些更详细的信息，例如在《 Angular开发人员指南》 中.

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

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