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)
- Animation (name,animationfactory)
- Controller (Name,controlfactory)
- Filter (Name,filterfactory)
- 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.
- 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
- Constant (Name,object): Similar to value, but value cannot be changed.
- Factory (Name,factoryfunction): Constructs an object that will be supplied via the injector with the Factoryfunction parameter
- Service (name,servicefactory): Added more object-oriented methods
- 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