Share
Mit der jüngsten offiziellen Veröffentlichung von Angular 2 ist es ein guter Zeitpunkt, um einige der größten Änderungen kennenzulernen.
Eine Sache, die sich stark verändert hat, ist der Angular 2-Router, der im Vorfeld der endgültigen Veröffentlichung komplett ersetzt wurde. In diesen beiden kurzen Video-Tutorials aus meinem Kurs zu Angular 2 Routing zeige ich Ihnen, wie Sie Routenkonfigurationen erstellen und in einer App verwenden. Sie lernen einfache Routen, Umleitungen und Platzhalter-Routen. Anschließend erfahren Sie, wie Sie mithilfe einer Anweisung Ihre App-Komponente zum Anzeigen der Routen konfigurieren.
Die Videos folgen den vorherigen Lektionen des Kurses, aber Sie sollten in der Lage sein, die von uns verwendeten Techniken zu verfolgen. Sie finden die Quelldateien für das gesamte Projekt auf GitHub.
Es ist möglich, eine vollständige App in Angular 2 ohne Routing zu erstellen. Wenn wir das können, warum brauchen wir überhaupt Routing??
Der Hauptgrund ist, dass, wenn wir kein Routing verwenden, unsere App ausschließlich von der Navigation durch die Programmsteuerung abhängt. Wir müssen Komponenten basierend auf Benutzerinteraktionen austauschen, z. B. wenn sie auf etwas klicken.
Beim Routing können wir durch Wechseln der URLs navigieren. Alle Komponenten werden einer Route zugeordnet, sodass wir uns in unserer App problemlos bewegen können.
Um das Routing zum Laufen zu bringen, müssen wir zunächst eine Basis-Href im Kopf unserer index.html-Datei hinzufügen.
Zuvor haben wir unsere Routen in der Komponente konfiguriert, die sie hostet. In diesem Fall würde dies bedeuten, dass wir unsere route-configs unserer app.component-Datei hinzufügen. Mit dem neuen Router wird empfohlen, unsere Routenkonfiguration in einer separaten Datei zu erstellen.
Also erstellen wir eine Datei mit dem Namen app.routes.ts im Stammverzeichnis des App-Ordners.
Das erste, was wir zu dieser Datei hinzufügen werden, sind die Importe.
Zuerst greifen BereitstellenRouter oder RouterConfig vom Angular Router. Importieren Sie anschließend die Komponenten "About", "Error" und "Home" aus dem Ordner "pages". Wir müssen diese importieren, damit wir diese Komponenten routen können.
Als nächstes fügen wir unsere Routenkonfiguration hinzu, um unsere Routen zu speichern:
const routen: RouterConfig = [];
Hier benutzen wir eine const Erklärung. Dies ist eine der Möglichkeiten, wie wir eine Variable in TypeScript deklarieren können. Sie stellt einen Wert dar, der nicht geändert werden kann. In diesem Fall benutzen wir es, um unser zu halten RouterConfig.
Nun wird als erstes eine Weiterleitung hinzugefügt. In Kürze werden wir eine Wildcard-Route für unsere Fehlerseite hinzufügen. Dies alleine führt dazu, dass unsere App von der Fehlerseite aus gestartet wird. Der Grund ist, dass beim Start unserer App keine Route vorhanden ist. Daher müssen wir eine Komponente als Standardroute angeben.
Wir könnten die Komponente, mit der wir unsere App starten möchten, problemlos der leeren Route hinzufügen. Die empfohlene Vorgehensweise ist jedoch eine Weiterleitung. Die Weiterleitung muss an erster Stelle stehen, sonst funktioniert sie nicht richtig. So sieht es aus:
Zuerst haben wir unseren Weg, der eine leere Route ist. Dies ist die Route, mit der unsere App starten wird. Dann haben wir unsere Weiterleitung, die unseren Weg nach Hause ändern wird, wenn sie auf eine leere Route trifft. Danach haben wir unsere pathMatch. Ich werde nicht viel ins Detail gehen, außer um zu sagen, dass dies dazu führt, dass die leere Route mit der Weiterleitung übereinstimmt.
Dann haben wir unsere Route, die auf den Punkt zeigt AboutComponent. Der Pfad ist auf festgelegt 'Über', Dies ist, was wir in der Adressleiste sehen, wenn wir zu dieser Route navigieren. Die Komponente, zu der navigiert wird, ist die AboutComponent. Danach haben wir die HomeComponent. Der Weg ist 'Zuhause', und die zu startende Komponente ist die HomeComponent.
Dies ist die Route, zu der wir von der Weiterleitung aus navigieren werden. Die letzte Route, die wir hinzufügen werden, ist eine Wildcard-Route. Dies passt zu allen Routen, die wir definiert haben. Aus diesem Grund haben wir die Weiterleitung hinzugefügt. Wenn dies nicht der Fall ist, startet unsere App auf dieser Route, da wir von einer nicht definierten Route aus, einer leeren Route, starten.
Nachdem Sie die Weiterleitung hinzugefügt haben, wird für jede Route, die wir nicht eingeben, die Fehlerseite angezeigt. Dann exportieren wir ein weiteres const mit der Routermethode "Angular" von Angular. Wir verwenden die Routen, die wir mit dieser Methode konfigurieren.
Sobald wir das getan haben, sind unsere Routen beendet. Als letztes müssen wir unserer App Routing hinzufügen.
Gehe zum main.ts Datei. Das erste, was wir in dieser Datei tun werden, ist Importieren myRouterProviders von der App-Routen-Datei, die wir erstellt haben. Dann müssen wir es zu unserer Bootstrap-Funktion hinzufügen. Wenn Sie sie hier hinzufügen, haben Sie den Vorteil, dass die Routen für alle Komponenten in unserer App verfügbar sind.
Sobald wir das getan haben, sind wir mit dem Aufbau unserer Routen fertig. Im nächsten Video werden wir die Routing-Konfiguration abschließen und eine Vorschau der App anzeigen.
Bisher haben wir unsere Routen konfiguriert und zu unserer Bootstrap-Funktion hinzugefügt. Jetzt müssen wir nur noch unsere App-Komponente konfigurieren, um unsere Routen zu hosten.
Hier ist wie app.component.ts sollte aussehen:
Zunächst importieren wir unsere Router-Direktiven. Wir haben dies bereits zuvor gesehen, wenn eine Komponente den Router-Link verwenden muss. Diese Komponente verwendet eine Router-Verbindung und eine andere Anweisung für den Angular 2-Router-Ausgang. Danach entfernen wir die Vorlage und fügen einen Backtick hinzu, um daraus eine Vorlagenzeichenfolge zu machen. Dadurch können wir eine mehrzeilige Vorlage erstellen.
Zuerst fügen wir ein div für unsere Bootstrap-Navigationsleiste. Diese Navigationsleiste wird auf jeder Seite angezeigt, da sie Teil der Vorlage ist. In der Navigationsleiste fügen wir unsere Marke hinzu. Dies kann ein Text oder ein Bild sein und stellt das Branding Ihrer App dar.
Dann fügen wir eine ungeordnete Liste hinzu. Im Inneren fügen wir unsere Links für eine Navigationsleiste hinzu. In unseren Links haben wir anstelle einer URL, zu der Sie navigieren können RouterLink. So navigieren wir unter Benutzerinteraktion zu einer Route. Wenn Sie auf diese Schaltfläche klicken, navigieren Sie hier zur Startseite.
Wir können auch schreiben RouterLink in einer anderen Form innerhalb eines Arrays. Wir tun dies normalerweise, wenn wir unserer Route mehr Informationen zur Verfügung stellen müssen. Dann haben wir auch eine routerLinkActive Direktive, die die Menüklasse auf die Verknüpfung anwendet, wenn die Route aktiv ist. Wir verwenden dies, um einen visuellen Hinweis darauf zu geben, auf welcher Seite wir uns befinden.
Dann fügen wir einen weiteren Router-Link hinzu, der zur Info-Seite navigiert. Dann werden wir das hinzufügen Router-Steckdose Richtlinie. Deshalb benötigen die Komponenten keinen Selektor. Wenn sie zum Routing geladen werden, werden diese Komponenten von dieser Anweisung gehostet. Während der Rest dieser Vorlage auf jeder Seite statisch angezeigt wird, wird der Router-Steckdose ändert sich je nachdem, zu welcher Route navigiert wird. Schließlich fügen wir für diese Datei die Router-Direktiven hinzu.
Danach müssen wir als letztes eine CSS-Regel hinzufügen style.css Datei:
.Menü Hintergrundfarbe: Weiß;
Diese Regel gilt für die Klasse, die angewendet wird, wenn die an die Routerverbindung angeschlossene Route aktiv ist. Der Hintergrund des Links ist die Farbe Weiß. Nun ist das Routing für unsere App konfiguriert.
Speichern Sie das Projekt und führen Sie es aus npm starten im Projektordner.
Wenn alles richtig gemacht wurde, sollte die App über einen Webbrowser kompiliert und dann gestartet werden.
Wenn Sie feststellen, ist der Hintergrund der Home-Link weiß schattiert. Dies ist so, weil dies die aktive Route ist. Dann wenn wir auf klicken Über Schaltfläche, sollten wir auf die Info-Seite gehen.
Danach geben wir eine nicht vorhandene Route in die Adressleiste ein. Wenn wir das tun, sollten wir eine Fehlerseite bekommen.
Wir haben jetzt Routing in unserer App, aber wir können noch viel mehr damit machen. Im weiteren Verlauf des Kurses tauchen Sie viel tiefer in das Routing ein.
Im vollständigen Kurs, Angular 2 Routing, werde ich Ihnen zeigen, wie Sie den neuen Angular 2-Router in Ihren Apps verwenden. Sie erfahren, wie Sie das grundlegende Routing für statische Seiten konfigurieren, wie Sie Parameter aus dem Routenpfad extrahieren und wie Sie Ihr Routing modular gestalten. Sie werden auch sehen, wie die Benutzerzugriffskontrolle mit dem Angular 2-Router implementiert werden kann.
Accentsconagua