Home > Developer > AngularJS

The dependency injection mechanism in detailed ANGULARJS

Source: Internet
Author: User
Tags constant min
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞


This article mainly introduces the dependency injection mechanism in the detailed angularjs, which plays a very important role in the use of the JavaScript components, and the friends who need it can refer to



Dependency Injection is a software design pattern given in a component that replaces the dependencies of a hard component to encode them. This eases one component, from locating dependencies, to relying on configuration. This helps to make components reusable, maintainable, and tested.



Angularjs provides a paramount dependency injection mechanism. It provides one of the following core components that can be injected to each other.



Value



Factory



Service



Provided by



Constant value



Value



A value is a simple JavaScript object that is used to transfer the value of a configuration phase controller in the process.




//define a module
varmainApp = angular.module("mainApp", []);
//create a value object as "defaultInput" and pass it a data.
mainApp.value("defaultInput", 5);
...
//inject the value in the controller using its name "defaultInput"
mainApp.controller('CalcController',function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);
 
   $scope.square =function() {
   $scope.result = CalcService.square($scope.number);
  }
});



Factory



The factory is the value that is used to return the function. It creates values based on requirements whenever a service or controller is needed. It usually uses a factory function to compute and return the corresponding value




//define a module
varmainApp = angular.module("mainApp", []);
//create a factory "MathService" which provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService',function() {  
  varfactory = {};
  factory.multiply =function(a, b) {
   returna * b
  }
  returnfactory;
});
 
//inject the factory "MathService" in a service to utilize the multiply method of factory.
mainApp.service('CalcService',function(MathService){
   this.square =function(a) {
   returnMathService.multiply(a,a);
  }
});
...



Service



A service is a single JavaScript that contains a set of function objects to perform certain tasks. Services use the service () function, which is then injected into the definition of the controller.




//define a module
varmainApp = angular.module("mainApp", []);
...
//create a service which defines a method square to return square of a number.
mainApp.service('CalcService',function(MathService){
   this.square =function(a) {
   returnMathService.multiply(a,a);
  }
});
//inject the service "CalcService" into the controller
mainApp.controller('CalcController',function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);
 
   $scope.square =function() {
   $scope.result = CalcService.square($scope.number);
  }
});



Provided by



The provider uses the ANGULARJS internal creation process during the configuration phase of the service, the factory, and so on (phase angularjs to boot itself). The script mentioned below can be used to create the mathservice that we have created before. The provider is a special factory method and a Get () method to return a value/service/factory.




//define a module
varmainApp = angular.module("mainApp", []);
...
//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
  $provide.provider('MathService',function() {
   this.$get =function() {
     varfactory = {};
     factory.multiply =function(a, b) {
      returna * b;
     }
     returnfactory;
   };
  });
});



Constant



Constants are used to consider facts by configuring the phase value, and the value cannot be passed during the configuration phase of the period.




Mainapp.constant ("Configparam", "constant value");


Example



The following example shows all of the above instructions.



Testangularjs.html



<html>
<head>
  <title>AngularJS Dependency Injection</title>
</head>
<body>
  <h2>AngularJS Sample Application</h2>
  <div ng-app="mainApp"ng-controller="CalcController">
   <p>Enter a number: <input type="number"ng-model="number"/>
   <button ng-click="square()">X<sup>2</sup></button>
   <p>Result: {{result}}</p>
  </div>
  <script>
   varmainApp = angular.module("mainApp", []);
   
   mainApp.config(function($provide) {
     $provide.provider('MathService',function() {
      this.$get =function() {
        varfactory = {};
        factory.multiply =function(a, b) {
         returna * b;
        }
        returnfactory;
      };
     });
   });
 
   mainApp.value("defaultInput", 5);
 
   mainApp.factory('MathService',function() {  
     varfactory = {};
     factory.multiply =function(a, b) {
      returna * b;
     }
     returnfactory;
   });
 
   mainApp.service('CalcService',function(MathService){
      this.square =function(a) {
      returnMathService.multiply(a,a);
     }
   });
 
   mainApp.controller('CalcController',function($scope, CalcService, defaultInput) {
      $scope.number = defaultInput;
      $scope.result = CalcService.square($scope.number);
 
      $scope.square =function() {
      $scope.result = CalcService.square($scope.number);
     }
   });
  </script>
</body>
</html>



Results



Open textangularjs.html in a Web browser. See the results below.


This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
dependency injection php dependency chart in excel deep linking in angularjs components in angularjs dom in angularjs learn angularjs in day custom directive in angularjs
Related Article
Angularjs Upload picture preview __js
angularjs-the Reading and assignment of global variables thro...
Different Web pages are set by Ui-router in Angularjs
The magical function of the Angularjs self-executing function
Angularjs $state. Go page does not refresh data __js
Angularjs Post Request header field Content-type is not allow...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More