Abhängigkeitsinjektion in AngularJS mit Beispiel

Inhaltsverzeichnis:

Anonim

Was ist Abhängigkeitsinjektion in AngularJS?

Die Abhängigkeitsinjektion ist ein Software-Entwurfsmuster, das die Umkehrung der Steuerung zum Auflösen von Abhängigkeiten implementiert.

Umkehrung der Kontrolle : Dies bedeutet, dass Objekte keine anderen Objekte erstellen, auf die sie sich verlassen, um ihre Arbeit zu erledigen. Stattdessen erhalten sie diese Objekte von einer externen Quelle. Dies bildet die Grundlage der Abhängigkeitsinjektion, wobei, wenn ein Objekt von einem anderen abhängig ist; Das primäre Objekt übernimmt nicht die Verantwortung, das abhängige Objekt zu erstellen und dann seine Methoden zu verwenden. Stattdessen erstellt eine externe Quelle (in AngularJS das AngularJS-Framework selbst) das abhängige Objekt und gibt es zur weiteren Verwendung an das Quellobjekt weiter.

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

Das obige Diagramm zeigt ein einfaches Beispiel eines alltäglichen Rituals in der Datenbankprogrammierung.

  • Das Feld 'Modell' zeigt die "Modellklasse", die normalerweise für die Interaktion mit der Datenbank erstellt wird. Die Datenbank ist nun eine Abhängigkeit für die Funktion der "Modellklasse".
  • Durch Abhängigkeitsinjektion erstellen wir einen Service, um alle Informationen aus der Datenbank abzurufen und in die Modellklasse zu gelangen.

Im Rest dieses Tutorials werden wir uns mehr mit der Abhängigkeitsinjektion befassen und wie dies in AngularJS erreicht wird.

In diesem Tutorial lernen Sie:

  • Welche Komponente kann als Abhängigkeit in AngularJS injiziert werden?
  • Beispiel für die Abhängigkeitsinjektion
    • Wertkomponente
    • Bedienung

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

In Angular.JS werden Abhängigkeiten mithilfe einer "injizierbaren Factory-Methode" oder einer "Konstruktorfunktion" injiziert.

Diesen Komponenten können "Service" - und "Value" -Komponenten als Abhängigkeiten hinzugefügt 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 aus einer MySQL- oder MS SQL Server-Datenbank über eine PHP-Webanwendung abzurufen.

Der $ http-Dienst wird normalerweise im Controller auf folgende Weise definiert.

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

Jetzt, wenn der $ http-Dienst in der Steuerung wie oben gezeigt definiert ist. 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" jetzt vom "$ http-Dienst" abhängt, muss ein Objekt dieses Dienstes unserem Controller 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 Injektor in Angular.JS stellt dann unserem Controller eine Instanz des $ http-Dienstes zur weiteren Verarbeitung zur Verfügung.

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

Beispiel für die Abhängigkeitsinjektion

Die Abhängigkeitsinjektion kann auf zwei Arten implementiert werden

  1. Einer ist durch die "Wertkomponente"
  2. Ein anderer ist durch einen "Service"

Schauen wir uns die Implementierung beider Methoden genauer an.

1) Wertkomponente

Dieses Konzept basiert auf der Tatsache, dass ein einfaches JavaScript-Objekt erstellt und zur weiteren Verarbeitung an den Controller übergeben wird.

Dies wird in den folgenden zwei Schritten implementiert

Schritt 1) Erstellen Sie ein JavaScript-Objekt mithilfe der Wertekomponente und hängen Sie es an Ihr Hauptmodul AngularJS.JS an.

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

Schritt 2) Greifen Sie über den Angular.JS-Controller auf das JavaScript-Objekt zu

Event Registration


Guru99 Global Event

{{ID}}

Im obigen Codebeispiel werden die folgenden Hauptschritte ausgeführt

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

Die Wertefunktion des Angular.JS JS-Moduls wird verwendet, um ein Schlüssel-Wert-Paar mit dem Namen "TutorialID" und dem Wert "5" zu erstellen.

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

Die TutorialID-Variable wird nun als Funktionsparameter für die Steuerung zugänglich.

  1.  $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 von der Steuerung an die Ansicht übergeben werden kann.

  1. {{ICH WÜRDE}}

Der ID-Parameter wird in der Ansicht als Ausdruck angezeigt. Die Ausgabe von '5' wird also auf der Seite angezeigt.

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

2) Service

Service ist definiert als ein einzelnes JavaScript-Objekt, das aus einer Reihe von Funktionen besteht, die Sie verfügbar machen und in Ihren Controller einfügen möchten.

Zum Beispiel ist "$ http" ein Dienst in Angular.JS, der, wenn er in Ihre Controller injiziert wird, die erforderlichen Funktionen von bereitstellt

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

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

Schauen wir uns ein einfaches Beispiel an, wie Sie Ihren eigenen Service erstellen können. Wir werden einen einfachen Additionsservice erstellen, der zwei Zahlen hinzufügt.

Event Registration

Guru99 Global Event




Result: {{result}}

Im obigen Beispiel werden die folgenden Schritte ausgeführt

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

Hier erstellen wir einen neuen Service namens 'AdditionService' unter Verwendung des Serviceparameters unseres Hauptmoduls AngularJS JS.

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

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

  1.  return a+b;

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

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

Dies ist der Hauptschritt, der die Abhängigkeitsinjektion umfasst. In unserer Controller-Definition verweisen wir jetzt auf unseren 'AdditionService'-Service. Wenn AngularJS dies sieht, wird ein Objekt vom Typ 'AdditionService' instanziiert.

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

Wir greifen jetzt 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 Service definieren und die Funktionalität dieses Service in unseren Controller integrieren können.

Zusammenfassung:

  • Abhängigkeitsinjektion ist, wie der Name schon sagt, der Prozess, bei dem abhängige Funktionen zur Laufzeit in Module injiziert werden.
  • Die Verwendung der Abhängigkeitsinjektion hilft dabei, einen wiederverwendbareren Code zu erhalten. Wenn Sie über gemeinsame Funktionen verfügen, die für mehrere Anwendungsmodule verwendet werden, besteht der beste Weg darin, einen zentralen Dienst mit dieser Funktionalität zu definieren und diesen Dienst dann als Abhängigkeit in Ihre Anwendungsmodule einzufügen.
  • Das Wertobjekt von AngularJS kann verwendet werden, um einfache JavaScript-Objekte in Ihren Controller einzufügen.
  • Mit dem Servicemodul können Sie Ihre benutzerdefinierten Services definieren, die für mehrere AngularJS-Module wiederverwendet werden können.