Dependency Injection in Angular JS

Source: Internet
Author: User

Dependency Injection di

In Angularjs, there are Angular.module (), Angular.injector (), $injector, $provide in relation to Di.

DI Container 3 Features: Registration of services, declaration of dependencies, acquisition of objects.

Dependency Injection

di in spring

Angularjs in di

Service registration

via XML config file <bean> tags or annotations @ Repository, @Service, @Controller, @Component implemented

module and $provide equivalent to the registration of the service ;

Dependency declaration

can be XML file, you can also use annotations such as @resource to declare

Object get

Application Context.getbean () implements

Injector used to get objects (angular automatically completes dependency injection)

Three ways to angular dependency declarations

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

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.

//Create a MyModule module, register a servicevarMyModule = Angular.module (' MyModule '), []); Mymodule.service (' MyService ',function() {      This. my = 0;});//Get InjectorvarInjector = Angular.injector (["MyModule"]);//The first kind of inferenceInjector.invoke (function(myservice) {alert (;});//The second kind of annotationfunctionExplicit (ServiceA) {alert (;}; Explicit. $inject= [' MyService '];injector.invoke (Explicit);//The third type of inlineInjector.invoke ([' MyService ',function(ServiceA) {alert (;}]);

How to understand module?

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.

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.

// passing more than one parameter, representing 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), representing the Get module // If the module does not exist, the angular frame throws an exception var getmodule = Angular.module ("MyModule"); // true, both are the same module alert (createmodule = = GetModule);

So 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, etc.

This means that the module is a collection of functions, such as controllers, services, filters, directives and other sub-elements of the whole.

the 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.

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 a MyModule module, register a servicevarMyModule = Angular.module (' MyModule '), []); Mymodule.service (' MyService ',function() {             This. my = 0;});//Create a hermodule module, register a servicevarHermodule = Angular.module (' Hermodule '), []); Hermodule.service (' Herservice ',function() {             This. her = 1;});//services loaded in 2 modulesvarInjector = Angular.injector (["MyModule", "Hermodule"]); alert (Injector.get ("MyService"). my); Alert (Injector.get ("Herservice"). Her);

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"= = Injector2);   false

Dependency Injection in Angular JS

Related Article

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: 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.