Angular 2 Grundkurs

Routing vorbereiten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Grundlagen des Komponenten-Routers werden in diesem Video erläutert. Zudem treffen Sie erste Vorbereitungen, um Routing in die App einzubinden.
03:39

Transkript

Angular 2 verfügt über einen Komponentenrouter, der es Euch ermöglicht, anhand von URLs bestimmte Komponenten in Eurer Applikation darstellen zu können. Wie das Ganze funktioniert habe ich in einem kleinen Beispiel mal für Euch vorbereitet. Schaut mal. Bin ich im Root meiner Anwendung sehe ich die Liste. Würde ich hier /home eintragen, wird automatisch ein Welcome View angezeigt. Trage ich hier wieder list ein, wird eine List View angezeigt. Das heißt, Angular besitzt die Intelligenz, die URL zu kontrollieren und anhand dieser URL dann Komponenten darzustellen. Damit ich das Ganze jetzt mit Euch zusammen erarbeiten kann, habe ich ein wenig Vorarbeit geleistet. Die Vorarbeit ist eben die Komponenten, die angezeigt werden sollen, nämlich Home und die Liste, schon mal vorzubereiten. Lasst uns Mal die Home Komponente selbst ansehen. Die Home Komponente ist unendlich primitiv, denn sie ist eine ganz normale Component mit einem Selector und hier steht "Welcome!" drin. Schaut mal, Home ... Ganz normal das Welcome!, ansonsten gar nichts. Die Home Komponente selber habe ich in einem Home Modul registriert, wie Ihr seht, und auch exportiert, damit ich sie anschließend im Applikationsmodul einfach importieren kann. Weiter habe ich natürlich auch eine User Liste angelegt, und die User Liste, die ich angelegt habe, die baut im Grunde genommen darauf auf, was wir bisher in unseren Beispielen gemacht haben. Schaut mal: bisher in unseren Beispielen war es ja so gewesen, dass wir direkt in der Applikationskomponente selbst eine User Komponente hatten, und die User Komponente haben wir so oft wiederholt, bis sich alle User innerhalb der userList dargestellt haben. Das bedeutete natürlich auch, dass die app.component selber Informationen wie die User Liste verwalten musste. Dies habe ich jetzt für unser Sample umgebaut, denn die user-list component ist neu und die user-list component soll ja jetzt die Aufgabe übernehmen, die Verwaltung der Liste zu übernehmen. Das heißt, die user-list Komponente, wie ich sie jetzt hier habe, die hat entsprechend die Verwaltung der User Liste, die holt sich die User Liste, genau so wir früher die app.component auch und die hat selbstverständlich auch das Template und dieses Template ist exakt 1:1 das Gleiche wie wir es zuvor in den Beispielen immer genutzt haben. Das heißt, wir haben auf sehr einfache Art und Weise eine neue Komponente erstellt, die im Grunde genommen das Gleiche abbildet, wie in den Sampeln bisher. Zusätzlich muss diese Komponente natürlich auch registriert werden. Die Registrierung haben wir durchgeführt im User Modul. Und hier im User Modul seht Ihr dann entsprechend das die User Komponente und die UserList Komponente registriert ist. Nehmt bitte auch unbedingt zur Kenntnis, dass in diesem Sample jetzt natürlich auch UtilsModule mit importiert werden muss, denn Ihr verwendet ja innerhalb Eurer User Liste die Ihr hier habt, die Italic und MyColor Direktiven, die Ihr in Utils registriert habt. Das heißt, das muss natürlich hier an dieser Stelle mit importiert werden. Das sind also die wichtigsten Vorbereitungen, die ich treffen muss. Ich muss erst mal die Komponenten haben, die ich auf die Bühne legen will, und anschließend kann ich dann weiterarbeiten. Der nächste Schritt, der dann entsprechend folgt, ist die Konfiguration der Router, welches ich Euch gleich zeigen möchte. In diesem Video haben wir erst mal grundsätzlich das Prinzip des Routings kennen gelernt.

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)
Theorie statt Praxis
Anonym
Leider gibt es in diesem Video einige Abschnitte, in denen die theoretischen Ausführungen überwiegen und Praxisbeispiele zu kurz kommen.

Leichter verständlich wäre es, wenn die Theorie im Rahmen von Praxisbeispielen erklärt werden würde. Das passiert zwar in manchen Abschnitten, aber in einigen auch nicht.

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!