AngularJS Dependency Injection: The best feature in Angular JS is the Dependency Injection. It is the software design pattern that objects are passed as dependencies. It also helps to remove difficult coded dependencies and also make dependencies configurable. To make components maintainable, reusable, testable can use dependency injection.
AngularJS Dependency Injection Usage
- To separate the creation process and use of dependencies.
- It helps to create independent development for the dependencies.
- It allows changing dependencies when they are required.
- It also allows injecting the mock objects as dependencies for the testing.
Dependency Components
The following components are injected as dependencies.
Service
In Angular JS, the service is the function or object that is used to specify the behavior of the application and also to share the data. In other words, services are objects that are combined together with DI(Dependency Injection) that helps to store or organize the code in the entire application. The services are specified with service() function and also injected in Controllers, filters, directives, other services also.
Service Example
//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);
}
});
Factory
In Angular JS, the factory is used for return value which creates and holds the value.
Factory Example
//define a module
var mainApp = angular.module("mainApp", []);
//create a factory "MathService" which provides a method multiply to return multiplication of two numbers
mainApp.factory('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);
}
});
Provider
The Angular JS during bootstrapping, the provider is used to create services, factories, etc. The methods “config” and “run” in Angular JS will help to create a function that runs the configuration and run time for the module. Both both functions are injected with dependencies like a factory.
Provider Example
//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
The constant in angular js is used to pass the value at the time of configuration. The constant values are available at run time and used as controller and template.
Constant Example
mainApp.constant("configParam", "constant value");
Value
In angular js, the value is the javascript object that injected to the controller at the config phase.
Value Example
//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);
}
});
AngularJS Dependency Injection Example
<html>
<head>
<title>AngularJS Dependency Injection</title>
</head>
<body>
<h2>AngularJS Dependency Injection Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "CalcController">
<p>Enter a number: <input type = "number" ng-model = "number" /></p>
<button ng-click = "square()">X<sup>2</sup></button>
<p>Result: {{result}}</p>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
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;
};
});
});
mainApp.value("defaultInput", 7);
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);
}
});
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>
Angular JS Dependency Injection Example Output
Summary
Angular JS specifies advanced Dependency Injection Mechanism. The five types in Dependency Injection (Value, Factory, Service, Provider and Constant) can be injected into each other.