Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Angular 2 Grundkurs

Router-Module

Testen Sie unsere 2013 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Konfiguration des Routings muss mittels eines Router-Moduls dem Applikations-Modul zugeführt werden, damit die App das Routing auflösen kann.
06:32

Transkript

Um nun unserer Applikation Bescheid zu geben, dass wir ein Routing haben, müssen wir im Applikationsmodus selbst ein neues Modul definieren und in dem Modul wird sich dann entsprechend die Konfiguration der Router automatisch befinden und zusätzlich wird in dem Modul alle routenrelevanten Services, Direktiven, Komponenten automatisch enthalten sein. Um das Ganze zu realisieren, stellt uns Angular selber das Router Module zur Verfügung. Und dieses Router Module, das es uns zur Verfügung stellt, RouterModule... verfügt über eine Methode, die nennt sich forRoot und diese forRoot-Methode, die hier zur Verfügung gestellt wird, die macht im Grunde genommen nichts anderes, als automatisch ein Modul zu erzeugen und gleichzeitig das Modul zu konfigurieren und das Modul zu befüllen mit allen routenrelevanten Elementen, die ich benötige in meiner Applikation. Als Allererstes erwartet forRoot, wie Ihr seht, eine Liste von Routen und das, was für ein Zufall, haben wir gerade schon angelegt, das ist die appRoutes. Optional kann ich übrigens jetzt hier auch noch zusätzliche Konfigurationen vornehmen. Eine der Konfigurationen, die ich hier entsprechend anlegen könnte, ist beispielsweise zu sagen: Bitte verwende nicht den HTML5 Mode sondern den alten Modus, so wie es in Angular 1 war, mit Raute vor dem jeweiligen Ordnernamen. Das forRoot selber, könnt Ihr erkennen, gibt ein ModuleWithProviders zurück, das im Grunde genommen dann wirklich ein Modul ist. Und dieses ModuleWithProviders werde ich hier ausgeben lassen. Ich verwende also einen Export, werde dann hier eine Variable exportieren, die ich Routing nenne und welche vom Typ her ModuleWithProviders ist. Damit ist meine Konfiguration der Route abgeschlossen und ich habe jetzt ein eigenes Modul. Ich habe dafür gesorgt, oder viel mehr WebStorm hat dafür gesorgt, dass automatisch alle notwendigen Imports durchgeführt worden sind. Bitte kontrolliert das bei Eurem Editor, ob das ebenfalls der Fall war. Und nun muss ich eigentlich nichts anderes mehr machen als dieses Routing, das ich als Modul gerade erstellt habe auf Basis der Routenkonfiguration, in mein Applikationsmodul aufzunehmen. Also gehe ich zurück zum Applikationsmodul und binde hier Routing ein. Ab jetzt weiß unsere Applikation Bescheid, weil das ist ja das Modul, mit dem dann auch später die gesamte Anwendung startet. Das haben wir ja hier in diesem main.ts hier festgehalten. Und ab jetzt weiß dann entsprechend unsere Angular-Anwendung Bescheid: Es gibt hier Routing, die sind im Routing Modul entsprechend konfiguriert und die muss ich auflösen. Das wird dann entsprechend das Angular Framework noch zusätzlich machen. Es wird nach einem Container Ausschau halten, in dem es die Komponenten die entsprechend dargestellt werden müssen, nämlich die Home Komponente und die User List Komponente, abhängig vom Pfad dann anzeigen kann. Und was ich jetzt hier mache, ist im Grunde genommen sehr einfach. Ich werde in meiner Anwendung selbst jetzt diese Container für die Komponenten hinterlegen. Dafür wechsle ich in meine app.component und werde eben die Komponenten nicht mehr per Hand hier ablegen sondern werde dann eine Komponente verwenden, die sich router-outlet nennt und die im Router Modul dann automatisch zur Verfügung gestellt wird. Und diese router-outlet Komponente ermöglicht hier das Ablegen der jeweiligen Komponente entsprechend der Router. Das möchte ich Euch nun hier beweisen. Wenn ich jetzt also jetzt "home" eintrage, dann könnt Ihr sehen, ist die Home entsprechend drin. Und "list" entsprechend die Liste. Ich kann selbstverständlich vor und nach dem Outlet alles Beliebige reinschreiben. Also wenn ich jetzt hier ein H1 machen würde, super oder? Dann könnt Ihr sehen, dass das ganz normal jetzt vor dem router-outlet ist und auch vor dem router-outlet interpretiert wird. Bleibt im Grunde genommen jetzt die Frage über: Wie ist es eigentlich, wenn ich eine bestimmten Pfad habe, und... oder vielmehr, was ist, wenn der User einen Pfad eingibt, der einfach nicht auflösbar ist? Was soll dann passieren? Dann sehen wir, dass Angular selber hingeht und den Pfad entfernt und einfach mit der index.html und dem Slash weitermacht. Das werde ich jetzt hier in meinem Routing also noch ganz schnell als Fall abhandeln, indem ich sage: Wenn der Pfad quasi die Route selber ist, also wie wir es jetzt exakt hier sehen, dann sei bitte so nett, kontrolliere, dass der Pfad wirklich komplett gematcht ist, also dass nichts anderes dazwischen ist, und sollte das der Fall sein, mache ein redirect, auf Home. Speichere das Ganze mal und jetzt könnt Ihr sehen, dass wenn ich entsprechend hier nichts eintrage, automatisch auf Home weitergeleitet wird, und last, but not least, möchte ich dafür sorgen, dass ein 404 verhindert wird. Das muss ich übrigens als letzten Pfad definieren, das ist wichtig. Da kann ich nämlich hier so zwei Wildcards einfach ansetzen. Und die beiden Wildcards, das braucht dann auch nicht mehr full sein, sollen dann dafür sorgen, dass automatisch auf Home referenziert wird. Also schauen wir mal: ich gebe nichts ein, es wird auf Home referenziert, ich gebe die Liste ein, es bleibt die Liste, ich gebe Home ein es bleibt home und ich gebe jetzt anschließend mal "hello world" ein und es wird automatisch wieder auf Home referenziert. Das passiert eben, weil dieses redirect hier mit den Wildcards arbeitet. In diesem Video haben wir gemeinsam gelernt, wie wir in der Lage sind, die Routen aufzulösen, und entsprechend das Routing in unsere Applikation einzubinden.

Angular 2 Grundkurs

Lernen Sie Angular 2 von Grund auf kennen und erkunden Sie die Möglichkeiten der Bindungen sowie den Einsatz von Direktiven und Pipes.

4 Std. 37 min (65 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

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!