Die Abhängigkeitsinjektion ist ein Software -Design -Muster in einer Komponente, die die Codierung ihrer Abhängigkeiten innerhalb einer harten Komponente ersetzt. Dies reduziert eine Komponente aus Positionierungsabhängigkeiten, Abhängigkeitskonfiguration. Dies hilft, Komponenten wiederverwendbar, gewartet und getestet zu machen.
AngularJS liefert einen Injektionsmechanismus der höchsten Abhängigkeit. Es bietet eine injizierbare Kernkomponente, die voneinander abhängt.
Wert
Fabrik
Aufschlag
Anbieter
Stets
Wert
Werte sind einfache JavaScript -Objekte, die zum Übergeben von Werten während der Konfigurationsphase -Controller verwendet werden.
// Definieren Sie einen Modulevar mainApp = angular.module ("mainApp", []); // Erstellen Sie ein Wertobjekt als "defaultInput" und übergeben Sie es mit einem Daten.Mainapp.value ("DefaultInput", 5); {$ scope.number = defaultInput;Fabrik
Die Fabrik wird verwendet, um den Wert der Funktion zurückzugeben. Es schafft Wert entsprechend der Nachfrage, wenn ein Dienst oder ein Controller ihn benötigt. In der Regel wird eine Werksfunktion verwendet, um den entsprechenden Wert zu berechnen und zurückzugeben
// Definieren Sie einen Modulevar mainApp = angular.module ("mainApp", []); // Erstellen Sie eine Fabrik "mathService", die eine Methode multipliziert, um die Multiplikation von zwei ZahlenMainApp.Factory ('MathService', function () {variable factory = {}; // Injizieren Sie die Fabrik "mathService" in einen Dienst, um die Multiply -Methode von fabrik zu verwenden.Aufschlag
Ein Dienst ist ein einzelnes JavaScript, das eine Reihe von Funktionsobjekten enthält, um bestimmte Aufgaben auszuführen. Der Dienst verwendet die Funktion Service () und injiziert in die Definition des Controllers.
// Definieren Sie einen Modulevar mainApp = angular.module ("mainApp", []); ... // einen Dienst erstellen, der ein Methodsquadrat definiert, um das Quadrat einer Zahl zurückzugeben. Der Controllermainapp.Controller ('Calccontroller', Funktion ($ scope, calcService, defaultInput) {$ scope.number = DefaultInput; $ scope.result = calcService.square ($ scope.number); }});Anbieter
Der Anbieter verwendet den Dienst, die Fabrik usw. während der Konfigurationsphase des internen Erstellungsprozesses von AngularJs (wie während des AngularJS -Bootes selbst). Die unten genannten Skripte können zum Erstellen verwendet werden. Wir haben MathService im Voraus erstellt. Der Anbieter ist eine spezielle Fabrikmethode und GET () -Methode, um Wert/Dienst/Fabrik zurückzugeben.
// Definieren Sie einen Modulevar mainApp = angular.module ("mainApp", []); ... // einen Dienst mit Anbieter erstellen, der ein Methode -Quadrat für das Quadrat einer Nummer zurückgibt. {return a * b;Konstante
Konstanten werden verwendet, um die Fakten durch Konfigurieren von Phasenwerten zu berücksichtigen. Werte können während der Konfigurationsphase nicht übergeben werden.
mainApp.constant ("configParam", "konstanter Wert");
Beispiel
Die folgenden Beispiele zeigen alle oben genannten Anweisungen.
testangularJs.html
<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" /> <button ng-klick = "square ()"> x <sup> 2 </sup> </button> <p> Ergebnis: {{result}} </p> </div> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js.js" Angular.module ("MainApp", []); mainApp.config (Funktion ($ bereitgestellt) {$ ciplipt.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', Funktion ($ scope, calcService, defaultInput) {$ scope.number = defaultInput; $ scope.result = calcService.square ($ scope.number); </script> </body> </html>Ergebnis
Öffnen Sie TextangularJs.html in einem Webbrowser. Die Ergebnisse sind wie folgt.
Das obige ist die Sammlung von Informationen für die AngularJS -Abhängigkeitsinjektion. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!