Dependency injection
Dependency injection is a technique where one object is supplied dependencies of another object .Instead of hard coding ,object is given dependencies of another object .In this pattern, object are given their dependencies instead of coding them within the object, Injection is passing of dependency to a dependent object .This helps a service reusable, maintainable and testable,easily understandable.
Output :
factory
A function , that return value is Factory. When called ,service or value injected from factory.Below is the example of factory.
"myFactory" is a factory that return a string .Below is the full example.
Example 1
service
Service is nothing but Javascript object to perform a list of work.Below is the example of creating service.
A service 'myServices' defined , that return factorial of the number.The service is pass to the controller.
provider
provider is used by AngularJS internally to create services, factory etc.
Example
constant
Constants are used to pass values at config phase.
Example
Dependency injection is a technique where one object is supplied dependencies of another object .Instead of hard coding ,object is given dependencies of another object .In this pattern, object are given their dependencies instead of coding them within the object, Injection is passing of dependency to a dependent object .This helps a service reusable, maintainable and testable,easily understandable.
AngularJS support Dependency injection.The following type of dependency injection are possible in AngularJS.
- value
- factory
- service
- provider
- constant
These objects and components can be injected into each other using AngularJS Dependency Injection.
value
A value can be number ,string ,decimal, object ect . value can be passed to factories,services,controllers during runtime .Below are the sample code of value dependency injection.
var
app = angular.module("myApp",
[]);
app.value("myNumber",
100);
app.value("myString",
"Hellow
World");
app.value("myDecimal",
12.59);
app.value("myObject",
{ name: "name
1",
age: 18 });
value are defined by value(). First parameter is name of the parameter , second is value.It is like key value pair,reference of this value can be passed to Factories,services,controllers.
Example 1 (Passing of number through dependency injection)
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.value("myNumber",
100);
app.controller('myController',
function
($scope, myNumber) {
$scope.ShowValue
= function
()
{
return
$scope.xNumber = myNumber;
};
});
</script>
<div
ng-app="myApp"
ng-controller="myController">
<button
ng-click="ShowValue()">
Show
Value</button>
</br>
Your Result </br>
Number :{{xNumber}}
</div>
Example 2 (Passing of object through dependency injection)
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.value("myObject",
{ name: "name
1",
age: 18 });
app.controller('myController',
function
($scope, myObject) {
$scope.ShowValue
= function
()
{
return
$scope.xObject = myObject;
};
});
</script>
<div
ng-app="myApp"
ng-controller="myController">
<button
ng-click="ShowValue()">
Show
Value</button>
</br>
Your Result </br>
Name :{{xObject.name}}</br>Age
:{{xObject.age}}
</div>
factory
A function , that return value is Factory. When called ,service or value injected from factory.Below is the example of factory.
var
app = angular.module("myApp",
[]);
app.factory("myFactory",
function
() {
return
"Hellow
, Wolrd.";
});
"myFactory" is a factory that return a string .Below is the full example.
Example 1
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.factory("myFactory",
function
()
{
return
"Hellow
, Wolrd.";
});
app.controller('myController',
function
($scope, myFactory)
{
$scope.ShowValue
= function
()
{
return
$scope.xObject = myFactory;
};
});
</script>
<div
ng-app="myApp"
ng-controller="myController">
<button
ng-click="ShowValue()">
Show
Value</button>
</br>
Your Result </br>
Name :{{xObject}}
</div>
Output :
service
Service is nothing but Javascript object to perform a list of work.Below is the example of creating service.
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app
= angular.module("myApp",
[]);
app.service('myServices',
function
($http)
{
this.factorial
= function
(num)
{
var
rval
= 1;
for
(var
i
= 2; i <= num; i++)
rval
= rval * i;
return
rval
}
});
app.controller("myCtroller",
function
($scope,
myServices)
{
$scope.DoPart
= function
()
{
$scope.getresult
= myServices.factorial($scope.DelIndex);
}
});
</script>
<div
ng-app="myApp"
ng-controller="myCtroller"
>
Factorial
Calculation
<input
type="text"
ng-model="DelIndex">
<button
type="button"
ng-click="DoPart($scope.DelIndex)">
Click
Me to </button>
Result
: {{getresult }}
</div>
Output :
provider
provider is used by AngularJS internally to create services, factory etc.
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.constant("MyConstant",
"Here
is constant value");
app.config(function
($provide)
{
$provide.provider('MathService',
function
()
{
this.$get
= function
()
{
return
"Hellow
World";
};
});
});
app.controller("myCtroller",
function
($scope, MathService)
{
$scope.xMyConstant
= MathService;
});
</script>
<div
ng-app="myApp"
ng-controller="myCtroller"
>
Result
: {{xMyConstant }}
</div>
Output :
Result : Hellow World
constant
Constants are used to pass values at config phase.
Example
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.constant("MyConstant",
"Here
is constant value");
app.controller("myCtroller",
function
($scope, MyConstant)
{
$scope.xMyConstant
= MyConstant;
});
</script>
<div
ng-app="myApp"
ng-controller="myCtroller"
>
Result
: {{xMyConstant }}
</div>
Output :
Result : Here is constant value
No comments:
Post a Comment