Today I am talking about Dependency Injection (DI) and how to work in AngularJs. Let's start with definition of Dependency Injection.
Definition of DI:
Dependency Injection is a software design pattern in which components are given their dependencies instead of hard coding them within the component. This replace a component from finding the dependency and makes dependencies configurable. This helps in making components reusable, maintainable and testable.
How to DI work with AngularJs:
AngularJS provides a great Dependency Injection mechanism. It provides following list of core components which can be injected into each other as dependencies.
- value
- factory
- service
- provider
- constant
Value
value is simple JavaScript object/var and it is used to pass values to controller during config phase.
//define a module
var mainApp = angular.module("mainApp", []);
//create a value object as "defaultValue" and pass it a value.
mainApp.value("defaultValue", 5);
//inject the value in the controller using its name "defaultValue"
mainApp.controller('MathsFunController', function($scope, defaultValue) {
$scope.number = defaultValue;
});
Factory
factory is a function which is used to return value. It creates value on demand whenever a service or controller requires. It normally uses a factory function to calculate and return the value.
//define a module
var mainApp = angular.module("mainApp", []);
//create a factory "MultiplyService" which provides a method multiply to return multiplication of two numbers
mainApp.factory('MultiplyService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
//inject the factory "MultiplyService" in a service to utilize the multiply method of factory.
mainApp.service('MathService', function(MultiplyService){
this.square = function(a) {
return MultiplyService.multiply(a,a);
}
});
Service
service is a singleton JavaScript object containing a set of functions to perform certain tasks. Services are defined using service() functions and then injected into controllers.
//define a module
var mainApp = angular.module("mainApp", []);
//create a service which defines a method square to return square of a number.
mainApp.service('MathService', function(MultiplyService){
this.square = function(a) {
return MultiplyService.multiply(a,a);
}
});
//inject the service "MathService" into the controller
mainApp.controller('MathsFunController', function($scope, MathService, defaultValue) {
$scope.number = defaultValue;
$scope.result = MathService.square($scope.number);
$scope.square = function() {
$scope.result = MathService.square($scope.number);
}
});
Provider
provider is used by AngularJS internally to create services, factory etc. during config phase. following script can be used to create MultiplyService that I have created earlier.
Provider is a special factory method with a method get() which is used to return the 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('MultiplyService', function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});
Constant
constants are used to pass values at config phase considering the fact that value can not be used to be passed during config phase.
mainApp.constant("configParam", "constant value");
Hope AngularJs lover clear some idea of AngularJs Dependency Injection work with different component and how to inject it.
And I want also discuss regarding
$inject Property but will cover on next blog. So please keep reading and give your suggestions and comments will be highly appreciated.
