Let me show an application on Dependency Injection.
Dependency Injection is a
software design in which components are given their dependencies instead of
hard coding them within the component.
This relieves a component from locating the
dependency and makes dependencies configurable. This also helps in making
components reusable, maintainable and testable.
Angular JS provides a supreme
Dependency Injection mechanism. It provides following core
components which can be injected into each other as dependencies.
ü Value
ü Factory
ü Service
ü Provider
ü Constant
Value :-
Value is a simple JavaScript object, which is required to
pass values to the controller during config phase (config phase is when
AngularJS bootstraps itself).
Factory:-
Factory is a function which is used to return value. It
creates a value on demand whenever a service or a controller requires it. It
generally uses a factory function to calculate and return the value.
Service:-
Service is a singleton JavaScript object containing a set of
functions to perform certain tasks. Service is defined using service() function
and it is then injected into the controllers.
Provider:-
Provider
is used by AngularJS internally to create services, factory etc. during the
config phase.
Provider
is a special factory method with get() method which can be used to return the
value/service/factory.
Constant:-
Constants
are used to pass values at the config phase considering the fact that value
cannot be used during the config phase.
Let me elaborate the above concepts with a suitable
example:-
main.html:-
<html>
<head>
<title>AngularJS Dependency Injection</title>
</head>
<body>
<h2>AngularJS Dependency Injection
Application</h2>
<div ng-app="mainApp"
ng-controller="CalcController">
<p>Enter a number: <input type="number"
ng-model="number" />
<button
ng-click="square()">X<sup>2</sup></button>
<p>Result: {{result}}</p>
</div>
<script src="angular.min.js">
</script>
<script src="app.js"></script>
<script src="provider.js"></script>
<script src="value.js"></script>
<script src="factory.js"></script>
<script src="service.js"></script>
<script src="controller.js"></script>
</body>
</html>
app.js:-
var mainApp = angular.module("mainApp", []);
controller.js:-
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);
}
});
service.js:-
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
factory.js:-
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
});
provider.js:-
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});
value.js:-
mainApp.value("defaultInput", 1);
Screenshots:-
Explanation:-
Here, initially the value is initialized with “1”. Once, I
change the value, its corresponding square value will be displayed on the
screen.
No comments:
Post a Comment