(7) understand the module and injector in angular, that is, dependency injection.

The benefits of dependency injection (DI) are no longer described in detail. Anyone who has used the Spring framework knows the benefits. Angularjs, as a front-end JS framework, also provides di support, which is a feature not available in Javascript/jquery. In angularjs, there are di-related angular. Module (), angular. injector (), $ injector, and $ provide. A di container must have three elements: Service Registration, dependency declaration, and object acquisition. For example, in spring, service registration is implemented through the <bean> tag or annotation @ repository, @ service, @ controller, and @ component in the XML configuration file. The collection of objects can be applicationcontext. getbean () implementation; Dependency declaration, which can be configured in the XML file or declared in Java code using annotations such as @ resource. In angular, module and $ provide are equivalent to service registration; injector is used to obtain objects (angular automatically completes dependency injection); there are three ways to declare dependency in angular. The following describes the DI of angular from these three aspects.

1. Angular. Module () creates, obtains, and registers modules in angular.

TheAngular. Module ()Is a global place for creating, registering and retrieving angular modules. when passed two or more arguments, a new module is created. if passed only one argument, an existing module (the name passed as the first argumentModule) Is retrieved.

// 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块var createModule = angular.module("myModule", []);// 只有一个参数(模块名),代表获取模块// 如果模块不存在,angular框架会抛异常var getModule = angular.module("myModule");// true,都是同一个模块alert(createModule == getModule);

This function can be used to create a new module or obtain an existing module. It can be distinguished by the number of parameters.

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

Name: string type, which indicates the module name;

Requires: A String Array that represents the list of other modules that the module depends on. If it does not depend on other modules, use an empty array;

Configfn: used to configure the module.

Now we know how to create and retrieve modules. What is the module? There is only one sentence on the official developer guide: you can think of a module as a container for the different parts of your app-controllers, services, filters, directives, etc. I still don't quite understand it yet, that is, the module is a collection of functions, such as controllers, services, filters, commands, and other sub-elements. I can't explain it now.

2. Relationship between $ provide and modules

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

Previously mentioned: module and provide are used to register services in injector. View the official API. You can see that $ provide provides provide (), constant (), value (), factory (), and service () to create services of different natures. angular. module also provides these five service registration methods. In fact, the two functions are exactly the same, that is, they are used to register services to injector with DI containers.

In the official API, Auto has $ provide and $ injector, and implicit module which gets automatically added to each $ injector. Literally, each injector has these two implicit services. However, in version 1.2.25, it seems that there is no way to obtain $ provide in injector. I don't know why? Generally, you do not need to use this service. simply use the API provided in the module.

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

3. Angular. injector ()

Angular. injector (); can also be used to obtain the injector, but it is not bound to the module. This method is meaningless, so you have created an empty di container, which does not serve others. The correct method is to specify the module to be loaded when creating the injector.

// 创建myModule模块、注册服务var myModule = angular.module('myModule', []);myModule.service('myService', function() {this.my = 0;});// 创建herModule模块、注册服务var herModule = angular.module('herModule', []);herModule.service('herService', function() {this.her = 1;});// 加载了2个模块中的服务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 mymoudle is loaded, the injector cannot access the services under hermoudle. Here Note: Angular. injector () can be called multiple times, and the newly created injector object is returned each time. .

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

4. Three dependency declaration methods in angular

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

// 创建myModule模块、注册服务var myModule = angular.module('myModule', []);myModule.service('myService', function() {this.my = 0;});// 获取injectorvar injector = angular.injector(["myModule"]);// 第一种inferenceinjector.invoke(function(myService){alert(myService.my);});// 第二种annotationfunction explicit(serviceA) {alert(serviceA.my);};explicit.$inject = ['myService'];injector.invoke(explicit);// 第三种inlineinjector.invoke(['myService', function(serviceA){alert(serviceA.my);}]);

In the annotation and inline modes, it is recommended that function parameter names be not required. In the inference mode, the parameter names must be consistent with service names. If JavaScript code is compressed or obfuscated, we recommend that you do not use this method.

(7) understand the module and injector in angular, that is, dependency injection.