Dependency injection:
Dependency injection is a technique in which one subject supplies dependency on another subject. Dependencies are the services or objects that we use. It has its own DI framework in angular and is used in app design to increase its efficiency and modularity. The dependency injection allows you to modify code without changing the class which improves the reusability of code.
To learn more about Dependency injection of Angularjs and other great features of Angularjs , you can enroll for a live demo on Angularjs Online Training
Inversion of control:
Instead of creating objects to create other objects on which they rely to do their work, they create objects from an outside source. The object is not dependent on another object and the primary object is not responsible for creating a depending object. They rather use an external source to create a depending object and give it to the source subject for further usage. In this case, Angularjs is used as an external source.
Take your career to new heights of success with Angular Online Training
Dependency injection in angularjs:
Angularjs has an inbuilt DI(dependency injection) mechanism. It allows you to divide your application into multiple types of components for injecting into each other as dependencies.
There are 5 types of objects and components that can be injected into each other using Angularjs dependency function.
- Value
- Factory
- Service
- Provider
- Constant
In these five objects and components, we use a value component and service component for dependency injection.
if you’re looking for something more beginner friendly, you can check out my introductory course on Angular training
Value:
This component is used to create a javascript and pass it to the controller for further processing.
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>course Registration</title>
</head>
https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js
<body ng-app="sampleApp">
<div ng-controller="AngularJSController">
<h3> Online IT guru </h3>
{{ID}}
</div>
<script>
var sampleApp = angular.module('sampleApp',[]);
sampleApp.value("courseId", 9);
sampleApp.controller('AngularJSController', function($scope,courseID) {
$scope.ID =courseID;
});
</script>
</body>
</html>
After running the code you will get output OnLIne IT guru,9. .The id parameter is displayed and its value is 9
Factory:
The factory is a function used to return value. Value on demand is created whenever a service or controller needs it. It uses factory function to return a value.
var myModule = angular.module("myModule", []);
myModule.factory("myFactory", function() {
return "a value";
});
myModule.controller("MyController", function($scope, myFactory) {
console.log(myFactory);
});Service:
Service is the javascript you expose and inject into your controllers to provide necessary functions
get(),query(),save(),remove(),delete()
Let us look at a simple example of how you can create your own service.
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>course Registration</title>
</head>
https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js
<body>
<h3> onlineIt guru </h3>
<div ng-app = "mainApp" ng-controller = "DemoController">
<p>Result: {{result}}</p>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.service('subtractionService', function(){
this.Subtraction = function(a,b) {
return a-b;
}
});
mainApp.controller('DemoController', function($scope, subtractionService) {
$scope.result = AdditionService. subtraction(10,6);
});
</script>
</body>
</html>Provider:
This function is used internally to create services, factories, etc. Provider is a special function component with get() to return to the service.
//define a module
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
This function is used to index values into module.config().Constants are used for passing values.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Dependency Injection</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "CalcController">
<p>Enter a number: <input type = "number" ng-model = "number" /></p>
<button ng-click = "square()">X<sup>2</sup></button>
<p>Result: {{result}}</p>
</div>
http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js
<script>
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", 10);
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);
}
});
</script>
</body>
</html>Conclusion:
Dependency injection is a process of dependent functionality into modules at runtime. The dependency injection helps in having a more reusable code. The best way in which you can use a reusable code is to define a central service with functionality and then inject service as a dependency in your application modules. The service module can be reused across multiple Angularjs modules.
Biztalk Online Training 