AngularJS - Dependency Injection
Dependency Injection è un progetto software in cui ai componenti vengono assegnate le loro dipendenze invece di codificarli come hardcoded all'interno del componente. Solleva un componente dall'individuazione della dipendenza e rende le dipendenze configurabili. Aiuta anche a rendere i componenti riutilizzabili, manutenibili e testabili.
AngularJS fornisce un meccanismo di iniezione delle dipendenze supremo. Fornisce i seguenti componenti principali che possono essere iniettati l'uno nell'altro come dipendenze.
- Value
- Factory
- Service
- Provider
- Constant
Valore
Value è un semplice oggetto JavaScript, necessario per passare valori al controller durante la fase di configurazione (la fase di configurazione è quando AngularJS si avvia da solo).
//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);
}
});
Fabbrica
Factory è una funzione che viene utilizzata per restituire valore. Crea un valore su richiesta ogni volta che un servizio o un controller lo richiede. In genere utilizza una funzione di fabbrica per calcolare e restituire il valore.
//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);
}
});
...
Servizio
Il servizio è un oggetto JavaScript singleton contenente un insieme di funzioni per eseguire determinate attività. Il servizio viene definito utilizzando la funzione service () e viene quindi iniettato nei controller.
//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);
}
});
Provider
Il provider viene utilizzato da AngularJS internamente per creare servizi, fabbrica, ecc. Durante la fase di configurazione. Il seguente script può essere utilizzato per creare MathService che abbiamo creato in precedenza. Il provider è un metodo factory speciale con il metodo get () che viene utilizzato per restituire il valore / servizio / fabbrica.
//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;
};
});
});
Costante
Le costanti vengono utilizzate per passare i valori nella fase di configurazione considerando il fatto che il valore non può essere utilizzato durante la fase di configurazione.
mainApp.constant("configParam", "constant value");
Esempio
L'esempio seguente mostra l'uso di tutte le direttive sopra menzionate -
testAngularJS.htm
<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>
Produzione
Apri testAngularJS.htm in un browser web e guarda il risultato.