AngularJS Dependency Injection
Dependency
Injection is software design pattern where your application can be divide into
multiple different types of components that can be injected into each other as
dependencies.
AngularJS
provides a supreme Dependency Injection mechanism.
Dependency
injection allows you to specify only what you need in your controller, factory,
service, etc.
It
provides following core components which can be injected into each other as
dependencies.
- factory
- value
- constant
- service
- provider
1.
factory – This function which
returns value on demand when a service or controller needed.
Syntax: module.factory(
'factoryName', function );
<script>
var myApp = angular.module('myApp', []);
myApp.factory('messFactory', function () {
var successMessage = function () {
return 'Success message';
};
var alretMessage =
function () {
return 'Alert message';
};
var warningMessage
= function () {
return 'Warning message';
};
return {
alretMessage:
alretMessage,
warningMessage:
warningMessage,
successMessage:
successMessage
};
});
</script>
You can inject factory to controller as below code.
<script>
app.controller('empController', ['$scope', 'messFactory', function ($scope,
messFactory) {
$scope.message =
messFactory.successMessage() + ' , ' + messFactory.alretMessage() + ' , ' +
messFactory.warningMessage();
}]);
</script>
2.
value – It is a JavaScript object
and used in config phase to passes values to controller.
<script>
var myApp = angular.module("myApp", []);
myApp.value("DefalutAge", 18);
//inject the value into the
controller
myModule.controller("EmpController", function ($scope, DefalutAge) {
$scope.Age =
DefalutAge
});
</script>
3. Constant – constants is used
during config phase to passes values.
mainApp.constant("constantName", "constant value");
4. service
– It is a singleton object and defined by service() function that have lots of
functions to execute specific tasks.
Syntax: module.service(
'serviceName', function );
<script>
//define a module
var myApp = angular.module("myApp", []);
...
//create a service which defines a method square to return square
of a number.
myApp.service('CalculationService', function(){
this.square = function(a) {
return a*a;
};
});
</script>
You can inject service to controller as below code.
<script>
//inject the service "CalcService" into the controller
var myApp = angular.module("myApp", []);
myApp.controller('CalcController', function($scope, CalculationService) {
$scope.square = function(number) {
$scope.result =
CalculationService.square($scope.number);
}
});
</script>
5. provider – provider is used
during config phase to create services, factory etc.It is used with get()
function to return the value/service/factory.It is used to create factory,
service etc.
Syntax: module.provider( 'providerName', function );
Example:
<script>
var myApp = angular.module("myApp", []);
myApp.config(function ($provide) {
$provide.provider('CalculationService', function () {
this.$get = function () {
var factory = {};
factory.addition = function (a, b) {
return a + b;
};
factory.Substraction = function (a, b) {
return a - b;
};
factory.multiply = function (a, b) {
return a * b;
};
factory.divide = function (a, b) {
return a/b;
};
return factory;
};
});
});
</script>
No comments:
Post a Comment
Note: only a member of this blog may post a comment.