AngularJS Custom Directives AngularJS Services (Service)

AngularJS Dependency Injection

Dependency injection is a software design that provides dependencies to components rather than hardcoding them. It allows components not to search for dependencies and makes dependencies configurable. It also helps to make components reusable, maintainable, and testable.

AngularJS provides the highest level of dependency injection mechanism. It provides the following core components, which can be injected as dependencies.

Value
Factory
Service
Provider
Constant

Value - Value

Value is a simple JavaScript object that needs to be passed to the controller during the configuration phase (the configuration phase is when AngularJS initializes itself).

//Define the module
var mainApp = angular.module("mainApp", []);
//Create a value object as 'defaultInput' and pass it data. 'defaultInput' and pass it a data.
mainApp.value("defaultInput",　5);
...
//Inject the value with the name 'defaultInput' into the controller '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 - Factory

Factory is a function used to return values. Whenever a service or controller needs a value, it creates the value on demand. It usually uses Factory functions to calculate and return values.

//Define the module
var mainApp = angular.module("mainApp", []);
//Create a factory 'MathService' that provides a multiplication method to return the product of two numbers
mainApp.factory('MathService', function() {
　　　var factory = {};
　　　
　　　factory.multiply = function(a, b) {
　　　　　　return a　*　b
　　　}
　　　return factory;
});　
//Inject the factory 'MathService' into the service to utilize the multiplication method of the factory.
mainApp.service('CalcService', function(MathService) {
　　　this.square = function(a) {
　　　　　　return MathService.multiply(a, a);
　　　}
});
...

Service - Service

Service (Service) is a singleton JavaScript object that contains a set of functions to perform certain tasks. Useservice()Define the service and then inject it into the controller.

//Define the module
var mainApp = angular.module("mainApp", []);
...
//Create a service that defines a method to return the square of a number.
mainApp.service('CalcService', function(MathService) {
　　　this.square = function(a) {
　　　　　　return MathService.multiply(a, a);　
　　　}
});
//injects the service "CalcService" into the controller "CalcService"
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

AngularJS internally uses providers to create services, factories, etc., at the configuration stage. The following script can be used to create the MathService we created earlier. A provider is a special factory method thatget()methods are used to return value/service/factory.

//Define the module
var mainApp = angular.module("mainApp", []);
...
//A service is created using a provider that defines a method to return the 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

Constants are used to pass values at the configuration stage, as values cannot be used at this stage.

mainApp.constant("configParam", "constant value");

Online Example

The following example demonstrates the use of all the above directives-

testAngularJS.htm

Example

<html>
　　　<head>
　　　　　　<title>AngularJS Dependency Injection</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS-Dependency Injection Application Example</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://cdn.staticfile.org/angular.js/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>

Test and See‹/›

Output Results

You can also open it in a web browsertestAngularJS.htmand view the results.