Dependency Injection Example Analysis of AngularJS of uses module and injector

In this paper, an example is given to analyze the dependency injection of AngularJS. Share it for your reference, as follows:

The benefits of dependency injection (DI) are no longer repeated, and anyone who has used the spring framework knows it. As the foreground js framework, AngularJS also provides support for DI, a feature that JavaScript/jQuery does not have. Among angularjs, angular. module (), angular. injector (), $injector, $provide are related to DI. For an DI container, there must be three elements: registration of services, declaration of dependencies, and acquisition of objects. For example, in spring, the service is registered through the xml configuration file < bean > Label or annotation @ Repository, @ Service, @ Controller, @ Component; Object can be obtained by ApplicationContext. getBean (). The declaration of dependencies can be either configured in the xml file or declared in the Java code using annotations such as @ Resource. In angular, module and $provide are equivalent to registrations of services; injector is used to fetch objects (angular automatically completes the injection of dependencies); There are three ways to declare dependencies in angular. From these three aspects, the following introduces DI of angular.

1. angular. module () Creates, acquires, and registers modules in angular

The angular. module () is a global place for creating, registering and retrieving Angular or or more arguments, a new module one argument, If one argument argument argument argument argument argument the argument ES90 EN) is retrieved.

//  Passing parameters is more than 1 A , Represents a new module ; An empty array means that this module does not depend on other modules 
var createModule = angular.module("myModule", []);
//  Only 1 Parameters ( Module name ), Represents the acquisition module 
//  If the module does not exist ,angular The framework throws an exception 
var getModule = angular.module("myModule");
// true, Are all the same 1 Modules 
alert(createModule == getModule);

This function can either create a new module or obtain an existing module, which 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, representing the list of other modules that the module depends on. If it does not depend on other modules, use an empty array;
configFn: Used for some configuration of this module.

Now that we know how to create and obtain modules, what are modules? There is only one sentence on the official Developer Guide: You can think of module as a Container for the different parts of your app controllers, services, filters, directives, etc. I can't explain it now. Leave it behind.

2. Relationship between $provide and Module

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

As mentioned earlier: 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 various properties; These five service registration methods are also provided in angular. Module. In fact, the two functions are completely like one, which is used to register services to DI container into injector.

Under the official API, auto has $provide and $injector, Implicit module which gets automatically added to each $injector. Literally, every injector has these two implicit services. But in version 1.2. 25, it felt like there was no way to get $provide from injector. I don't know why. 1 Generally speaking, you don't need to show that you use this service, just use API provided in module.

var injector = angular.injector();
alert(injector.has("$provide"));//false
alert(injector.has("$injector"));//true

3. angular. injector ()

Use angular. injector (); The injector can also be obtained, but it is not bound to the module. This approach is meaningless, is equivalent to you create an empty DI container, which does not serve others how to use it. The correct way is to specify the modules to be loaded when creating the injector.

//  Create myModule Module, registration service 
var myModule = angular.module('myModule', []);
myModule.service('myService', function() {
      this.my = 0;
});
//  Create herModule Module, registration service 
var herModule = angular.module('herModule', []);
herModule.service('herService', function() {
      this.her = 1;
});
//  Loaded 2 Services in 10 modules 
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 through the returned injector. In this example, if only myMoudle is loaded, the resulting injector cannot access the service under herMoudle. One particular note here is that angular. injector () can be called multiple times, each time returning the newly created injector object.

var injector1 = angular.injector(["myModule","herModule"]);
var injector2 = angular.injector(["myModule","herModule"]);
alert(injector1 == injector2);//false

4. Three Ways to Declare Dependencies in angular

angular provides three ways to obtain dependencies: inference, annotation and inline.

//  Create myModule Module, registration service 
var myModule = angular.module('myModule', []);
myModule.service('myService', function() {
      this.my = 0;
});
//  Get injector
var injector = angular.injector(["myModule"]);
//  No. 1 1 Species inference
injector.invoke(function(myService){alert(myService.my);});
//  No. 1 2 Species annotation
function explicit(serviceA) {alert(serviceA.my);};
explicit.$inject = ['myService'];
injector.invoke(explicit);
//  No. 1 3 Species inline
injector.invoke(['myService', function(serviceA){alert(serviceA.my);}]);

Among them, annotation and inline have no requirement for function parameter names, which is recommended; The inference method requires parameter name and service name 1. If the JS code is compressed or confused, the function will go wrong, so this method is not recommended.

For more readers interested in AngularJS, please check out the topics on this site: "Introduction and Advanced Tutorial of AngularJS" and "Summary of AngularJS MVC Architecture"

I hope this article is helpful to everyone's AngularJS programming.