AngularJS Dependency Injection-Komponenten

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.

⚠️ Versionshinweis: Die Unterstützung für AngularJS wurde im Januar 2022 eingestellt., ohne Sicherheitspatches. Modernes Angular injiziert über @Injectable-Provider und injizieren()Der unten stehende Code bleibt historisch.

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 eingehender mit Dependency Injection und deren Umsetzung befassen. AngularJS.

Welche Komponente kann in AngularJS als Abhängigkeit injiziert werden?

In AngularJS werden Abhängigkeiten mithilfe einer „injizierbaren Factory-Methode“ oder einer „Konstruktorfunktion“ injiziert.

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.

Ein AngularJS Modulen Registriert injizierbare Objekte über fünf Rezepte.

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:

1. Ü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.
2. Wenn AngularJS feststellt, dass der $http-Dienst nicht instanziiert ist, verwendet AngularJS die Funktion „factory“, um ein $http-Objekt zu erstellen.
3. Der Injector innerhalb von AngularJS stellt unserem Controller dann eine Instanz des $http-Dienstes zur weiteren Verarbeitung bereit.

Annotationsformulare: Implizite Annotation Das Lesen von Parameternamen wird durch die Minifizierung beeinträchtigt. Inline-Array-Notation und `$inject` funktionieren weiterhin; `ng-strict-di` auf `ng-app` lehnt implizite Annotationen ab.

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

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

Schauen wir uns die Umsetzung beider Wege genauer an.

1) Wertkomponente

Dieses Konzept basiert auf der Erstellung eines einfachen JavaSkript das Objekt und übergibt es dem Controller zur weiteren Verarbeitung.

Dies wird mit den folgenden zwei Schritten implementiert

Schritt 1) Erstellen Sie JavaErstellen Sie ein Skriptobjekt mithilfe der Wertkomponente und fügen Sie es Ihrem Haupt-AngularJS-Modul hinzu.

Die Wertkomponente benötigt zwei Parameter; einen Schlüssel und den Wert des JavaDas erstellte Skriptobjekt.

Schritt 2) Besuchen Sie das JavaScriptobjekt aus dem AngularJS-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>

Der obige Code führt die folgenden Schritte aus

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

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

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

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

3.  $scope.ID =TutorialID;

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

4. {{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 AngularJS, der, wenn er in Ihre Controller eingebunden wird, die notwendigen 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

1.  mainApp.service('AdditionService', function()

   Hier erstellen wir einen neuen Dienst namens 'AdditionService' mithilfe des Service-Parameters unseres Hauptmoduls AngularJS.

2.  this.ADDITION = function(a,b)

   Hier erstellen wir innerhalb unseres Services eine neue Funktion namens ADDITION. Das bedeutet, dass wir, sobald AngularJS unseren AdditionService in unserem Controller instanziiert, auf die Funktion „ADDITION“ zugreifen können. In dieser Funktionsdefinition legen wir fest, dass die Funktion zwei Parameter, a und b, akzeptiert.

3.  return a+b;

   Hier definieren wir den Rumpf unserer ADDITION-Funktion, die einfach die Parameter addiert und den addierten Wert zurückgibt.

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

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

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

   Wir greifen nun auf die in unserem Service definierte Funktion 'ADDITION' zu 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.

Häufig gestellte Fragen