AngularJS Dependency Injection

The dependency injection (DI) in angularjs is an important application design pattern. The dependency injection implements inversion of control for resolving dependencies and also it is a software design pattern. AngularJS provides a supreme dependency injection mechanism. AngularJS contains the following core types of objects and components:

1. Value
2. Factory
3. Service
4. Provider
5. Constant

Value

The value is a simple javascript object. A value in a AngularJS is a simple object. It can be a string, numberor JavaScript object. It passes values to controller config phase. This is implemented using the below two steps

Step 1: Create a JavaScript object by using the value component and attach it to your main AngularJS.JS module.

Step 2: Access the JavaScript object from the Angular.JS controller

	
		
		
	
	
	
		

			
 Event Registration
			{{ID}}
		
		
	

In the above code example, the below main steps are being carried out

1.

sampleApp.value("regId", 5); 

The value function of the Angular.JS JS module is being used to create a key-value pair calledb “regId” and the value of “5”.

2.

sampleApp.controller('controllerapp', function($scope,regId) 

The regId variable now becomes accessible to the controller as a function parameter.

3.

$scope.ID =regId;

The value of regId which is 5, is now being assigned to another variable called ID in the $scope object. This is being done so that value of 5 can be passed from the controller to the view.

4.

{{ID}}

The ID parameter is being displayed in the view as an expression. So the output of ‘5’ will be displayed on the page.

Service

Service is a singleton javascript object containing a set of functions to perform certain tasks. It is defined by service() function.

var mainApp = angular.module("mainApp", []);
mainApp.service('regIdService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a); 
   }
});
mainApp.controller('regIdController', function($scope, regIdService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = regIdService.square($scope.number);
   
   $scope.square = function() {
      $scope.result = regIdService.square($scope.number);
   }
});

Constant

constants passes values at config phase considering the fact that value cannot be used to be passed during config phase.

mainApp.constant("configParam", "constant value");

Factory

It is a function which returns value. It produces value on demand when a service or controller needed.

var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
    var factory = {};
    factory.multiply = function(a, b) {
      return a * b
    }
   return factory;
}); 
mainApp.service('CalcService', function(MathService){
	this.square = function(a) {
      return MathService.multiply(a,a);
	}
});

Provider

It is used to create factory, service etc. in config phase.

	var mainApp = angular.module("mainApp", []);
	mainApp.config(function($provide) {
		$provide.provider('MathService', function() {
			this.$get = function() {
				var factory = {};          
				factory.multiply = function(a, b) {
					return a * b; 
				}
				return factory;
			};
		});
	});