2.3 Understanding Angularjs Modules and Dependency Injection

1. Module and Dependency Injection Overview 1. Understanding Modules

The Angularjs module is a container that isolates code and organizes it into simple, neat, reusable blocks.

The module itself does not provide direct functionality: an instance of an object that contains other functions: Controller, filter, service, animation

You can build a module by defining the object it provides. Connect modules together with dependency injection to build a complete application.

The ANGULARJS is built on the principle of the module. Most of the features provided by ANGULARJS are built into the ng-* module.

2. Dependency Injection

Define the dependent object and inject it dynamically into another object, making all of the functions provided by the dependent objects available to you. (Provider Injector Service)

Provider: How to create an instance of an object with all the necessary functionality (part of the module), and a module to register the provider with the injector's server. (A provider object creates only one instance)

Injector Service: An instance of the trace provider object. (Provider module-Injector service instance)

2. Define the Angularjs module

ANGULARJS Module Implementation: Configuration phase, run phase

1. Create a Angularjs Module object

Create a Module object, register to the injector service, and return the newly created module instance (implementing the functionality of the provider)

var myapp=angular.module (NAME,[REQUIRES],[CONFIGFN]);

Name: Register names in the injector service

Requires: An array of module names that are added to the injector service for use by this module, and if a function of another module needs to be added to the requires list (the NG module is added by default)

CONFIGFN: Another function called by the module configuration phase

var mymodule=angular.module (' MyModule ', [' $Window ', ' $http '],function () {   $provide. Value (' myvalue ', ' Some value ') ); })

If there is no requires (dependency), the module object is not created, and the instance that was created is returned (overwriting the definition of the above instance)

var mymodule2=angular.module (' MyModule ', []);

Returns the above instance, no dependencies are listed

var mymodule3=angular.module (' MyModule ');

2. Using the configuration block

After being defined, execute the module configuration. Any provider is registered to the dependency injector.

Injectable: Provider service functions, such as $provide

Config (Funciton ([injectable,...]))

The $provide and $filterprovider services are transferred to the CONFIG function. (Register the value provider named StartTime and the filter provider named Myfilter to the injector service)

var mymodule=angular.module (' MyModule ', []) Mymodule.config (function ($provide, $filterProvider) {   $ Provide.value ("StartTime", New Date ());   $filterProvider. Register (' Myfilter ', function () {});    })    

3. Using the Run block

Configuration is complete, you can perform the run phase of the Angularjs module.

You cannot implement any provider code in a running block. (The entire module has been configured to register to the dependency injector)

Run (function ([injectable,...]))

Injectable is just an injector instance.

Mymodule.run (function (startTime) {   starttime.settime (new Date ()). GetTime ());})

Dedicated Angularjs object provider (except for config () (with the corresponding Animation Controller filter directive object definition)

1. Animation (name,animationfactory)
2. Controller (Name,controlfactory)
3. Filter (Name,filterfactory)
4. Directive (name,directivefactory)

Basic controllers: Angularjs has built-in controller objects and knows that all controller objects must accept one scope object as the first parameter

var mod=angular.module (' Mymod ', []); Mod.controller (' Nycontroller ', function ($scope) {   $scope. somevalue= ' Somevalue '; })

Service Provider

is a unique type of provider (no existing specific format), providing functionality as a service.

1. Value (name,object): Most basic, the object parameter is simply assigned to name, so there is a direct relationship between the name value and the object in the injector
2. Constant (Name,object): Similar to value, but value cannot be changed.
3. Factory (Name,factoryfunction): Constructs an object that will be supplied via the injector with the Factoryfunction parameter
4. Service (name,servicefactory): Added more object-oriented methods
5. Provider (name,providerfactory): The core of all other methods

Basic example: (Define constant value provider, the values defined in the method are registered in the injector server of the Mymod module, accessed by name)

var mod=angular.module (' Mymod ', []); Mod.constant ("ID", "ABC"); Mod.value (' Couter ', 0); Mod.value (' image ', {name: ') Box.jpg ', height:12,width:20});

4. Implementing Dependency Injection

Once the module and the corresponding provider are defined. You can add the module as a dependency of other modules, controllers, and other various Angularjs objects ($jnject property values that depend on the provider's object)

var mycontroller=function ($scope, appmsg) {  $scope. message=appmsg;  }; controller[' $inject ']=[' $scope ', ' appmsg '];myapp.mycontroller (' Controllera ', Controller);//The second expression Myapp.control (' Controllera ', [' $scope ', ' appmsg ', function ($scope, appmsg) {   $scope. message=appmsg;}])

Jnjector.js: Implementing dependency Injection in Controller and module definitions

2.3 Understanding Angularjs Modules and Dependency Injection