Hello folks! welcome back to a new edition of our tutorial on AngularJS. In this tutorial, we're going to be studying about AngularJS Dependency Injection.
Dependency Injection is an software design pattern in which components are given their dependencies instead of coding them within the component. It relieve a component from finding dependency and make dependencies configurable. This design pattern also helps to make components reusable, maintainable and testable.
AngularJS provides a supreme Dependency Injection mechanism. It gives the following core objects and components which can be injected into each other as dependencies.
Dependency Injection is an software design pattern in which components are given their dependencies instead of coding them within the component. It relieve a component from finding dependency and make dependencies configurable. This design pattern also helps to make components reusable, maintainable and testable.
AngularJS provides a supreme Dependency Injection mechanism. It gives the following core objects and components which can be injected into each other as dependencies.
- Value
- Factory
- Service
- Provider
- Constant
READ: AngularJS | Services
Value
Value is a simple JavaScript object, needed to pass values to the controller during config phase (the config phase is when AngularJS bootstraps itself).
//define a module var mainApp = angular.module("mainApp", []); //create a value object as "defaultInput" and pass it a data. mainApp.value("defaultInput", 5); ... //inject the value in the controller using its name "defaultInput" 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); } });
Factory
It is a function which returns value. It create a value on demand each time a service or a controller requires it. It generally makes use of a factory function to calculate and return the value.
//define a module var mainApp = angular.module("mainApp", []); //create a factory "MathService" which provides a method multiply to return multiplication of two numbers mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory; }); //inject the factory "MathService" in a service to utilize the multiply method of factory. mainApp.service('CalcService', function(MathService) { this.square = function(a) { return MathService.multiply(a,a); } }); ...
Service
Service is a singleton JavaScript object that holds a set of functions to carry out certain tasks. Service is defined using the service() function and then injected into controllers.
//define a module var mainApp = angular.module("mainApp", []); ... //create a service which defines a method square to return square of a number. mainApp.service('CalcService', function(MathService) { this.square = function(a) { return MathService.multiply(a,a); } }); //inject the service "CalcService" into the controller 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); } });
READ: AngularJS | Scopes
Provider
Provider is used internally by AngularJS for creating services, factory, and so on. during config phase. Following script below can be used to create MathService that we created earlier. Provider is a special factory method with get() method which is used in returning the value/service/factory.
//define a module var mainApp = angular.module("mainApp", []); ... //create a service using provider which defines a method square to return square of a number. mainApp.config(function($provide) { $provide.provider('MathService', function() { this.$get = function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }; }); });
Constant
Constants are used to pass values at config phase considering the fact that values can't be used during the config phase.
mainApp.constant("configParam", "constant value");
Example
The following example below illustrates the use of all the above mentioned directives -
Create a file testAngularJS.html.
Create a file testAngularJS.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> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script> <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", 5); 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>
Output
Open the file testAngularJS.html in any web browser to see the result -
AngularJS Sample Application
Enter a number:
Result: 25
READ: AngularJS | Forms
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we are going to be studying about AngularJS Custom Directives.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.