(vii) Understanding of module and injector in angular, i.e. dependency injection

(vii) Understand the module and injector in angular, that is, dependency injection time:2014-10-10 01:16:54 read:63060 Comments:1 Favorites:0 [Point I collection +]

Tags: angular injector angular Dependency Injection

The benefits of Dependency injection (DI) are no longer mentioned, as is known with the spring Framework. Angularjs, as the front-desk JS framework, also provides support for Di, a feature that Javascript/jquery does not have. In Angularjs, there are Angular.module (), Angular.injector (), $injector, $provide in relation to Di. For a DI container, there must be 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 via the <bean> tag of the XML configuration file or the annotation @repository, @Service, @Controller, @Component The object's acquisition can be Applicationcontext.getbean (), the Declaration of a dependency, which can be configured in an XML file, or it can be declared in Java code using annotations such as @resource. In angular, module and $provide are equivalent to the registration of the service, injector is used to get the object (angular automatically completes the dependency injection), and the Declaration of the dependency is in angular in 3 ways. Below from these 3 aspects, introduced the next angular di.

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

angular.module()the is a global place for creating, registering and retrieving Angular modules. When passed and more arguments, a new module is created. If passed only one argument, a existing module (the name passed as the first argument to module ) is retrieved.

Pass parameters more than one, representing the new module; an empty array means that the module does not depend on other modules var createmodule = angular.module ("MyModule", []);//Only one parameter (module name), which represents the Get module//If the module does not exist, The angular framework throws an exception var getmodule = Angular.module ("MyModule");//True, both are the same module alert (createmodule = = GetModule);

The function can either create a new module or get an existing module, which is created or fetched, and is distinguished by the number of parameters.

Angular. Module(name, [requires], [configfn]);

Name: String type, representing the name of the module;

Requires: An array of strings that represent the list of other modules that the module depends on, and if it does not depend on other modules, use an empty array;

CONFIGFN: Used to make some configuration of the module.

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

2. Relationship between $provide and modules

The $provide service has a number of methods for registering and the $injector. Many of these functions is also exposed on angular.Module .

Mentioned before: module and provide are used to register services to injector. Viewing the official API, you can see that $provide provides provide (), constant (), value (), Factory (), service () to create services of various natures; angular. The 5 service registration methods are also available in the module. In fact, the 2 function is exactly the same, is used to register the DI container service into the injector.

The official API under Auto has $provide and $injector, implicit module which gets automatically added to each $ Injector. Literally means that every injector has these 2 hidden services. But in 1.2.25, it feels like there's no way to get $provide in injector. Don't know why? In general, there is no need to display the use of this service, directly using the API provided in module.

var injector = Angular.injector (), Alert (Injector.has ("$provide")),//falsealert (Injector.has ("$injector")),//true

3, Angular.injector ()

Use Angular.injector () or get to the injector, but not the module binding. This does not make sense, equivalent to creating an empty di container in which there is no service for what others are doing. 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;}); /load 2 modules in the service var injector = Angular.injector (["MyModule", "Hermodule"]); Alert (Injector.get ("MyService"). my); Alert ( Injector.get ("Herservice"). Her);

if multiple modules are loaded, the returned injector can be used to obtain services under multiple modules. In this example, if only the Mymoudle is loaded, the resulting injector will not be able to access the service under Hermoudle. in particular, it is important to note that Angular.injector () can be called multiple times, returning the newly created injector object each time .

var injector1 = Angular.injector (["MyModule", "Hermodule"]), var injector2 = Angular.injector (["MyModule", "Hermodule"] ) alert (Injector1 = = Injector2);//false

4. Angular three ways of declaring dependencies

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

Create MyModule module, register service var mymodule = angular.module (' MyModule ', []); Mymodule.service (' MyService ', function () {this.my = 0 ;});/ /Get Injectorvar injector = Angular.injector (["MyModule"]);//The first type of Inferenceinjector.invoke (function (myservice) {alert ( myservice.my);}); /The second type of annotationfunction explicit (ServiceA) {alert (servicea.my);}; explicit. $inject = [' MyService '];injector.invoke (Explicit);///Third Inlineinjector.invoke ([' MyService ', function ( ServiceA) {alert (servicea.my);}]);

where annotation and inline are not required for function parameter names, it is recommended that the inference method requires the parameter name and service name to be the same, and if the JS code is compressed or confused, then the functionality will be problematic and is not recommended.

(vii) Understanding of module and injector in angular, i.e. dependency injection

Tags: angular injector angular Dependency Injection

(vii) Understanding of module and injector in angular, i.e. dependency injection