AngularJS-Abhängigkeitsinjektion: Welche Komponenten wurden injiziert?

Was ist Abhängigkeitsinjektion in AngularJS?

Abhängigkeitsspritze in AngularJS ist ein Software-Entwurfsmuster, das die Umkehrung der Kontrolle zum Auflösen von Abhängigkeiten implementiert. Es entscheidet, wie Komponenten ihre Abhängigkeiten halten. Es kann beim Definieren der Komponenten oder beim Bereitstellen von Ausführungs- und Konfigurationsblöcken des Moduls verwendet werden. Es ermöglicht Ihnen, die Komponenten wiederverwendbar, testbar und wartbar zu machen.

Umkehrung der Kontrolle: Das bedeutet, dass Objekte keine anderen Objekte erstellen, auf die sie bei der Ausführung ihrer Arbeit angewiesen sind. Stattdessen beziehen sie diese Objekte von einer externen Quelle. Dies bildet die Grundlage der AngularJS-Abhängigkeitsinjektion, bei der ein Objekt von einem anderen abhängig ist; Das primäre Objekt übernimmt nicht die Verantwortung für die Erstellung des abhängigen Objekts und die anschließende Verwendung seiner Methoden. Stattdessen erstellt eine externe Quelle (die in AngularJS das AngularJS-Framework selbst ist) das abhängige Objekt und übergibt es dem Quellobjekt zur weiteren Verwendung.

Lassen Sie uns zunächst verstehen, was eine Abhängigkeit ist.

Das obige Diagramm zeigt ein einfaches AngularJS-Abhängigkeitsinjektionsbeispiel für ein alltägliches Ritual in der Datenbankprogrammierung.

Das Feld „Modell“ stellt die „Modellklasse“ dar, die normalerweise für die Interaktion mit der Datenbank erstellt wird. Die Datenbank ist also eine Abhängigkeit für die Funktion der „Modellklasse“.
Durch Abhängigkeitsinjektion erstellen wir einen Dienst, um alle Informationen aus der Datenbank abzurufen und in die Modellklasse zu gelangen.

Im weiteren Verlauf dieses Tutorials werden wir uns näher mit der Abhängigkeitsinjektion und deren Umsetzung in AngularJS befassen.

Welche Komponente kann als Abhängigkeit in AngularJS eingefügt werden?

In Angular.JS werden Abhängigkeiten mithilfe einer „injizierbaren Factory-Methode“ oder einer „Konstruktorfunktion“ eingefügt.

Diese Komponenten können mit „Service“- und „Value“-Komponenten als Abhängigkeiten injiziert werden. Wir haben dies in einem früheren Thema mit dem $http-Dienst gesehen.

Wir haben bereits gesehen, dass der $http-Dienst in AngularJS verwendet werden kann, um Daten von a abzurufen MySQL oder MS SQL Serverdatenbank über a PHP Internetanwendung.

Der $http-Dienst wird normalerweise innerhalb des Controllers wie folgt definiert.

sampleApp.controller ('AngularJSController', function ($scope, $http)

Nun ist der $http-Dienst wie oben gezeigt im Controller definiert. Dies bedeutet, dass der Controller jetzt vom $http-Dienst abhängig ist.

Wenn der obige Code ausgeführt wird, führt AngularJS die folgenden Schritte aus:

Überprüfen Sie, ob der „$http-Dienst“ instanziiert wurde. Da unser „Controller“ nun auf den „$http-Dienst“ angewiesen ist, muss unserem Controller ein Objekt dieses Dienstes zur Verfügung gestellt werden.
Wenn AngularJS feststellt, dass der $http-Dienst nicht instanziiert ist, verwendet AngularJS die Funktion „factory“, um ein $http-Objekt zu erstellen.
Der Injektor in Angular.JS stellt unserem Controller dann eine Instanz des $http-Dienstes zur weiteren Verarbeitung bereit.

Nachdem die Abhängigkeit nun in unseren Controller eingefügt wurde, können wir nun die erforderlichen Funktionen innerhalb des $http-Dienstes zur weiteren Verarbeitung aufrufen.

Beispiel für eine Abhängigkeitsinjektion

In diesem Beispiel lernen wir, wie man die Abhängigkeitsinjektion in AngularJS verwendet.

Die Abhängigkeitsinjektion kann auf zwei Arten implementiert werden

Einer davon ist die „Wertkomponente“.
Eine andere Möglichkeit besteht in einem „Service“.

Schauen wir uns die Umsetzung beider Wege genauer an.

1) Wertkomponente

Dieses Konzept basiert auf der Tatsache, ein einfaches zu erstellen JavaSkript Widerspruch einlegen und zur weiteren Verarbeitung an den Verantwortlichen übergeben.

Dies wird mit den folgenden zwei Schritten implementiert

Schritt 1) Erstellen Sie JavaErstellen Sie ein Skriptobjekt mithilfe der Wertkomponente und hängen Sie es an Ihr Hauptmodul AngularJS.JS an.

Die Wertkomponente nimmt zwei Parameter an; Einer ist der Schlüssel und der andere ist der Wert des erstellten Javascript-Objekts.

Schritt 2) Besuchen Sie das JavaScriptobjekt aus dem Angular.JS-Controller

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="sampleApp">

<div ng-controller="AngularJSController">
    <h3> Guru99 Global Event</h3>
    {{ID}}
</div>
<script>

    var sampleApp = angular.module('sampleApp',[]);
    sampleApp.value("TutorialID", 5);
    sampleApp.controller('AngularJSController', function($scope,TutorialID) {
        $scope.ID =TutorialID;
    });

</script>
</body>
</html>

Im obigen Codebeispiel werden die folgenden Hauptschritte ausgeführt

```
sampleApp.value("TutorialID", 5);
```

Die Wertfunktion des JS-Moduls Angular.JS wird verwendet, um ein Schlüssel-Wert-Paar namens „TutorialID“ und den Wert „5“ zu erstellen.

sampleApp.controller('AngularJSController', function ($scope,TutorialID)

Die TutorialID-Variable ist nun für den Controller als Funktionsparameter zugänglich.

```
 $scope.ID =TutorialID;
```

Der Wert von TutorialID, der 5 ist, wird jetzt einer anderen Variablen namens ID im $scope-Objekt zugewiesen. Dies geschieht, damit der Wert 5 vom Controller an die Ansicht übergeben werden kann.

```
{{ID}}
```

Der ID-Parameter wird in der Ansicht als Ausdruck angezeigt. Daher wird auf der Seite die Ausgabe „5“ angezeigt.

Wenn der obige Code ausgeführt wird, wird die Ausgabe wie folgt angezeigt

2) Dienst

Der Dienst ist als Singleton definiert JavaSkriptobjekt, das aus einer Reihe von Funktionen besteht, die Sie in Ihrem Controller verfügbar machen und einfügen möchten.

Beispielsweise ist „$http“ ein Dienst in Angular.JS, der, wenn er in Ihre Controller eingefügt wird, die erforderlichen Funktionen bereitstellt

( get() , query() , save() , remove(), delete() ).

Diese Funktionen können dann entsprechend von Ihrem Controller aufgerufen werden.

Sehen wir uns ein einfaches Beispiel an, wie Sie Ihren eigenen Dienst erstellen können. Wir werden einen einfachen Additionsdienst erstellen, der zwei Zahlen addiert.

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h3> Guru99 Global Event</h3>

<div ng-app = "mainApp" ng-controller = "DemoController">
    <p>Result: {{result}}</p>
</div>
<script>
    var mainApp = angular.module("mainApp", []);

    mainApp.service('AdditionService', function(){
        this.ADDITION = function(a,b) {
            return a+b;
        }
    });

    mainApp.controller('DemoController', function($scope, AdditionService) {

            $scope.result = AdditionService.ADDITION(5,6);
    });
</script>

</body>
</html>

Im obigen Beispiel werden die folgenden Schritte ausgeführt

 mainApp.service('AdditionService', function()

Hier erstellen wir einen neuen Dienst namens „AdditionService“ unter Verwendung des Dienstparameters unseres Haupt-AngularJS-JS-Moduls.

```
 this.Addition = function(a,b)
```

Hier erstellen wir eine neue Funktion namens Addition innerhalb unseres Dienstes. Das bedeutet, dass wir auf die Funktion „Addition“ zugreifen können, wenn AngularJS unseren AdditionService in unserem Controller instanziiert. In dieser Funktionsdefinition sagen wir, dass diese Funktion zwei Parameter akzeptiert, a und b.

```
 return a+b;
```

Hier definieren wir den Hauptteil unserer Additionsfunktion, die einfach die Parameter hinzufügt und den Mehrwert zurückgibt.

 mainApp.controller('DemoController', function($scope, AdditionService)

Dies ist der Hauptschritt, der die Abhängigkeitsinjektion beinhaltet. In unserer Controller-Definition verweisen wir jetzt auf unseren Dienst „AdditionService“. Wenn AngularJS dies sieht, instanziiert es ein Objekt vom Typ „AdditionService“.

 $scope.result = AdditionService.Addition(5,6);

Wir greifen nun auf die Funktion „Addition“ zu, die in unserem Service definiert ist, und weisen sie dem $scope-Objekt des Controllers zu.

Dies ist also ein einfaches Beispiel dafür, wie wir unseren Dienst definieren und die Funktionalität dieses Dienstes in unseren Controller integrieren können.

Zusammenfassung

Wie der Name schon sagt, handelt es sich bei der Abhängigkeitsinjektion um den Prozess der Injektion abhängiger Funktionalität in Module zur Laufzeit.
Die Verwendung der Abhängigkeitsinjektion trägt dazu bei, einen wiederverwendbareren Code zu erhalten. Wenn Sie über eine gemeinsame Funktionalität verfügen, die in mehreren Anwendungsmodulen verwendet wird, ist es am besten, einen zentralen Dienst mit dieser Funktionalität zu definieren und diesen Dienst dann als Abhängigkeit in Ihre Anwendungsmodule einzufügen.
Das Value-Objekt von AngularJS kann verwendet werden, um einfache JavaSkriptobjekte in Ihrem Controller mit $inject in AngularJS.
Mit dem Servicemodul können Sie Ihre benutzerdefinierten Services definieren, die in mehreren AngularJS-Modulen wiederverwendet werden können.

Du magst vielleicht: