YouTipAngularjs Dependency Injection
## AngularJS Dependency Injection
* * *
## What is Dependency Injection
The explanation on wiki is: Dependency Injection (DI) is a software design pattern in which one or more dependencies (or services) are injected (or passed by reference) into a dependent object (or client), and then become part of the client's state.
This pattern separates the creation of the client's dependent behavior itself, which makes program design loosely coupled, and follows the dependency inversion and single responsibility principles. In direct contrast to the service locator pattern, it allows the client to know how the client uses the system to find dependencies
> In one sentence --- Don't come to me if there's nothing going on, I'll come to you if there is.
AngularJS provides a good dependency injection mechanism. The following 5 core components are used for dependency injection:
* value
* factory
* service
* provider
* constant
* * *
## value
Value is a simple javascript object used to pass values to controllers (configuration stage):
// Define a module
var mainApp = angular.module("mainApp", []);
// Create a value object "defaultInput" and pass data
mainApp.value("defaultInput", 5);
...
// Inject "defaultInput" into 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 values. It is created when needed by service and controller.
Usually we use factory function to calculate or return values.
// Define a module
var mainApp = angular.module("mainApp", []);
// Create factory "MathService" 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 factory "MathService" in service
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
...
* * *
## provider
In AngularJS, provider is used to create a service, factory, etc. (configuration stage).
Provider provides a factory method get(), which is used to return value/service/factory.
// Define a module
var mainApp = angular.module("mainApp", []);
...
// Use provider to create service, define a method to calculate product of two numbers
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 is used to pass values during the configuration stage. Note that this constant is not available during the configuration stage.
mainApp.constant("configParam", "constant value");
* * *
## Examples
The following examples demonstrate the above dependency injection mechanisms.
## AngularJS Example - factory
var mainApp = angular.module("mainApp", []);
mainApp.value("defaultInput", 5);
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);
}
});
[Try it »](#)
## AngularJS Example - provider
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", 5);
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);
}
});
[Try it »](#)