Meccanismo di iniezione delle dipendenze in angularJS
DI è un potente meccanismo angularJS, aiuta a iniettare un oggetto definito da una libreria di terze parti nell'applicazione angolare, che viene passato come elemento nell'array come secondo parametro quando si crea un'istanza del modulo angularJS, in base al modo in cui il codice abbiamo capire, aiuta a fare riferimento all'oggetto della libreria ma senza usare l'istruzione di riferimento diretto, è la tecnica per far dipendere una funzione dal modulo al momento dell'esecuzione senza codificarlo. .
Vedi di più sull'iniezione di dipendenza su wikipedia: https://en.wikipedia.org/wiki/Dependency_injection
I programmatori possono dividere l'applicazione in molti componenti diversi (componente) e possono iniettare da un componente all'altro, il meccanismo di modularizzazione nell'applicazione angularJS rende facile configurare, riutilizzare, aggiornare Aggiornare e testare i componenti. L'iniettore integrato (oggetto iniettato predefinito) sarà responsabile della creazione di componenti (componenti), dell'ordinamento delle dipendenze e della loro fornitura ad altri componenti quando richiesto.
Come accennato, il meccanismo di injection rende il codice più riutilizzabile, ad esempio se vogliamo creare una funzionalità che deve essere riutilizzata in diverse situazioni dell'applicazione, pensare a definire un business servizi comuni e riutilizzarli iniettandoli come dipendenza .
Alcuni dei componenti e degli oggetti che angularJS inietta nell'applicazione attraverso il meccanismo di iniezione:
- valore
- Fornitore
- Costante
- Fabbrica
- Servizio
Mục lục
Valore
Questo è un metodo del modulo, aiuta il programmatore a definire un oggetto (oggetto), una stringa (numero) o un numero (numero) e iniettarli nel controllore durante la fase di configurazione (fase di avvio). . Viene spesso utilizzato per iniettare valori in server, controller, facetory.
Vedi l'esempio qui sotto:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dependency injection</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> </div> </body> <script> var myApp = angular.module('myApp', []); myApp.value("number",10); myApp.value("string","Hello"); myApp.value("object",{name:"Nguyen Van A",age:20}); myApp.value("array",["Nguyen Van A","Nguyen Van B","Nguyen Van C"]); myApp.controller('myController', function($scope,number,string,object,array){ $scope.number = number; $scope.string = string; $scope.object = object; $scope.array = array; console.log($scope.number); console.log($scope.string); console.log($scope.object); console.log($scope.array); }); </script> </html>Risultato durante l'esecuzione del programma:
Fornitore
AngularJs utilizza il metodo provider() per creare un servizio o una factory durante la fase di configurazione (quando si inizia ad avviare e configurare l'applicazione), un provider è una funzione factory separata insieme a $ get() e restituisce un valore, una factory o un servizio ( è un po' confuso, ma guarda l'esempio: dice ad angualrJS come creare un servizio iniettabile (l'attività è iniettabile, quindi il provider definisce il servizio e viene creato tramite il servizio) builtin è $provide
Considera l'esempio seguente:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example Provide</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myCtrl"> <button ng-click="DisplayProvider()" ng-disabled="flag">Display</button> <div ng-bind="ProviderOutput"></div> </div> </body> <script> var app = angular.module('myApp', []); app.provider("myProvider", function () { this.$get = function () { return { Display: function () { return "Display from services"; } }; }; }); app.controller('myCtrl', function ($scope, myProvider) { $scope.ProviderOutput = "Provider outoput"; $scope.DisplayProvider = function () { $scope.flag = true; $scope.ProviderOutput = myProvider.Display(); } }); </script> </html>Questo è l'esempio più semplice di come utilizzare un provider per creare servizi iniettabili nel controller, come possiamo vedere, il metodo Display di myProvider può già essere chiamato e l'oggetto myProvider viene iniettato nel controller per l'uso, simile a altri oggetti iniettabili.
Inoltre, possiamo ancora definire le funzioni tramite i metodi app.config(), app.run() (metodi che verranno eseguiti all'avvio della configurazione dell'applicazione o all'avvio dell'applicazione), quindi anche le funzioni sono iniettabili tramite il meccanismo di injection.
Costante
In angularJS, il metodo config() non può passare un'istanza del servizio o il valore definito tramite il metodo value() come parametro, quindi non è possibile iniettarvi un valore o un'entità. . Tuttavia, è ancora possibile iniettare una costante come fornitore di servizi durante la configurazione. Ciò significa che la costante aiuta a passare i valori durante la configurazione e può essere utilizzata anche mentre l'applicazione è in esecuzione (tempo di esecuzione).)
Dimostralo attraverso un esempio:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dependency injection</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> </div> </body> <script> var myApp = angular.module('myApp', []); myApp.value("testnumber",100); myApp.config(function($provide,testnumber){ console.log(testnumber); }); myApp.controller('myController', function($scope,testnumber){ }); </script> </html>Dopo l'esecuzione, il browser restituisce un errore:
per costante, possiamo iniettare valore in config() o run(), anche cambiare il valore. Tuttavia, non ha molto senso perché anche se il valore della costante è stato modificato nella configurazione, il livello del controller e i dati della variabile sono ancora identificati dal valore durante l'inizializzazione (la costante è una costante, nessun cambiamento di valore. valore in tutto il programma) Vedere l'esempio seguente:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dependency injection</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> {{testnumber}} </div> </body> <script> var myApp = angular.module('myApp', []); myApp.constant("testnumber",100); myApp.config(function($provide,testnumber){ console.log($provide); testnumber = 1000; console.log(testnumber); }); myApp.controller('myController', function($scope,testnumber){ $scope.testnumber = testnumber; }); </script> </html> Bài viết liên quan:
Dịch vụ thiết kế Wesbite
