Angularjs Dependency Injection and sample code _ANGULARJS

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
var mainapp = 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
var mainapp = angular.module ("Mainapp", []);
Create a factory "MathService" which provides a method multiply to return multiplication of two numbers
Ory (' MathService ', function () {   
  var factory = {}; 
  Factory.multiply = function (A, b) {return
   A * b 
  } return
  factory;
}); 

Inject the factory "MathService" in a service to utilize the multiply method of factory.
Mainapp.service (' Calcservice ', function (mathservice) {
   this.square = function (a) { 
   return Mathservice.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
var mainapp = 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) { 
   return Mathservice.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
var mainapp = 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 () {
     var factory = {}; 
     Factory.multiply = function (A, b) {return
      a * b; 
     }
     Return factory};});

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

Results

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

The above is to Angularjs dependency injection of data collation, follow-up continue to supplement the relevant information, thank you for your support of this site!