SPA mit ASP.NET Core und Angular

Service und Modellklassen anlegen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Auf der ersten Seite der Client-Anwendung soll eine Menükarte mit allen Kategorien und zugehörigen Speisen dargestellt werden. Dazu sind mehrere Schritte notwendig. In diesem Film legen Sie den benötigten Service und die Modellklassen an.
14:42

Transkript

Meine Web API, deren Quellcode Sie hier in Visual Studio sehen, die verfügt über zwei Controller, die mir Daten zu Speisen und zu Kategorien liefern. Wenn wir das Ganze mal uns im Postman anschauen, dann sehen wir auch, dass wir, wenn wir die Kategorien aufrufen, dass wir dann eine Liste aller Kategorien inklusive der dazugehörigen Speisen erhalten, beziehungsweise wenn ich nur auf die Speisen gehe, dann erhalte ich eben nur die Liste der Speisen ohne Kategorien oder ich kann auch eine einzelne Speise aufrufen. Natürlich bietet mir meine API auch die Möglichkeit, Speise hinzuzufügen oder zu löschen. In meiner Client-Anwendung sehe ich davon allerdings bisher relativ wenig, denn die sieht bis jetzt erst so aus. Und genau das möchte ich jetzt ganz gerne ändern. Mein Ziel ist es, dass ich in meiner Client-Anwendung gerne eine Menükarte auf der ersten Seite darstelle. Also, alle Kategorien möchte ich gerne sehen und ich möchte auch alle Speisen dazu sehen. Dazu sind jetzt mehrere Schritte notwendig. Ich will jetzt zunächst einmal hingehen und im ersten Schritt nur den Service anlegen, den ich benötige und die Modellklassen. Was bedeutet das konkret? Im Endeffekt kann ich mir das Leben sehr erleichtern in meinen Angular-Apps, wenn ich mir für die Daten, die ich zurückbekomme, von meinem Service clientseitige TypeScript-Klassen anlege, denn dann erhalte ich auch IntelliSense. Wie komme ich jetzt an diese TypeScript-Klassen? Der einfachste Weg besteht zunächst einmal dadrin, dass ich hier einen Endpunkt aufrufe, zum Beispiel den Categories-Endpunkt. Und mir hier jetzt mal die komplette Antwort, die ich hier erhalten habe, in die Zwischenablage kopiere. Wahlweise über diesen Button hier oder indem ich alles markiere. Jetzt suche ich schnell in meinem Browser nach einer Seite, die in der Lage ist, TypeScript aus JSON zu erzeugen. Also "json2ts" suche ich mal. Und da gibt es eine Webseite json2ts.com. Und die Idee ist hier, dass ich jetzt hier einfach über Strg+V meine JSON-Antwort einfügen kann und dann Generate TypeScript sage. Und wie Sie jetzt hier unten sehen, habe ich jetzt hier zwei Klassen bekommen. Einmal die Klasse Dish und einmal die Klasse RootObject. Woher kommt das, dass ich jetzt einmal Dish habe und einmal RootObject und nicht Category? Der Hintergrund ist, dass in meinem JSON für das Objekt oberster Ebene kein Name steht, darum heißt das Ding erst mal RootObject. Aber das ist nicht weiter schlimm, wir werden das gleich einfach händisch korrigieren. Ich mache jetzt Folgendes. Ich kopiere mir das Ganze einmal. Erst die Dish-Klasse und wechsle jetzt in Visual Studio. Mein Projekt muss ich jetzt kurz beenden, um eine neue Klasse hinzufügen zu können. Und diese TypeScript-Klasse, die lege ich hier im Ordner ClientApp an. Von der Grundidee her werde ich mir einfach unter app für jede Entität, sprich für Dishes und auch für Categories einen eigenen Ordner machen. Also, Ordner hinzufügen, unter app einmal dishes, da wird alles drin landen, was irgendwie mit Speisen zu tun hat. Und einmal categories. Ok. So, in In der Zwischenablage befindet sich aktuell der Code für die Klasse Dish, also sage ich hier im Kontextmenü Hinzufügen Neues Element und wähle jetzt hier im unteren Bereich eine TypeScript-Klasse aus. So, die befindet sich offensichtlich hier nicht. Also "typescript", da haben wir sie. Hinzufügen. Nein, erst den Dateinamen ändern. Also, diese Klasse soll dish.ts heißen. Ich füge jetzt hinzu. Und füge hier einfach mal meinen Code ein, mit dem Unterschied, dass ich hier einfach eine Export-class Dish draus mache. Und das Ganze speichere ich. Dann lege ich eine Klasse für categories an. Also wieder neues Element und dann die TypeScript-Datei. Die befindet sich hier im Bereich web. und die nenne ich jetzt category.ts. Und in die category.ts, da werde ich das einfügen, was wir hier eben im Chrome gesehen haben und gehe wieder auf json2ts.com und da machen wir das Ganze noch einmal. Generieren, und ich kopier mir diesmal das RootObject hier unten heraus. Und gehe zurück ins Visual Studio und hier füge ich das jetzt ein und nenn das export class Category. So, jetzt ist Visual Studio ein wenig unglücklich, weil wenn hier gesagt wird, na ja, Dish kenne ich gar nicht. Und jetzt kann Visual Studio das korrigieren und zwar möchte er jetzt ganz gerne dishes für mich importieren. Wie funktioniert das Ganze? Unter TypeScript, wenn eine Datei die andere verweist, kann ich also ein Import-Statement schreiben und ich sage hier, ich möchte gerne die Klasse Dish aus der Datei .., also einen Ordner hoch und dann dishes/dish. Also, diese Datei hier importieren. Die Endung .ts.js, die gebe ich hier an der Stelle nicht an. So, damit habe ich jetzt beide Klassen. Das ist aber noch nicht genug. Was ich jetzt noch benötige, ist einen Service. Den Service, den lege ich hier auf oberster Ebene an. Und das ist auch wieder ein TypeScript-Datei. Und dieser Service wird die Aufgabe haben, die komplette Kommunikation zur API, also zum Backend für uns zu kapseln, damit die Komponenten, die ich später anlege, diese Aufgabe nicht übernehmen müssen. So, diesen Service, den nenne ich jetzt vegiservice.ts, Vegi deswegen, weil es hier ja um vegetarische Gerichte geht. So, wie schreibe ich jetzt so ein Service? Na ja, ein Service, das ist erst mal eine ganz normale Klasse. Ich schreibe also hier export class VegiService und innerhalb dieser Klasse werde ich jetzt mal eine Methode getCategories anlegen. Also, getCategories und die sollen mir alle Categories zurückgeben und dazu sage ich, das ist ein Promise, was ich zurückgebe, also ein Versprechen, ein Versprechen, dass irgendwann mal Kategorien beziehungsweise ein Array davon zurückkommen werden. Also sage ich, ich habe hier ein Array von Kategorien und auch hier haben wir wieder das Problem, dass Category erst mal gänzlich unbekannt ist. Was muss ich hier also machen? Auch hier kann ich jetzt hingehen und kann Categories importieren. So, danach muss ich als Nächstes hingehen und diese Funktion mal mit Leben befüllen. Heißt also, ich möchte irgendwie über HTTP ganz gerne meine API aufrufen. Um einen HTTP-Aufruf ausführen zu können, brauche ich das HTTP-Modul von Angular. Wie komme ich da dran? Ganz einfach. Ich importiere das hier oben, Ich sage also hier oben import und dann HTTP from @angular/http. Jetzt habe ich also hier die Möglichkeit, das HTTP-Module auch mal in meinem Service nutzen zu können. Jetzt will ich aber nicht selber ein Objekt von diesem Modul erzeugen, sondern ich will ein fertig konfiguriertes Objekt von außen hereingegeben bekommen. Und dazu kann ich mir jetzt hier einen Konstruktor anlegen und bei diesem Konstruktor, sage ich einfach, dass ich ganz gerne ein Objekt hätte, das nenne ich http und das ist vom Typ Http. So, private. Dieses private hier vorne bedeutet übrigens, das TypeScript automatisch für mich ein Feld anlegen wird. Also, es wäre genauso, als hätte ich jetzt hier gesagt, private http: Http und hätte dann hier gesagt this.http = http. Also dieses Feld ist gleich das, was hier übergeben wird. Das kann ich mir schenken, wenn ich bei TypeScript vor den Konstruktor einfach private schreibe. So http, das muss ich jetzt benutzen, um auf meine API zuzugreifen. Und zwar sage ich einfach mal return this.http. Also benutze den HTTP-Service und rufe über einen get-Request die URL api/categories auf und wenn das fertig ist, dann hätte ich ganz gerne ein Promise da draus. Der Punkt ist, was ich hier zurückbekomme an der Stelle, das ist ein Observable, bedeutet ein Objekt, was ich im Nachhinein noch mal ändern könnte, wenn neue Daten reinkommen und so weiter. Bei meinen categories ist aber so, Ich schicke den Aufruf, der ist fertig und dann passiert auch nicht mehr viel. deswegen möchte ich kein Observable zurückgeben, sondern ein Promise. Dazu benutze ich die Methode .toPromise, um das Observable in ein Promise zu überführen. Diese Methode, die ist aber kein Bestandteil des HTTP-Moduls, sondern, wenn ich die nutzen möchte, diese Methode, dann muss ich hier oben noch etwas importieren, nämlich ich muss importieren aus rxjs den operator/toPromise. Und dann bin ich in der Lage, aus einem Observable ein Promise zu machen. So, wenn ich jetzt dieses Promise habe, dann sage ich: Na ja, wenn das Promise zurückgekommen ist, dann nehme ich mir die Antwort, also die Response oder kurz r und von dieser Antwort will ich nicht alles haben, also die Header, die interessieren mich gar nicht, mich interessiert nur der Inhalt. Also sage ich json und das werde ich als Array von Kategorien dann hier casten. So, jetzt fehlt hier am Ende noch ein Semikolon und damit ist mein Service fast fertig. So einen Service sehen wir hier. Also, es ist eine öffentliche Klasse, die wird exportiert. Ich kann Abhängigkeiten hereingeben über den Konstruktor. In meinem Fall habe ich hier das HTTP-Module benötigt. Ich kann außerdem andere Klassen verwenden zum Beispiel Category. In der Regel möchte ich ein Promise zurückgeben, dann muss ich aber den toPromise-Operator importieren und ein Import fehlt noch, nämlich, damit ich diesen VegiService später auch benutzen kann, muss er injectable sein. Injectable, das ist ein Attribut, das kommt aus Angular Core. Das muss ich auch importieren. Ich schreibe hier oben also import { Injectable } from '@angular/core' Wenn Sie noch nie etwas mit Angular gemacht haben, dann scheint das natürlich jetzt sehr viel auf einmal zu sein. Das Schöne ist, Sie können mir natürlich hier in dem Videotraining 1:1 folgen und das Ganze mitmachen. Zum anderen muss man aber auch sagen, diese Konzepte, wie erstelle ich einen Service, wie rufe ich eine HTTP ab, die sind auch auf der Angular-Webseite sehr gut dokumentiert. Da können Sie das also auch alles dann noch mal nachlesen. Und dort werden Sie dann auch finden, dass es nicht reicht, das Attribut Injectable zu importieren, sondern Sie müssen auch Ihre Klasse damit attributieren. Und hier habe ich jetzt ein @ davor geschrieben, das bedeutet, dass ich hier etwas annotiere. So, jetzt muss ich noch, damit ich hier HTTP auch wirklich benutzen kann, HTTP einmal in meiner Anwendung bekannt machen. Dazu wechsle ich in die Datei app.module und hier muss ich jetzt auch einmal das HTTP-Modul importieren. Ich schreib also hier import { HTTPModule } from '@angular/http' und wenn ich hier diesen Import habe, dann kann ich das anschließend hier in diesen unteren Bereich in die Imports hereinholen, indem ich hier einfach HttpModule angebe. So, damit sind wir jetzt, was den datenverarbeitenden Teil angeht, fertig. Jetzt fehlt noch die Oberfläche, aber das möchte ich dann an einer weiteren Stelle zeigen. Bisher haben wir aber Folgendes gemacht: Wir sind hingegangen und haben die Antwort unserer API, das JSON, das haben wir in einen Online-Generator gesteckt, der für uns TypeScript generieren kann. Wenn Sie jetzt sagen: "Uh, in meiner API, da kommen aber ganz kritische Daten zurück, die möchte ich nicht online irgendwo hereinposten.", dann ist das auch kein Problem. Da gibt es also verschiedene Visual Studio-Plugins oder auch andere Werkzeuge, die Ihnen aus JSON TypeScript machen können. Diese beiden Klassen, die da herausgekommen sind, die habe ich angelegt in einem Unterordner meiner App und zwar unter app/categories, einmal category und unter app/dishes die Klasse dish. Anschließend habe ich mir einen Service geschrieben, den VegiService und dieser VegiService, der wird für mich später die komplette Kommunikation mit meinem Backend übernehmen. Und damit er das kann, musste ich drei wichtige Imports hinzufügen. Das eine ist das Injectable-Import. Das bedeutet, dass ich den später überhaupt irgendwo rein injizieren kann. Das andere ist der HTTP-Service, den ich hier importiert habe und den brauche ich, um dann später hier den Aufruf starten zu können. Und da ich kein Observable zurückgeben möchte. Ein Observable ist also ein Objekt, das sich verändern kann, sondern ich will ein Promise zurückgeben. Ein Promise bedeutet, ich rufe was ab, dann bin ich aber auch fertig und dann ist auch da. Da ich das zurückgeben möchte, da muss ich dann auch den Operator toPromise importieren und dann konnte ich meine API schreiben.

SPA mit ASP.NET Core und Angular

Lernen Sie die Bestandteile von modernen Webanwendungen kennen und nutzen.

5 Std. 21 min (36 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:25.09.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!