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

Source: Internet
Author: User

The benefits of Dependency injection (DI) are no longer to be mentioned, as is known with the spring Framework. Angularjs as the foreground JS frame. Support for Di is also provided. This is a feature that Javascript/jquery does not have.

The

Angularjs is related to di with Angular.module (), angular.injector (),   $injector, $provide object can be Applicationcontext.getbean () implemented; a dependency declaration, which can be configured in an XML file, You can also use annotations such as @resource to declare in Java code. In angular, module and $provide are the equivalent of service, injector is used to get the object (angular will voluntarily complete the dependent injection). There are 3 ways to declare dependencies in angular. Here are 3 ways to introduce di under angular.


1, Angular.module () Create, obtain, register angular module

theangular module () 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.

There is more than one pass, which represents a 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//Assuming that 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 create both a new module and an existing module. is created or acquired. Be distinguished by the number of parameters.

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

Name: The string type that represents the name of the module.

Requires: An array of strings that represent the list of other modules that the module relies on. Assuming that you do not rely on other modules, you can 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: You can think of a module as a container for the different parts of your app–controllers, serv ICES, filters, directives, etc. I don't quite understand it now. Basically, a module is a collection of functions. such as controllers, services, filters, directives and other sub-elements composed of the overall. Can't explain it now, leave it first.


2. Relationship between $provide and modules

the$provideService have a number of methods for registering$injector. Many of these functions is also exposed onangular.Module.

Mentioned before: module and provide are used to register the service to the injector. Viewing the official API, you can see that $provide provides provide (), constant (), value (), factory (), and 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, it is used to register the DI container service into the injector.

The official API for Auto has $provide and $injector, implicit module which gets automatically added to each $injector. literally, every injector has these 2 hidden services. But in the 1.2.25 version, it feels like there is no way to get the $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 () and get to the injector. However, there is no binding to the module. This is meaningless, equivalent to creating an empty di container. There is no service in the other people how to use it. The correct approach is to specify the modules that need to be loaded when creating the injector.

Create MyModule module, brochure service var mymodule = angular.module (' MyModule ', []); Mymodule.service (' MyService ', function () {this.my = 0 ;});/ /Create Hermodule module, brochure service var hermodule = angular.module (' Hermodule ', []); Hermodule.service (' Herservice ', function () { This.her = 1;}); /Loaded in 2 modules service var injector = Angular.injector (["MyModule", "Hermodule"]); Alert (Injector.get ("MyService"). my); Alert ( Injector.get ("Herservice"). Her);
Assuming that more than one module is loaded, the returned injector is able to obtain services under multiple modules. This example assumes that only the Mymoudle is loaded. Then the injector will not be able to access the service under the Hermoudle. Over here It is particularly 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, brochure 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);}); /Another annotationfunction explicit (servicea) {alert (servicea.my);}; explicit. $inject = [' MyService '];injector.invoke (Explicit);///Third Inlineinjector.invoke ([' MyService ', function ( ServiceA) {alert (servicea.my);}]);
Ofannotation and inline methods, which are not required for function reference names, are recommended; The inference method enforces the requirement that the parameter name and service name are consistent. If the JS code is compressed or confused, then the function will be problematic, it is not recommended to use this way.


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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.