Dependency Injection ist ein Software-Entwurfsmuster, das angibt, wie Komponenten ihre Abhängigkeiten erfassen. Die Komponenten erhalten ihre Abhängigkeiten, anstatt sie fest zu codieren. Wiederverwendbarkeit und Wartbarkeit können durch Verwendung der Abhängigkeitsinjektion erreicht werden. Supreme Dependency Injection in kann durch die folgenden Komponenten durchgeführt werden:
Wertabhängigkeitsinjektion
Ein einfaches Objekt in AngularJs wird als Wert bezeichnet. Es kann eine Zeichenfolge, eine Zahl oder sogar ein JavaScript-Objekt sein. Es kann verwendet werden, um Werte in Fabriken, Diensten oder Controllern während der Ausführungs- und Konfigurationsphase zu übergeben.
Beispiel:
// ein Modul definieren
var firstModule = angle.module ('firstModule', [])
// ein Wertobjekt erstellen und Daten an dieses übergeben
firstModule.value ('numberValue', 50)
firstModule.value ('stringValue', 'xyz')
firstModule.value ('objectValue', {val1: 456, val2: 'xyz'})
In diesem Beispiel werden Werte mit der Funktion value () definiert. Der Name des Werts wird durch den ersten Parameter angegeben, und der zweite Parameter gibt den Wert an. Dadurch können die Fabriken, Dienste und Controller diese Werte anhand ihres Namens selbst referenzieren.
Einspritzen eines Wertes
Wir können einen Wert in die AngularJs-Controller-Funktion einfügen, indem wir einen Parameter mit demselben Namen wie der Wert hinzufügen.
Beispiel:
var firstModule = angle.module ('firstModule', [])
firstModule.value ('numberValue', 18)
firstModule.controller ('FirstController', Funktion ($ scope, numberValue) {
console.log (numberValue)
})
Werksinjektion
Eine Funktion, die Werte erzeugt, wird als Factory bezeichnet. Ein Wert bei Bedarf wird von der Fabrik erstellt, wenn ein Dienst oder eine Steuerung einen Wert benötigt, der von der Fabrik eingespeist wird. Sobald der Wert erstellt wurde, wird er für alle Dienste und Controller wiederverwendet.
Es verwendet die Factory-Funktion, um den Wert zu berechnen und zurückzugeben.
Beispiel:
var firstModule = angle.module ('firstModule', [])
firstModule.factory ('firstFactory', function () {
'a value' zurückgeben
})
firstModule.controller ('FirstController', Funktion ($ scope, firstFactory) {
console.log (firstFactory)
})
Werte in die Fabrik einspritzen
Ein Wert kann auf folgende Weise in die Fabrik eingespeist werden:
var firstModule = angle.module ('firstModule', [])
firstModule.value ('numberValue', 29)
firstModule.controller ('FirstController', Funktion ($ scope, numberValue) {
console.log (numberValue)
})
Es ist zu beachten, dass der WertDie von der Werksfunktion erzeugte Funktion wird eingespritzt, nicht die Werksfunktion selbst. Fahren wir mit diesem Artikel zur Abhängigkeitsinjektion in AngularJs fort.
Service-Injektion in AngularJs
Ein Singleton-JavaScript-Objekt, das eine Reihe von Funktionen enthält, wird in AngularJs als Dienst bezeichnet. Die für die Ausführung des Dienstes erforderliche Logik ist in der Funktion enthalten. Der Dienst kann mithilfe der Funktion service () auf einem Modul erstellt werden.
Beispiel:
// ein Modul definieren
var firstApp = angle.module ('firstApp', [])
...
// einen Dienst erstellen, der eine Methode definiert Quadrat, um das Quadrat einer Zahl zurückzugeben
firstApp.service ('CalciService', Funktion (MathService) {
this.square = Funktion (x) {
Rückgabe MathService.multiply (x, x)
}}
})
// Injizieren Sie den Service 'CalciService' in die Steuerung
firstApp.controller ('CalciController', Funktion ($ scope, CalciService,
defaultInput) {
wie man einen String in Java in ein Datum konvertiert
$ scope.number = defaultInput
$ scope.result = CalciService.square ($ scope.number)
$ scope.square = function () {
$ scope.result = CalciService.square ($ scope.number)
}}
})
Anbieter
Um während der Konfigurationsphase intern Dienste oder Factory zu erstellen, verwenden wir Provider. Provider ist eine spezielle Factory-Methode mit einer get () -Funktion, mit der der Wert / service / factory zurückgegeben wird.
Beispiel:
// ein Modul definieren
var firstApp = angle.module ('firstApp', [])
...
// einen Dienst mit dem Provider erstellen, der ein Methodenquadrat definiert, um das zurückzugeben
Quadrat einer Zahl.
firstApp.config (Funktion ($ bereitstellen) {
$ liefern.provider ('MathService', function () {
this. $ get = function () {
var factory =
factory.multiply = Funktion (x, y) {
Rückgabe x * y
}}
Werksrückgabe
}}
})
})
Konstante
Da der Benutzer keine Werte in die Funktion module.config () einfügen kann, verwenden wir Konstanten. Konstanten werden verwendet, um Werte in der Konfigurationsphase zu übergeben.
firstApp.constant ('configParam', 'konstanter Wert')
Beispiel:
Die oben genannten Richtlinien können folgendermaßen verwendet werden:
Abhängigkeitsspritze
wie man einen Iterator benutzt
AngularJS-Quadrierungsbeispiel
Geben Sie eine beliebige Nummer ein:
X.2
Ergebnis: {{Ergebnis}}
var firstApp = angle.module ('firstApp', [])
firstApp.config (Funktion ($ bereitstellen) {
$ liefern.provider ('MathService', function () {
this. $ get = function () {
var factory =
factory.multiply = Funktion (x, y) {
Rückgabe x * y
}}
Werksrückgabe
}}
})
})
firstApp.value ('defaultInput', 6)
firstApp.factory ('MathService', function () {
var factory =
factory.multiply = Funktion (x, y) {
Rückgabe x * y
}}
Werksrückgabe
})
firstApp.service ('CalciService', Funktion (MathService) {
this.square = Funktion (x) {
Rückgabe MathService.multiply (x, x)
}}
})
firstApp.controller ('CalciController', Funktion ($ scope, CalciService, defaultInput) {
$ scope.number = defaultInput
$ scope.result = CalciService.square ($ scope.number)
$ scope.square = function () {
$ scope.result = CalciService.square ($ scope.number)
}}
})
AUSGABE:
Damit sind wir am Ende dieses Artikels über die Abhängigkeitsinjektion in AngularJs angelangt. C. verdammt noch mal von Edureka, einem vertrauenswürdigen Online-Lernunternehmen mit einem Netzwerk von mehr als 250.000 zufriedenen Lernenden auf der ganzen Welt.
Hast du eine Frage an uns? Bitte erwähnen Sie es im Kommentarbereich dieser Abhängigkeitsinjektion in AngularJs und wir werden uns bei Ihnen melden.