SPA mit ASP.NET Core und Angular

Routing

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In einer Single-Page-Application bleibt der Benutzer zwar immer auf derselben Seite, die Inhalte werden aber nach und nach ausgetauscht. Genau das erreichen Sie nun in Ihrer App: Nach Klick auf eine Speise wird die entsprechende Detailseite angezeigt.
14:23

Transkript

Bei meiner Single-Page-Application, die wir hier sehen, handelt es sich um eine Single-Page-Application im wahrsten Sinne des Wortes. Denn ich habe tatsächlich nur eine Seite, und zwar genau eine. Bedeutet, ich komme von hier nirgendwo anders hin. Jetzt ist zwar das Prinzip einer Single-Page-Application, dass der Benutzer immer auf derselben physikalischen Seite bleibt, aber natürlich werden die Inhalte nach und nach ausgetauscht. Also genau das, das möchte ich jetzt auch in meiner App erreichen. Mein Ziel ist es, dass ich nach Klick auf eine Speise zu einer Detailseite für diese Speise komme. Dazu sind mehrere Schritte erforderlich. Im ersten Schritt muss ich eine Komponente für diese neue Seite anlegen. Und das könnte ich jetzt entweder in Visual Studio machen, indem ich hier in dem Ordner dishes, dort, wo ich meine Komponente gleich haben möchte, einfach eine neue TypeScript-Datei für die Komponente anlege und dann eine neue HTML-Datei und dann auch eine neue CSS-Datei. Aber das ist mir alles viel zu aufwendig. Stattdessen gehe ich in die Eingabeaufforderung herein, die habe ich schon in meinem Ordner geöffnet. Hier läuft gerade der Angular-Build-Watcher, den beende ich mal schnell. Und jetzt kann ich in meinem Ordner das ng-Kommando benutzen von der Angular CLI, denn damit kann sich nicht nur neue Anwendungen generieren, sondern ich kann auch Komponenten erzeugen. Dazu tippe ich ng und dann g für generate und dann component für Komponente und anschließend kann ich den Namen meiner Komponente angeben, und zwar im Kebab-Case, heißt, bei mir wäre das dish-detail. Nun möchte ich allerdings, dass diese Komponente im Unterordner dishes angelegt wird. Und deswegen schreibe ich vor den Namen der Komponente den Namen des Unterordners. So, wenn jetzt alles gut geht, dann sollte ich gleich in diesem Ordner eine Komponente haben und die besteht aus einer HTML-Datei, aus einer TypeScript-Datei, aus einer CSS-Datei und sogar aus einer Testdatei für die Tests. So, Visual Studio muss jetzt einmal eine Datei hier neu laden, das ist die AppModule-Datei. Die wurde nämlich sofort meiner neue Komponente für mich auch hinzugefügt. Bedeutet: es wurde nicht nur im Unterordner dishes eine neue Komponente für mich in einem Unterordner angelegt, inklusive TypeScript, inklusive HTML, sondern es wurde sogar ein Eintrag in der AppModule-Datei für mich vorgenommen. So, das war jetzt relativ einfach und im nächsten Schritt werde ich nun hingehen und diese Komponente ein wenig mit Leben befüllen. Dazu werde ich mir aber den Code kurz anschauen und was wir in dieser DetailComponent aktuell sehen -- das hier ist die spec-Datei, das hier die richtige Datei --, ist, dass diese Komponente OnInit implementiert. Hier wird Component importiert. Sie sehen auch, dass der Name korrekt gewählt worden ist. Also, ich hab das mit Bindestrichen getrennt, aber trotzdem wurde für mich in korrekter Pascal-Case-Schreibweise der Klassenname angelegt. Es wurde auch ein Selector für mich vergeben und den kann ich so lassen oder ich kann ihn anpassen, je nachdem, wie ich das gerne möchte. So, wenn ich jetzt einmal in das Markup reinschaue, was mir generiert worden ist, dann steht hier im Moment dish detail works!, und das soll mir zum Ersten schon mal ausreichen, denn ich möchte gleich einfach nur einmal auf diese Seite navigieren, ohne dass sie irgendetwas besonderes kann. Zum Navigieren muss ich jetzt das Routing-Modul von Angular importieren und dazu gehe ich am besten hin und schreib mir ein komplett neues Modul. Wir haben bisher das AppModule und dieses AppModule, das verwaltet alles, was zu unserer App gehört. Für das Routing möchte ich ein eigenes Modul schreiben, weil ich im Routing-Module auch die Routendefinitionen ablegen werde und das würde dazu führen, dass die app.module-Datei viel zu überfrachtet wäre. Also gehe ich hier auf das Kontextmenü des Ordner apps und wähle Hinzufügen Neues Element aus. Ich möchte gerne eine TypeScript-Datei hinzufügen und zwar soll diese Datei app-routing heißen. So, was benötige ich jetzt in so einem Modul. Zunächst einmal muss ich NgModule importieren NgModule, das befindet sich in @angular/core Außerdem muss ich das RouterModule und den RoutesService importieren. Also RouterModule, dann den RoutesService. Und das Ganze befindet sich in @angular/router. Navigieren möchte ich jetzt zum einen zu meiner bereits bestehenden Menü-Komponente. Diese werde ich also auch importieren, das ist die MenuComponent. Und dann natürlich zu meiner neuen DishDetailComponent. Und die MenuComponent, die befindet sich im Unterordner menu und dann heißt die hier menu.component. Vom Grundprinzip her müssen Sie jede Datei, auf die Sie navigieren möchten, hier einmal importieren, deswegen auch die DishDetailComponent hier hinzu, denn da möchte ich ja auch hin navigieren können, und da möchte ich eine Route für definieren. Und die befindet sich im Unterordner dishes und dort in dish-detail und dann heißt die dish-detail.component. Als Nächstes, bevor ich mein Modul jetzt tatsächlich deklarieren werde, werde ich nun die Routen definieren. Das ist ein Array, und zwar ein Array vom Typ Routes, und Routes, das haben wir hier oben ja importiert. Und hier funktioniert das Ganze wie folgt. Für jede Route, zu der ich navigieren möchte, vergebe ich einen Pfad und eine Komponente, zu der ich routen möchte. Also, die erste Route, zu der ich gerne routen können möchte, die hat den Pfad menu und die Komponente, zu der ich ganz gerne routen möchte, das ist die MenuComponent. Als zweiten Eintrag möchte ich sehr gerne auf den Pfad dish navigieren und für eine Speise will ich dann die ID übergeben, denn anhand der ID wird später die konkrete Speise identifiziert. Und wenn ich Parameter in meiner Route habe, dann kennzeichne ich die über einen Doppelpunkt. Die Komponente ist dann hier die DishDetailComponent. Was aktuell noch fehlt, ist eine Standard-Route, also was passiert, wenn jemand gar nichts eingibt, und dann möchte ich ganz gerne bei der MenuComponent landen. Bedeutet, ich werde hier noch eine Route hinzufügen und das ist die Route, dass jemand nichts eintippt, und in dem Fall mache ich ein redirect auf die Route /menu. Und die Eigenschaft pathMatch, die setze ich auf full. So, damit sind meine Routen definiert und jetzt kann ich das Modul konfigurieren. Dazu schreibe ich erst mal eine Klasse, die nenne ich AppRoutingModule und die ist leer, denn die erledigt ihre Aufgabe im Decorator. Nämlich hier oben werde ich das Ganze nun mit dem @NgModule-Attribut versehen und an @NgModule übergebe ich jetzt ein Objekt, und zwar einmal, was möchte ich gerne importieren? Und ich möchte importieren, das RouterModule, und dann rufe ich hier forRoot auf, und dann forRoot kann ich jetzt meine Routendefinitionen übergeben, um das Ganze zu konfigurieren. Wenn ich was importiere, dann muss ich auch was exportieren, in diesem Fall des Moduls und exportieren möchte ich genau eben dieses RouterModul und hier fehlt ein s, dann funktioniert's auch. Das ist nicht export sondern exports. So, damit ist mein Routing-Modul fertig. Dieses Routing-Modul, das muss ich jetzt verweisen in meiner app.module-Datei. Dazu werde ich diese jetzt schnell öffnen, app.module und hier werde ich jetzt dieses Routing-Modul, was ich gerade geschrieben habe, das AppRouting-Modul, das werde ich jetzt hier importieren. Und das befindet sich in app-routing. Am besten benenne ich die Datei noch schnell um in app-routing.module, dann ist es ein wenig besser ersichtlich, dass es sich hier um ein Modul handelt. Nachdem ich das Ganze jetzt hier oben importiert habe, muss ich das auch hier in dem Bereich Imports meines Moduls bringen. Also, app-routing.module. Und jetzt ist das Routing für meine Anwendung vollständig konfiguriert. Bedeutet, ich kann es jetzt in meinen Komponenten benutzen. Und dazu gehe ich einmal in die menu-component. In der menu-component, das habe ich eingangs erwähnt, möchte ich ganz gerne, bei einem Klick auf ein Gericht, dass ich dann entsprechend navigiere auf einer Detailseite. Dazu kann ich hier einfach den Click-Event-Handler binden und sage, bei einem Klick rufe ich die Methode auf goToDish und übergebe den aktuellen Eintrag. So. Dann muss ich schlussendlich in der menu-component jetzt noch diese Methode goToDish implementieren. goToDish und die bekommt herein ein dish vom Typ Dish und dies ist selber vom Typ void. Und damit ich hier Dish benutzen kann, muss ich das auch importieren. Dabei hilft mir Visual Studio wieder. Ich habe also Alt+Enter gedrückt und dann hat mir die Entwicklungsumgebung hier oben das entsprechende Importstatement hereingeschrieben. Was ich darüber hinaus brauche, ist einen Router und den muss ich auch noch importieren, und zwar importiere ich dazu im oberen Bereich Router und Router finden wir in @angular/router. Damit ich diesen Router-Service jetzt auch benutzen kann, muss ich ihn noch injizieren in meine Komponente. Das mache ich im Constructor, indem ich hier über private.router ein neues Feld anlege und das ist vom Typ Router. Dieses Feld, das kann ich jetzt schlussendlich benutzen, indem ich bei dem Aufruf von goToDish diesen Router-Service aufrufe und hier nutze ich die Methode navigate und an navigate übergebe ich jetzt sogenannte Kommandos. Und diese Kommandos, das ist ein Array und das ist wie folgt aufgebaut: An die erste Stelle, da übergebe ich die URL. Ich möchte zum Beispiel zu /dish wechseln. Wenn ich irgendwelche Argument übergeben möchte, mache ich das anschließend und ich möchte die dish.id übergeben. So, damit dürfte jetzt das Routing fast vollständig implementiert sein. Was nun noch fehlt, ist noch eine Kleinigkeit, nämlich in meiner app.component, die ja so diesen äußeren Rahmen bereitgestellt hat. Da benutze ich aktuell fix das VegiMenu. Und das muss ich jetzt wechseln und zwar durch einen router-outlet. router-outlet, das ist also der Platzhalter, in den dann später die entsprechenden Inhalte kommen. Das war jetzt eine ganze Menge Code. Schauen wir mal, ob das Ganze funktioniert. Dazu muss ich zunächst einmal meinen Angular-Code übersetzen und in den www.root-Ordner schreiben lassen und parallel dazu kann ich schon mal meine Webanwendung so langsam hochfahren und dann sehen wir mal zu, was dort passieren wird. So, das Ganze ist gebaut. Die Seite ist mittlerweile geladen und wenn ich jetzt auf eines dieser Elemente klicke, dann komme ich auch zur Detailseite. Lassen Sie uns noch einmal kurz über die entsprechenden Schritte sprechen, die ich benötigt habe, um das Routing zu implementieren. Schritt Nummer eins bestand darin, dass ich eine neue Komponente angelegt habe, zu der ich navigieren möchte. Das habe ich über ng g component erledigt und habe dann diese dish-detail-Komponente erhalten. Außerdem habe ich mir ein Routing-Modul geschrieben und dieses Routing-Modul, das definiert meine Routen. Jede Route, zu der ich navigieren möchte, die muss ich hier definieren. Danach habe ich dieses Modul in der app.module referenziert und konnte dann schlussendlich in meiner eigentlichen Komponente, von der aus ich weg navigieren möchte. den Router benutzen, um über die Methode navigate zu der entsprechenden Seite zu wechseln.

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!