ANGULARJS-dependent injection and simple example _angularjs

Angularjs Dependency Injection

What is Dependency injection

The explanation on the wiki is that dependency injection (Dependency injection, referred to as DI) is a software design pattern in which one or more dependencies (or services) are injected (or passed by reference) to a separate object (or client). Then it becomes part of the client state.
This pattern separates the client from the creation of its own behavior, which makes programming loosely coupled and follows dependency inversion and a single duty principle. In direct contrast to the service locator pattern, it allows the client to understand how the client uses the system to find dependencies

A word---All right you don't come to me, something I will come to you.

Angularjs provides a good dependency injection mechanism. The following 5 core components are used as dependency injection:

Value
Factory
Service
Provider
constant

Value

Value is a simple JavaScript object that is used to pass values to the controller (configuration phase):

var Mainapp = angular.module ("Mainapp", []);

Create the Value object "Defaultinput" and pass the data
mainapp.value ("Defaultinput", 5);
...

Inject "defaultinput" 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);
  }
});

Factory

Factory is a function used to return a value. Created when service and controller are needed.
Usually we use the factory function to calculate or return a value.

Defines a module
var mainapp = angular.module ("Mainapp", []);

Create Factory "MathService" for the product of two numbers provides a method multiply to return multiplication of two numbers
(' MathService ', function () {
  var factory = {};
  
  Factory.multiply = function (A, b) {return
   A * b
  } return
  factory;
}); 

Inject factory "MathService" Mainapp.service in service
(' Calcservice ', function (mathservice) {
  This.square = function (a) {return
   mathservice.multiply (a,a);
  }
});
...

Provider

In Angularjs, create a service, factory, etc. through provider (configuration phase).

Provider provides a factory method get (), which is used to return value/service/factory.

Defines a module
var mainapp = angular.module ("Mainapp", []);
...

Creating a service using provider defines a method for calculating the two-number product
mainapp.config (function ($provide) {
  $provide. Provider (' MathService ' , function () {this
   . $get = function () {
     var factory = {}; 
     
     Factory.multiply = function (A, b) {return
      a * b; 
     }
     Return factory};});

constant

Constant (constants) are used to pass values in the configuration phase, and note that this constant is not available in the configuration phase.

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

Instance

The following examples provide a demonstration of the above several dependency injection mechanisms.

Run Result:

The above is to ANGULARJS dependency injection data collation, follow-up continue to add, hope to help develop Angularjs friend.