Abhängigkeitsinjektionsmechanismus in angleJS
DI ist ein leistungsstarker AngularJS-Mechanismus, der hilft, ein aus einer Bibliothek eines Drittanbieters definiertes Objekt in die Angular-Anwendung einzufügen, das als Element im Array als zweiter Parameter übergeben wird, wenn das AngularJS-Modul instanziiert wird, basierend auf der Art und Weise, wie der Code we Verstehen Sie, dass es hilfreich ist, auf das Bibliotheksobjekt zu verweisen, aber ohne eine direkte Referenzanweisung zu verwenden, ist die Technik, eine Funktion zur Ausführungszeit vom Modul abhängig zu machen, ohne es zu codieren.
Weitere Informationen zur Abhängigkeitsinjektion finden Sie bei Wikipedia: https://en.wikipedia.org/wiki/Dependency_injection
Programmierer können die Anwendung in viele verschiedene Komponenten (Komponente) unterteilen und von einer Komponente zur anderen einfügen. Der Modularisierungsmechanismus in der AngularJS-Anwendung macht es einfach, Komponenten zu konfigurieren, wiederzuverwenden, zu aktualisieren, zu aktualisieren und zu testen. Der integrierte Injektor (standardmäßig injiziertes Objekt) ist für das Erstellen von Komponenten (Komponenten), das Aussortieren von Abhängigkeiten und das Bereitstellen für andere Komponenten bei Bedarf verantwortlich.
Wie bereits erwähnt, macht der Injektionsmechanismus den Code wiederverwendbarer, wenn wir beispielsweise eine Funktion erstellen möchten, die in mehreren verschiedenen Situationen in der Anwendung wiederverwendet werden muss, denken Sie daran, allgemeine Dienste zu definieren und sie wiederzuverwenden, indem Sie sie als Abhängigkeit einfügen .
Einige der Komponenten und Objekte, die angleJS über den Injektionsmechanismus in die Anwendung einfügt:
- Wert
- Anbieter
- Konstante
- Fabrik
- Service
Mục lục
Wert
Dies ist eine Methode des Moduls, die dem Programmierer hilft, ein Objekt (Objekt), eine Zeichenfolge (Zahl) oder eine Zahl (Zahl) zu definieren und sie während der Konfigurationsphase (Bootstrapping-Phase) in den Controller einzufügen. Es wird oft verwendet, um Werte in Server, Controller, Facetory einzufügen.
Siehe das Beispiel unten:
<!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>Ergebnis beim Ausführen des Programms:
Anbieter
AngularJs verwendet die Methode provider(), um während der Konfigurationsphase (beim Starten und Konfigurieren der Anwendung) einen Service oder eine Factory zu erstellen. Ein Provider ist eine separate Factory-Funktion zusammen mit $get() und Rückgabewert, Factory oder Service ( Es ist etwas verwirrend, aber sehen Sie sich das Beispiel an: Es sagt angualrJS, wie man einen injizierbaren Dienst erstellt (das Geschäft ist injizierbar, also definiert der Anbieter den Dienst und wird durch den Dienst erstellt).
Betrachten Sie das folgende Beispiel:
<!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>Dies ist das grundlegendste Beispiel dafür, wie der Anbieter verwendet wird, um injizierbare Dienste in den Controller zu erstellen, wie wir sehen können, kann die Display-Methode von myProvider bereits aufgerufen werden und das myProvider-Objekt wird zur Verwendung in den Controller eingefügt, ähnlich wie bei anderen injizierbare Gegenstände.
Darüber hinaus können wir weiterhin Funktionen über die Methoden app.config(), app.run() definieren (Methoden, die ausgeführt werden, wenn die Anwendungskonfiguration gestartet wird oder die Anwendung ausgeführt wird), dann können Funktionen auch über den Injektionsmechanismus injiziert werden.
Konstante
In angleJS kann die config()-Methode keine Instanz des Dienstes oder den durch die value()-Methode definierten Wert als Parameter übergeben, daher ist es nicht möglich, einen Wert oder eine Entität darin einzufügen. . Es ist jedoch weiterhin möglich, während der Konfiguration eine Konstante als Dienstanbieter einzufügen. Das bedeutet, dass die Konstante hilft, Werte während der Konfiguration zu übergeben, und sie kann auch verwendet werden, während die Anwendung läuft (Laufzeit).)
Beweisen Sie es an einem Beispiel:
<!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>Nach dem Ausführen gibt der Browser einen Fehler aus:
für Konstanten können wir Werte in config() oder run() einfügen, sogar den Wert ändern. Es macht jedoch nicht allzu viel Sinn, da, obwohl der Wert der Konstante in der Konfiguration geändert wurde, die Controller-Schicht und die Daten der Variablen beim Initialisieren immer noch durch den Wert identifiziert werden (Konstante ist eine Konstante, keine Wertänderung. Wert im gesamten Programm) Siehe folgendes Beispiel:
<!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
