Angular 2 Grundkurs

Routing konfigurieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Video konfigurieren Sie das Routing, damit der Komponenten-Router informiert ist, welche Komponenten zu einem bestimmten Pfad angezeigt werden sollen.
05:48

Transkript

Wir haben mittlerweile zwei Komponenten angelegt, einmal eine Home Komponente und eine List Komponente, die wir innerhalb des Angular Komponentenrouters verwenden möchten. Und Denkt dran bitte: der Angular Komponetenrouter hat die Aufgabe später, dass wenn ich hier "Home" eintrage die entsprechende Home Komponente angezeigt wird und wenn ich "List" eintrage soll die List Komponente angezeigt werden. Was muss ich dafür machen? Ich muss zunächst einmal zwei, drei Konfigurationen vornehmen. Die allerwichtigste Konfiguration, die ich vornehmen muss, ist in der index.html selbst. Denn in der index.html selbst muss ich nun dafür sorgen, dass ich eine base href definiere. Und die base href definiere ich deswegen, weil ich damit in die Lage versetzt werde, der Anwendung Bescheid zu sagen, wo sie sich an sich befindet. Das heißt, ich gehe hier in die index.html und direkt im Head Bereich werde ich jetzt hier einfach einen Base Knoten hinzufügen, mit einem href und einem einfachen Slash. Dieser Slash bedeutet einfach nichts anderes als "Hey Angular Anwendung. Achte drauf: du wurdest im Root des Servers nicht hinterlegt. Das heißt alle deine Routen musst du auch basierend auf dem ganzen normalen Slash, das heißt, auf der Route selbst suchen. Also schau bitte direkt nach dem ersten Slash, welche Werte hier eingetragen worden sind. Sei es Home, List oder Ähnliches." In manchen Fällen ist es so, das ich aber nicht in der Lage bin, eine Angular Anwendung direkt auf Root abzulegen. Das heißt, es kann mal sein, dass Ihr im Grunde genommen eine URL bekommen habt, die Kunden 123 und dann ist entsprechend dann hier eigentlich eure echte App. Das würde bedeuten: Der Root eurer Anwendung befindet sich nicht auf dem Server Root also müsstet Ihr entsprechend auch hier an der Stelle logischerweise die base href so einstellen, dass Angular immer noch eine Chance dafür bekommt, zu erkennen: Wo wird sich eigentlich die index.html befinden? Ab welchem Pfad bin ich eigentlich gemeint, um das Routing aufzulösen? Um das Ganze dann schlussendlich zu verwalten und zu realisieren. Denkt bitte dran, wenn Ihr solche Szenarien habt, werdet Ihr auch mit Sicherheit auf modernen Servern ein mod rewrite benutzen. Das heißt, Ihr müsst natürlich den Servern sagen, dass wenn auf einmal hier so etwas drin steht, wie "list" dass der Server bitte jetzt nicht nach dem Ordner List suchen soll oder nach dem Ordner Home, sondern das er eben das Ganze normal belassen soll und der index.html im Grunde genommen die Verwaltung dieser Pfade lassen muss. Das sind quasi Routings nach HTML5 Mode, nach HTML5 Standard. Angular1 hatte standardmäßig die Pfade so definiert, dass noch eine Raute davor gesetzt war. Angular 2 hingegen verwendet eben den HTML5 Modus als Standadrd und somit auch diese Variante. Ist aber auf modernen Systemen wirklich überhaupt kein Problem, diesen mod rewrite dann entsprechend zu initialisieren und auch zu nutzen. Mit diesem Element haben wir schon mal die erste wichtige Hürde gemeistert, wir sind also in der Lage, jetzt mit der base href Angular Bescheid zu sagen, wo es nach Routen Ausschau halten soll, und im nächsten Schritt konfigurieren wir die Routen selbst. Das ist relativ einfach. Ich erzeuge hier eine TypeScript Datei. Die TypeScript Datei nenne ich an dieser Stelle jetzt app.routing. Und ich werde jetzt hier damit beginnen, die Konfiguration der Route zu beginnen, indem ich zunächst einmal per Import mir die Routs importiere und zwar von Angular Router. Warum tue ich das? Routes ist ein Typ und dieser Typ ist im Grunde genommen eine Liste von Routenkonfiguratonen und über diesen Typ möchte ich entsprechend eine Konstante innerhalb dieses Javascript Moduls erstellen, nämlich const approutes Und diese Konstante ist eben vom Typ Routes. Und wie bereits erwähnt, ist Routes selber im Grunde genommen nichts anderes als eine Liste und diese Liste ist von Routenkonfigurationen dann entsprechend befüllt. Also erzeuge ich hier auch eine Liste, und werde jetzt ganz fix zwei Routen anlegen. Die erste Route, die ich anlege, die lege ich an, indem, ich zunächst einmal in der Konfiguration den Pfad selbst definiere, Der Pfad soll die List sein. Und die Komponente, die dafür dargestellt werden soll, ist entsprechend die User.List Komponente. Zusätzlich erzeuge ich einen weiteren Pfad und das soll entsprechend Home sein. Dadurch, dass Home zuerst sein sollte, werde ich es auch in der Reihenfolge der Konfiguration machen. Ist aber jetzt hier in dem Fall eigentlich die Reihenfolge nicht relevant. Also werde ich dann hier die Home Komponente packen. Mit diesen kleinen Schritten haben wir also schon im Grunde genommen unsere Konfiguration für unsere Route abgeschlossen. Wir haben also in der index.html selbst die base href gesetzt, und im App Routing haben wir jetzt zwei Pfade gesetzt. Nämlich den Pfad für Home und natürlich auch den Pfad für die Liste.

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!