AngularJs comes with built in dependency injection
mechanisms. It allows a programmer to break an application into sub-parts and
allow to use these sub-parts into each other as dependency.
Dependency Injection is basically a software design
pattern in which components are given their dependencies instead to hard
cording them within the components. Dependency Injection allows the programmer
to re-use the previous code into current program i.e. Reusability.
These are the following components that can be
injected to each other as dependency.
·
Value
·
Service
·
Factory
·
Provider
·
Constant
Value:
In AngularJs value is a simple object. It can
be a number, string or any JavaScript object. It is used to pass the values to
controller during config phase.
Example
var app = angular.module("myApp", []);
app.value("MyValue", 1993); //
"MyValue is the name of the value and second
arguement (1993) is the actual value"
app.controller("MyController", function ($scope, MyValue) {
alert(MyValue);
});
Factory: In Angular Js Factory is a function that is
used to return a value. Whenever a service or controller requires a value the
factory creates a value on demand.
Example
var mainApp = angular.module("mainApp", []);
//create a
factory "MyService" which provides a method product to return
multiplication of two numbers
mainApp.factory(MyService, function () {
var factory = {};
factory.product = function (a, b) {
return a * b
}
return factory;
});
//inject the
factory "MyService" in a service to utilize the multiply method of
factory.
mainApp.service(MyService, function (MyService) {
this.square = function (a) {
return MyService.product (a, a);
}
});
Service: In AngularJs Service is a JavaScript object
which contain a set of function to perform certain tasks. Services are in
AngularJs are objects that can be used to share and organize code across the
application.
Example
var mainApp = angular.module("mainApp", []);
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);
}
});
Provider: In AngularJs provider is used to create
services, factory etc internally during config phase (phase during which
AngularJs bootstraps itslef).
Example
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;
};
});
});
Constants: We can’t inject values into module.config()
function. Instead constants are used to pass values at config() phase.
No comments:
Post a Comment