AngularJS 依赖注入

L'iniezione di dipendenze è una progettazione software in cui ai componenti vengono fornite dipendenze, piuttosto che essere codificate duramente nei componenti. Questo permette ai componenti di non cercare le dipendenze e rende le dipendenze configurabili. Aiuta anche a rendere i componenti riutilizzabili, mantenibili e testabili.

AngularJS fornisce un meccanismo di iniezione di dipendenze di livello superiore. Fornisce i seguenti componenti core, che possono essere iniettati come dipendenze l'uno nell'altro.

• Valore

• Fabbrica

• Servizio

• Provider

• Constante

Value - Valore

Il valore è un semplice oggetto JavaScript che, durante la fase di configurazione (la fase di configurazione è quando AngularJS guida se stesso), deve essere passato ai controller.

//Definire il modulo
var mainApp = angular.module("mainApp", []);
//Creare un oggetto valore come "defaultInput" e passargli i dati. "defaultInput" e passargli un dati.
mainApp.value("defaultInput", 5);
...
//Iniettare il valore tramite il nome "defaultInput" nel 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 - Fabbrica

La fabbrica è una funzione che restituisce valori. Ogni volta che il servizio o il controller ne ha bisogno, viene creata dinamicamente. Di solito, la funzione fabbrica viene utilizzata per calcolare e restituire valori.

//Definire il modulo
var mainApp = angular.module("mainApp", []);
//Creare una fabbrica "MathService" che fornisce un metodo di moltiplicazione per restituire il prodotto di due numeri.
mainApp.factory('MathService', function() {
　　　var factory = {};
　　　
　　　factory.multiply = function(a, b) {
　　　　　　return a * b
　　　}
　　　return factory;
});　
//Iniettare nel servizio la fabbrica "MathService" per utilizzare il metodo moltiplicazione della fabbrica.
mainApp.service('CalcService', function(MathService) {
　　　this.square = function(a) {
　　　　　　return MathService.multiply(a, a);
　　　}
});
...

Service - Servizio

Il servizio (Service) è un oggetto JavaScript singleton che contiene una serie di funzionalità per eseguire alcune operazioni. Utilizzaservice()Definire il servizio e iniettarlo nel controller.

//Definire il modulo
var mainApp = angular.module("mainApp", []);
...
//Creare un servizio che definisce un metodo per restituire il quadrato di un numero.
mainApp.service('CalcService', function(MathService) {
　　　this.square = function(a) {
　　　　　　return MathService.multiply(a, a);　
　　　}
});
//Iniettare il servizio "CalcService" nel 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 utilizza internamente i provider per creare servizi, factory e altri durante la fase di configurazione. Lo script seguente può essere utilizzato per creare il MathService che abbiamo creato prima. Il provider è un metodo di fabbrica speciale, il cuiget()I metodi vengono utilizzati per restituire value/service/factory.

//Definire il modulo
var mainApp = angular.module("mainApp", []);
...
//Creare un servizio utilizzando il provider, che definisce un metodo quadrato per restituire il quadrato del numero.
mainApp.config(function($provide) {
　　　$provide.provider('MathService', function() {
　　　　　　this.$get = function() {
　　　　　　　　　var factory = {};　　
　　　　　　　　　
　　　　　　　　　factory.multiply = function(a, b) {
　　　　　　　　　　　　return a * b;　
　　　　　　　　　}
　　　　　　　　　return factory;
　　　　　　});
　　　});
});

Costante - Costante

Tenendo conto del fatto che non è possibile utilizzare valori durante la fase di configurazione, le costanti vengono utilizzate per passare valori durante la fase di configurazione.

mainApp.constant("configParam", "valore costante");

Esempio online

Il seguente esempio mostra l'uso di tutte le istruzioni menzionate sopra-

testAngularJS.htm

<html>
　　　<head>
　　　　　　<title>AngularJS Dipendenza Iniezione</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>Esempio di applicazione di iniezione di dipendenze AngularJS</h2>
　　　　　　
　　　　　　<div ng-app="mainApp" ng-controller="CalcController">
　　　　　　　　　<p>Inserisci un numero: <input type="number" ng-model="number" /></p>
　　　　　　　　　<button ng-click="square()">X<sup>2</sup></button>
　　　　　　　　　<p>Risultato: {{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>

输出结果

也可以在网络浏览器中打开testAngularJS.htm并查看结果。