Share
Angular 2 ist ein leistungsfähiges und umfangreiches Framework, mit dem Sie die besten Web-Apps erstellen können. Angular 2 wurde unter Berücksichtigung von TypeScript entwickelt und nutzt futuristische Sprachfunktionen wie Dekorateure und Schnittstellen, die das Codieren schneller und einfacher machen.
In diesem Video aus meinem Kurs "Moderne Web-Apps mit Angular 2" zeige ich Ihnen, wie Sie mit Angular 2 einen Dienst erstellen, der mit dem Server interagiert. Beachten Sie, dass wir in diesem Video auf Code aus früheren Kursen des Kurses aufbauen und den vollständigen Quellcode für den Kurs auf GitHub finden.
In dem bisherigen Kurs haben wir eine Projektmanagementanwendung erstellt. Derzeit werden die Projekte, die wir dem Benutzer anzeigen, direkt in unsere Projektkomponente geschrieben. Dies ist jedoch keine langfristige Lösung. Wir möchten eine Möglichkeit haben, eine Liste der Projekte von unserem Server abzurufen. In diesem Video erstellen wir einen Projektdienst.
In Angular ist ein Dienst im Grunde jede Gruppe von Funktionen, die für mehrere Komponenten verfügbar sein soll. Es ist nur eine einfache Möglichkeit, einige Funktionen zusammenzufassen. Erstellen Sie also in unserem App-Verzeichnis einen Projektdienst. Und wir nennen das Projekte.Service.ts.
Natürlich ist ein Dienst keine Komponente, so dass der Komponentendekorator nicht importiert werden muss. Aber es gibt noch einen anderen Dekorateur, den wir brauchen Injizierbar. Also lasst uns importieren Injizierbar von Winkel / Kern. Nun wie gesagt, Injizierbar ist ein Dekorateur und nimmt keine Eigenschaften mit. Also rufen wir einfach an Injizierbar, und dann unsere Klasse exportieren. Wir rufen die Klasse an ProjekteService.
Injizierbar macht diese Klasse zu etwas, das Angular als Abhängigkeitsinjektion verwenden kann. Wie wir später sehen werden, verwenden wir die Abhängigkeitseingabe, um eine Instanz dieses Projektdienstes in einer Komponente abzurufen, die den Projektdienst verwendet. Eine Angular-Warteschlange verwendet die Abhängigkeitseingabe auf diese Weise, so dass mock-Services und ähnliches problemlos eingefügt werden können, wenn Sie Ihre Komponenten testen möchten.
Lassen Sie uns also einige Methoden hinzufügen ProjekteService Hier. Zuallererst brauchen wir die Http Modul, das Angular hat. Dies ermöglicht uns, Anfragen direkt an den Server zu richten. Also lasst uns importieren Http, und wir importieren auch die Antwortklasse, die wir für eine Typprüfung benötigen. Und beide kommen aus @ eckig / http.
Jetzt sollten wir auch die importieren Http Modul in unserer App-Modul-Datei. Also, lasst uns weitermachen, bevor wir es vergessen. In unseren nativen Modulen oben werde ich die importieren HttpModule, und dann unten in unsere Importe, lassen Sie uns die einschließen HttpModule.
Nun, da wir das an beiden Stellen importiert haben, können wir die Abhängigkeitseinspritzung verwenden, um dies zu injizieren Http Klasse in unsere ProjekteService. Also anstatt etwas zu tun neues HTTP () Hier erstellen wir eine Konstruktorfunktion. Dieser Konstruktor nimmt eine Eigenschaft des Typs an Http.
Angular wird diesen Parameter sehen, wenn er unser erstellt ProjekteService Beispiel, und es wird dies entsprechen Http Klasse zum HttpModule dass wir in unser App-Modul importiert haben, und es wird eine Instanz davon in den Konstruktor eingefügt.
Nun könnten wir schreiben this.http = http;um diesen Parameter einer Eigenschaft unserer Klasse zuzuweisen. Aber TypeScript hat tatsächlich eine Abkürzungssyntax dafür, also können wir einfach das Schlüsselwort anwenden Privatgelände direkt im Konstruktor und TypeScript wird automatisch zu einer Klasseneigenschaft. Und jetzt können wir innerhalb der anderen Methoden der Klasse verwenden this.http.
Also erstellen wir eine Funktion namens getProjects (). Dies ist die Methode, die wir aufrufen, um unsere Liste der Projekte zu erhalten.
Mit Funktionen in TypeScript können wir jetzt noch die : Art Syntax, um den Typ des Rückgabewerts der Funktion anzugeben. Und für getProjects () wir werden eine zurückgeben Beobachtbar das wickelt Projekt.
Bevor wir darüber sprechen, was das ist, lasst uns diese beiden Klassen importieren. Also werde ich importieren Beobachtbar von rxjs, und lass uns auch unsere importieren Projekt Modell-.
Was ist also ein beobachtbarer? Leider gibt es keine Möglichkeit, Ihnen hier eine vollständige Einführung in Observables zu geben, aber Angular 2 hängt ziemlich viel von Observables ab, und ich werde versuchen, sie so einfach wie möglich zu gestalten, während wir dies durchgehen.
Grundsätzlich ist ein Observable ein Wrapper, der einem Versprechen oder einem Array ähnelt. Beide Versprechen, Arrays und Observables enthalten andere Elemente. Im Falle eines Arrays haben wir mehrere Elemente. Im Falle eines Versprechens haben wir grundsätzlich einen einzigen Wert, den wir zu einem späteren Zeitpunkt erhalten werden.
Bei Observablen kann es sich um einen Wert oder um viele Werte handeln. Eine Definition, die manchmal verwendet wird, ist ein asynchrones Array. Ein Observable ist im Grunde ein Datenstrom, von dem wir jederzeit mehr bekommen können. Ich denke, Sie werden im Laufe einiger Lektionen hier sehen, wie wir mit Hilfe von Observables einige unserer Daten leichter einholen und einstellen können. Wenn Sie bisher noch keine Observablen gesehen haben, können Sie sie einfach als eine Art Versprechen ansehen.
Was werden wir also von dieser Funktion zurückbringen? Nun können wir tun this.http.get (), also lass uns gehen / api / projects das wird unsere Liste der Projekte zurückgeben. Und dann können wir die Antwort auf eine Funktion abbilden, die wir schreiben werden this.extractData.
Sie können an das denken Karte() Funktion hier als dann() Methode auf ein Versprechen. Es funktioniert genau wie bei einem Array wo Karte() führt einen Vorgang für jeden der Werte in diesem Array aus und gibt dann ein neues Array mit diesen neuen Werten zurück.
Also im Grunde genommen, Karte() Mit dieser Option können Sie eine Aktion für die Werte in einem Container ausführen. Und das Gleiche gilt für die dann() Methode in einem Versprechen. Du kannst anrufen dann() auf ein Versprechen, eine Funktion über den Wert innerhalb eines Versprechens aufzurufen. Und das gibt ein neues Versprechen mit dem neuen Wert, den Sie geschaffen haben ...
Es ist das Gleiche mit Karte() Hier. Wir werden anrufen Daten extrahieren() Auf die Antwort, die sich in diesem Beobachtbaren befindet, und was wir darauf zurückkommen werden, ist ein Beobachtbares, das ein Projekt umhüllt.
Also lass uns ein erstellen Daten extrahieren() Funktion, und dies wird eine Angular HTTP-Bibliothek benötigen Antwort Klasse.
Also werden wir zurückkehren res.json (), Dies konvertiert die HTTP-Antwort in den eigentlichen JSON-Body. Nun der Wert von Daten extrahieren() wird in unserem zurückgegeben getProjects () call und Angular wird feststellen, dass dies mit unserem Rückgabetyp hier übereinstimmt, da es sich um eine beobachtbare Reihe von Projekten handelt.
Jetzt haben wir das getProjects () Funktion, lass uns zu unserer Projektkomponente gehen und sie importieren. Zunächst importieren wir die ProjekteService.
Nun, weil wir eine spritzen wollen ProjekteService Wenn Sie sich in dieser Komponente befinden, müssen Sie Angular mitteilen, dass es eine Instanz für diese Komponente geben soll. Fügen wir also ein Anbieter Eigentum an unseren Komponentendekorateur, und wir sagen ihm, dass es das brauchen wird ProjekteService innerhalb dieser Komponente. Fügen wir also einen Konstruktor hinzu, und wir können die Abhängigkeitseinspritzung auf dieselbe Weise wie in unserem Service verwenden.
Wir erstellen einen Parameter namens Bedienung, und das wird ein ProjekteService Objekt, und so wird Angular wissen, eines unserer zu injizieren ProjekteService Instanzen in diese Klasse. Wir geben diesen Parameter an Privatgelände Schlüsselwort hier, damit es das sofort als Eigenschaft setzt.
Damit können wir fortfahren und es im Inneren verwenden ngOnInit. Also hier drinnen können wir anrufen this.service.getProjects ()-Denken Sie daran, dass dies ein Beobachtbares zurückgibt - und die Methode, die wir hier aufrufen möchten abonnieren().
Sie können an das denken abonnieren() Methode, als ob wir anrufen würden dann() auf ein Versprechen, das zurückgegeben wurde, oder wenn Sie dies als Array betrachten, abonnieren() ist wie das für jeden() Methode auf einem Array. Es ist irgendwie so Karte() indem er empfängt, was sich innerhalb des Arrays befindet, oder in diesem Fall das Beobachtbare.
jedoch, für jeden() gibt kein neues Array zurück, und abonnieren() gibt kein neues Beobachtbares zurück. Es ist also wie das Ende der Zeile. So abonnieren() wird unsere Projektliste als Parameter erhalten, und wir können nur sagen this.projects, was sich auf unsere Auswahl an Projekten bezieht, wird gleich sein Projekte. Auf diese Weise können wir seinen Wert aus dem Beobachtbaren auspacken, und der Wert ist jetzt in der Klasse verfügbar.
Und wenn wir zum Browser zurückgehen und unsere Liste der Projekte sehen, werden wir die drei Projekte sehen, die ich auf dem Server abgelegt habe.
Im vollständigen Kurs Modern Web Apps With Angular 2 zeige ich Ihnen, wie Sie mit Angular 2 eine vollständige Web-App mit den neuesten Features und Architekturmustern programmieren.
Sie können mit mir zusammenarbeiten und eine umfassende Projektmanagement-App mit Benutzeranmeldung und -prüfung sowie Echtzeit-Chat erstellen. Sie erhalten Unterricht in der Angular 2-Vorlagensprache, Strukturierung Ihrer App, Routing, Formularvalidierung, Services, Observables und mehr.
Wenn Sie Angular 2 noch nie verwendet haben, lernen Sie alles, was Sie wissen müssen, in unserem Kurs Erste Schritte mit Angular 2. Wenn Sie Ihre Angular 2-Erfahrung erweitern möchten, sollten Sie Folgendes ausprobieren:
Accentsconagua