Angular understand module and injector, that is, dependency injection _ANGULARJS

The benefits of Dependency injection (DI) are no longer mentioned, as is known with the spring Framework. Angularjs as the foreground JS framework, also provides the support for Di, this is javascript/jquery not have the characteristic. In Angularjs, Angular.module (), Angular.injector (), $injector, $provide are associated with Di. For a DI container, you must have 3 elements: the registration of the service, the Declaration of the dependency, and the acquisition of the object. For example, in spring, the registration of a service is implemented through the <bean> tag of the XML configuration file or annotation @repository, @Service, @Controller, @Component objects can be Applicationcontext.getbean () implemented by the Declaration of dependencies, either in the XML file or by using annotations such as @resource to be declared in Java code. In angular, module and $provide are equivalent to the registration of a service; Injector is used to get objects (angular automatically completes dependency injection); The declaration of dependencies has 3 ways in angular. Below is a description of angular di from these 3 aspects.

1, Angular.module () Create, acquire, register the module in the angular

The Angular.module () is a global place for creating, registering and retrieving angular modules. When passed two or the arguments, a new module is created. If passed only one argument, a existing module (the name passed as the "the", the "the", ") is argument.

More than one pass parameter, representing the new module; The empty array represents the module independent of other modules
var createmodule = angular.module ("MyModule", []);

There is only one parameter (module name) that represents the Fetch module
//If the module does not exist, the angular frame throws an exception
var getmodule = angular.module ("MyModule");

True, all of the same module
alert (createmodule = = GetModule);

The function can either create a new module or acquire an existing module, whether it is created or fetched, and is distinguished by the number of arguments.

Angular.module (name, [requires], [CONFIGFN]);

Name : The String type that represents the module;

requires: An array of strings that represent the list of other modules that the module relies on, if not dependent on other modules, with an empty array;

CONFIGFN: used to make some configuration of this module.

Now that we know how to create and get modules, what exactly is a module? The official developer Guide has only one sentence: You can have a module as a container for the different parts of your app–controllers, servi Ces, filters, directives, etc. Now I don't quite understand, basically that module is a collection of functions, such as controllers, services, filters, instructions and other child elements of the whole. Can't explain now, leave first.

2, $provide and modules of the relationship

The $provide service has a number of methods for registering components with the $injector. Many of functions are also exposed on angular. Module.

Previously mentioned: module and provide are used to register services into injector. Looking at the official API, you can see that $provide provides provide (), constant (), value (), Factory (), service () to create services of a different nature; angular. These 5 service registration methods are also provided in module. In fact, the 2 function is exactly the same, which is used to register the service to the DI container in the injector.

The official API under the Auto has $provide and $injector, implicit module which gets automatically added to each $ Injector. Literally, every injector has these 2 implied services. But in the 1.2.25 version, there is no way to get the $provide in injector. I don't know why. In general, it is not necessary to display the use of this service, directly using the API provided in module.

var injector = Angular.injector ();
Alert (Injector.has ("$provide"));//false
alert (Injector.has ("$injector"));//true

3, Angular.injector ()

Using Angular.injector (), you can also get the injector, but not the module binding. This approach is meaningless, which is equivalent to creating an empty di container with no service for others. The correct approach is to specify the modules that need to be loaded when creating the injector.

Create MyModule module, register service
var mymodule = angular.module (' MyModule ', []);
Mymodule.service (' MyService ', function () {
  this.my = 0;
});

Create Hermodule module, register service
var hermodule = angular.module (' Hermodule ', []);
Hermodule.service (' Herservice ', function () {
  this.her = 1;
});

Loaded 2 modules of the service
var injector = Angular.injector (["MyModule", "Hermodule"]);
Alert (Injector.get ("MyService"). my);
Alert (Injector.get ("Herservice"). Her);

If multiple modules are loaded, the services under multiple modules can be obtained by returning injector. In this case, if only the Mymoudle is loaded, the resulting injector will not be able to access the services under Hermoudle. Here's a special note: Angular.injector () can call multiple times, returning the new injector object each time.

var injector1 = Angular.injector (["MyModule", "Hermodule"]);
var Injector2 = Angular.injector (["MyModule", "Hermodule"]);

Alert (Injector1 = = Injector2);//false

4, angular in the three kinds of way to declare

Angular offers 3 ways to get dependencies: inference, annotation, inline.

Create MyModule module, register service
var mymodule = angular.module (' MyModule ', []);
Mymodule.service (' MyService ', function () {
  this.my = 0;
});

Get injector
var injector = Angular.injector (["MyModule"]);

The first type of inference
injector.invoke (function (myservice) {alert (myservice.my);});

The second type of annotation
function Explicit (servicea) {alert (servicea.my);};
explicit. $inject = [' MyService '];
Injector.invoke (Explicit);

The third type of inline
injector.invoke ([' MyService ', function (servicea) {alert (servicea.my);}]);

The annotation and inline methods, which are not required for function parameter names, are recommended practices; The inference method enforces that the parameter name and service name are the same, and if the JS code is compressed or confused, the function will go wrong, and this method is not recommended.

The above is the angular JS dependency injection of data collation, follow-up continue to supplement the relevant information, thank you for your support of this site!