Implementieren der Abhängigkeitsinjektion in AngularJs



Mit diesem Artikel erhalten Sie detaillierte und umfassende Kenntnisse zur Implementierung der Abhängigkeitsinjektion in AngularJs.

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:

Abhängigkeitsinjektion in Winkeljs

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.