Home > Developer > Web Develop
In this section we talk about dependency injection in Angularjs, in the actual development of angular provides specific methods for us to call, but once the business can not meet the requirements or the trouble or error caused by the failure, so we need to go into a little bit to understand the internal basic principles, So that we can play the angualr between the applause.
TopicWhen it comes to dependency injection we need to talk about a component decorator (which is called a decorator). It is also an example of creating a service. Decorator is a design mode, it can isolate the changes without modifying the source of the premise. In angular, it can be modified before the service, instruction, and filter are used.
How we should use decorators, we have two ways to register decorators $provide. Decorator and Module.decorator both have a $delegate , This is used to initialize the service, filters, and instructions. We mainly introduce the first method of registering decorators
$provide. DecoratorLet's see how the Log service comes in angular.
angular.module (' myApp ' ' $provide ', function ($provide) {$provide. Decorator ( ' $log ' , [ ' $delegate ' function $logDecorator ($delegate) { var originalwarn = $delegate. Warn; $delegate. Warn = function Decoratedwarn (msg) {msg = ' decorated Warn: ' +Once the log service is initialized, the adorner (decorator) is triggered, and the decorator function has a $delegate object that is injected into the decorator to match the selected service. $delegate is the service object we are decorating, providing the value of the function returned by the decorator instead of the service, filter, directive that is being decorated. Simply put, by decorator we can make the appropriate modifications before the service, filter or instruction is used to satisfy our needs, that is to say, the most primitive way to instantiate the service, we can use this method to patch or rewrite, modify and so on. In the previous series we talked about three ways to create services, and in this section we describe how to register components and inject them to resolve dependencies.
Registering componentsRegister with $provide services such as the following services so that they can be injected to satisfy the dependency. These components are registered through $injector (as you'll see below), and when we request a service, we find the correct service provider through $injector. Initializes the service provider and obtains the service instance by calling the $get factory function. Many of the service methods defined through the $provide service are exposed to angular.module. Here are a few useful ways to define through the $provide service.
| Name | Descriptions |
| Constant (name, value) | Define a constant value |
| Decorator (name, service) | Define a service Decorator |
| Factory (name, service) | Define a service |
| Provider (name, service) | Define a service |
| Service (name, provider) | Define a service |
| Value (name, value) | Define a value service |
As in addition to the decorator is not exposed to angular.module, the reason is presumably: because it is the most primitive method of initializing the service, so in most cases we will not use, unless in a particular case for a specific modification of the purpose we need, so there is no explicit exposure. Here we need to demonstrate next. We add a bit of information to print based on the angular original log service.
The interface code is as follows:<Head> <MetaCharSet= "Utf-8"/> <title>Angular Injection</title> <Linkhref=".. /content/bootstrap.min.css "rel= "stylesheet"/> <Scriptsrc=".. /scripts/angular.min.js "></Script> <Scriptsrc=".. /dependencyinjection/decoration.js "></Script> </Head> <BodyNg-controller= "Indexcontroller"> <Divclass= "Well"> <Buttonclass= "Btn btn-primary"Ng-click= "Handleclick ()">Click me!</Button> </Div> </Body> </HTML>Script code:
varTESTAPP = Angular.module (' testApp '), []); Testapp.controller ("Indexcontroller",function($scope, $log) {$scope. Handleclick=function() {$log. log ("Button Clicked"); }; }). config (function($provide) {$provide. Decorator ("$log",function($delegate) {$delegate. Originallog=$delegate. log; $delegate. Log=function(message) {$delegate. Originallog ("Print with the original decoration method:" +message); } return$delegate; }); });
With the above script we know that we just printed "button Clicked", but we added "print through the original decoration method" before using the log service. Let's look at the effect:
Managing componentsHow do we manage components through $injector to manage components? When we define the components we create, we need to use $injector to get the components we define. It can be obtained such as type, calling method, loading module. Let's take a look at $injector service-related methods:
| Name | Descriptions |
| Annotate (FN) | Gets the parameters for the specified service function, and also includes those parameters that are not communicated to the service |
| Get (name) | Gets the service object that specifies the service name |
| has (name) | Determines whether the service object for the specified service name exists, or False if there is a return true |
| Invoke (FN, self, locals) | Invokes the specified function, using the specified value of the specified function, and the value of the non-service parameter |
$injector Service is the core of the Angularjs service class library, but we seldom do it directly, but it is necessary and useful to understand how ANGULARJS works.
JS is a dynamic and cool language, but there is still a lack of features, such as in the execution of the comments of the action, and in C # we can see through the features, so based on this situation, we have to implement this annotation situation.
We just need to modify the controller code as follows:
Testapp.controller ("Indexcontroller",function($scope, $log, $injector) {varCounter = 0; varLogclick =function($log, $exceptionHandler, message) {if(Counter = = 0{$log. log (message); Counter++; } Else{$exceptionHandler ("Already clicked"); }} $scope. Handleclick=function () { varDeps =$injector. Annotate (Logclick);//annotate method to obtain the parameters of the Logclick function for(vari = 0; i < deps.length; i++) {Console.log ("Dependency:" +Deps[i]); } }; })
Get the service and parameters of our Logclick function injection as follows:
Get Service via InjectorTo get the root element of the $injector service, we continue to modify the controller code as follows:
Testapp.controller ("Indexcontroller",function($scope, $log, $rootElement) {varCounter = 0; varLogclick =function($log, $exceptionHandler, message) {if(Counter = = 0{$log. log (message); Counter++; } Else{$exceptionHandler ("No more clicks, no more explosions, man!" "); }} $scope. Handleclick=function () { varLocalvars = {message: "First click" }; $rootElement. Injector (). Invoke (Logclick, NULL , localvars); }; })
$injector vs Inject (continued) Summary
Today we're going to talk about this, rest!
Angularjs's Dependency Injection (Fri)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
