[MUSIC]
In dieser Übung
werden wir uns ansehen, wie wir das Routing-Modul des Angular nutzen können, um mehrere Komponenten zu unterstützen und in
der Lage zu sein, zu einer dieser Komponenten in unserer Angular-Anwendung zu navigieren. Werfen Sie
einen kurzen Blick auf den Stand unserer Anwendung.
Am Ende der letzten Übung
haben wir bereits bemerkt, dass
wir in dieser Anwendung, in der Kopfzeile, Links zu vier verschiedenen Zitaten haben, unquote Seiten hier.
Jetzt in Angular Begriffen würde dies durch die Verwendung
verschiedener Komponenten unterstützt werden, wie wir in dieser Übung sehen werden.
Also hier sehen wir, dass, wenn wir auf die Startseite klicken,
wollen wir in der Lage sein, die Details zu sehen, was auf der Startseite vorhanden sein sollte.
Und ähnlich, die Über und das Menü natürlich sehen Sie es bereits direkt dort,
und dann der Kontakt, wahrscheinlich zeigt einige Informationen über den Inhalt für
dieses spezielle Restaurant.
Wie sollen sie so etwas unterstützen?
Erstens, wenn wir einen kurzen Blick darauf werfen, sehen wir, dass das Menü
bereits unterstützt wird, indem die Informationen über das Menü hier angezeigt werden, und
dies wird bereits mit der Verwendung der Menükomponente erleichtert.
So sehen wir, dass die Menükomponente zwischen der Kopfzeile und
der Fußzeile gegenübergestellt wird und die Informationen direkt dort angezeigt werden können.
Wie können wir nun die Verwendung des Angular Router-Moduls nutzen, um es
uns zu ermöglichen, diese verschiedenen Komponenten zu unterstützen und zwischen ihnen zu navigieren.
Nun, um zu beginnen, benötigen wir zuerst natürlich mehrere Komponenten,
jede von ihnen zeigt ihre jeweilige Ansicht, so dass wir zwischen den Ansichten navigieren können.
Lassen Sie uns also drei weitere Komponenten zu unserer Angular-Anwendung hinzufügen,
die Startseite, die Über und den Kontakt.
Sie wissen bereits, wie das geht, also gehen wir zum nächsten Schritt. Geben Sie
an der Eingabeaufforderung ng g component
home ein, um die Home-Komponente zu erstellen.
In ähnlicher Weise erzeugen
Sie die über Komponente und
auch während wir dabei
die Kontaktkomponente sind.
So haben wir jetzt drei Komponenten zusammen mit der neuen Komponente hinzugefügt, die wir
bereits haben.
Die Datenträgerdetailkomponente wird bereits in den Menükomponenten verwendet, so dass
wir sie im Moment nicht berücksichtigen.
Aber wir haben jetzt zu Hause, über, Kontakt und Menükomponenten, und
wir brauchen eine Möglichkeit, zwischen ihnen zu gehen.
Also, wie machen wir das?
Also, hier verwende ich das Angular Router-Modul.
Um mit dem Router-Modul zu beginnen, damit wir
zwischen diesen Komponenten navigieren können, fügen wir ein neues Angular-Modul hinzu.
Jetzt ist dieses Muster der Verwendung des Router-Moduls etwas, das für
etwas komplexere Angular-Anwendungen vorgeschlagen wird, aber
wenn wir das als Standardpraxis machen, geht es weit, um uns in Zukunft zu helfen.
Also beginne ich sogar die einfache Anwendung damit,
das Router-Modul in ein eigenes separates Modul zu setzen.
Das umfasst alle unsere Routing-Anforderungen in einem separaten Modul.
Um zu beginnen, verwenden wir erneut die Angular CLI, um
ein anderes Modul zu erstellen, und wir werden dieses Modul als App-Routing aufrufen.
Dieses App-Routing-Modul, das wir erstellen werden, wird
das Angular Slotting Modul nutzen, um Routing-Funktionen für unsere Anwendung bereitzustellen.
Und dann werden wir das in unserem App-Modul nutzen, um Routing zu ermöglichen.
Um ein neues Modul namens app routing zu erstellen, geben Sie
an der Eingabeaufforderung ng g module app-routing ein,
und das sollte ein App-Routing-Modul erstellen und
eine app-routing.module.ts Datei in diesen bestimmten Ordner dort ablegen.
Jetzt ist dieses App-Routing-Modul einfach dort gelassen.
Wir müssen das explizit in unser App-Modul aufnehmen,
also muss es in der Lage sein, es zu nutzen. Wenn wir
zum Editor gehen, sehen wir nun, dass wir jetzt einen anderen Ordner hier
namens app-routing haben und innerhalb dessen wir ein ApproutingModule hier haben,
wählen wir ein generisches Angular Modul, das die Angular CLI für uns generiert hat.
Dies hat momentan nichts Spezifisches über Routing als solches,
aber wir werden diese Funktionen dort hinzufügen.
Aber bevor wir das tun, verwenden wir dieses ApproutingModule in unserem app.module,
dem Root-Modul für unsere Angular-Anwendung.
Um dies zu tun, öffnen Sie das app.module, und
während wir hier sind, lassen Sie mich ein wenig aufräumen.
Ich neige dazu, keinen disorganisierten Code
zu mögen, also werde ich diesen ganzen Code für
die Komponenten an einem Ort dort verschieben und
dann habe ich meine Dienste unten hier unten benötigt.
Jetzt haben wir ein neues Modul, das wir
vom ApproutingModule bekommen,
das wir gerade erstellt haben und
dann werde ich das
ApproutingModule in mein,
Route-Modul oder das AppModule hier benötigen.
Also, ich füge das ApproutingModule ein, indem ich es zuerst dort importiere.
Und danach gehe ich in die Importe hinein und
füge dann das ApproutingModule hinzu.
Genau da, ApproutingModule.
Damit
ist mein App-Modul, das Root-Modul, jetzt behoben, um das ApproutingModule zu nutzen.
Jetzt gibt es mir die Freiheit, meinen Routing-Teil in
meinem ApproutingModule mit voller Zuversicht zu entwickeln, dass es von meinem App-Modul verwendet wird.
Also lassen Sie uns die Änderungen am App-Modul speichern, und
dann gehen wir zurück und öffnen Sie das ApproutingModule hier.
Und hier werden wir
das Router-Modul nutzen, das Angular für uns bereitstellt.
Also hier lassen Sie mich das,
RouterModule hier und auch das
Begleitmodul Routes importieren, das von Angular erhältlich ist.
Und dann werde ich das aus Angular
und dann RouterModule hier importieren.
Aus der Winkel-Router-Bibliothek importiere ich sowohl das RouterModule als auch
das Route-Modul.
Also, sobald ich das mache, muss ich natürlich in der Lage sein, das RouterModule hier einzubinden.
Also, zusätzlich zu dem CommonModule, das ich dort importiert
habe, muss ich hier auch das RouterModule verwenden.
Jetzt werde ich es an diesem Punkt belassen.
Wir entwickeln die Routen für unsere Angular-Anwendung und
kommen dann wieder und korrigieren diese etwas später.
Lassen Sie mich also die Änderungen am App-Routing-Modul speichern.
Und was ich tun werde, ist, nur um meinen Code sauber und
organisiert zu halten, werde ich alle Routen für meine Anwendung in einer anderen Datei definieren.
Aber ich werde im App-Routing-Ordner erstellen und
dann werde ich es als routes.ts5 benennen.
Jetzt, in dieser Datei, werde ich alle Routen erstellen, die ich brauche.
Also, hier werde ich importieren,
Die Routen von, @angular /router,
und dann verwenden, um die Routen für meine Anwendung zu konstruieren.
Jetzt muss ich außerdem in der Lage sein, alle
Komponenten zu importieren, die ich in meiner Anwendung habe.
Weil ich in der Lage sein möchte, zu allen Komponenten zu navigieren.
Wo habe ich also die Liste aller Komponenten?
Ich habe sie im app_module.
Also lassen Sie mich zum app_module gehen.
Ich versuche, Dinge nicht so weit wie möglich zu tippen, um die Dinge unter Kontrolle zu halten.
Also gehe ich zum app_module und kopiere dann alle Komponenten, die ich habe.
Ich brauche die AppComponent nicht, weil ich nicht direkt dazu in meiner
Anwendung navigiere, sondern die restlichen, die ich brauche.
Also werde ich einfach alle diese kopieren und
sie dann in meine Routendatei einfügen, hier.
Also jetzt habe ich die MenuComponent, das Dishdetail, Header, Fuß.
Eigentlich brauche ich auch nicht die Kopf- und FooterComponent.
Ich brauche nicht die
Kopf- und FooterComponent, weil ich nicht mit Routen zu ihnen navigieren werde.
Lassen Sie mich also die Kopf- und Fußzeilenkomponenten löschen.
Ich brauche nur das Menü, Home, Über, Kontakte.
Ich habe das Dishdetail aufgenommen, dazu werden wir in einer der späteren Übungen kommen.
Nun, da wir all diese eingeschlossen haben, ist der nächste Schritt für
mich, die verschiedenen Routen zu definieren, die hier verfügbar sind.
Ich werde hier eine Konstante definieren, die
Routen vom Typ Routen genannt wird.
Jetzt siehst du also, warum ich wichtige Routen vom Angular-Router dort habe.
Dadurch kann ich ein Array definieren,
das die verschiedenen Routen angibt, die Teil meiner Anwendung sind.
Lassen Sie mich hier alle Routen angeben.
Wenn Sie nun Routen in Ihrer
Angular-Anwendung angeben, geben Sie den Pfad an.
Was ich mit der HomeComponent beginnen werde,
und wenn ich dann zum Home-Pfad navigiere,
ist die entsprechende Komponente die HomeComponent.
Also, wenn meine URL home enthält,
dann navigiere ich zur HomeComponent.
In der Vorlesung zuvor haben wir bereits gesehen, wie wir den HTML
PushState () verwenden, um die interne
Navigation zu erkennen, indem wir die HTML-Unterstützung für den PushState () verwenden.
Das ist also, was ich hier nutze, um diese verschiedenen Routen hier zu definieren.
Also, wenn ich localhost sage: 4200/home,
dann zeigt das auf die HomeComponent, hier.
So navigiere ich zur HomeComponent.
Ebenso können wir für die anderen Komponenten in unserer Anwendung definieren.
Der nächste Pfad, den ich definieren werde, ist zur MenuComponent.
Für diese Übung werde ich nur diese beiden definieren.
Die restlichen werden im Rahmen
einiger der nachfolgenden Übungen und Aufgaben ausgefüllt.
Also haben wir zwei von ihnen eingerichtet, Home und Menu.
Jetzt sollte ich auch die Standardroute hier angeben.
Wenn der Benutzer also zu localhost navigiert: 4200,
dann landen Sie am Standardspeicherort.
In diesem Fall werde ich den Benutzer einfach zur HomeComponent umleiten,
was in der Angular-Anwendung angezeigt wird. Um das
zu tun, werde ich die Eigenschaft RedirectTo eingeben.
Und dann definieren Sie das zu /home.
Das bedeutet, dass Sie, wenn Sie navigieren, ohne dort einen URL-Pfad
anzugeben, automatisch zur HomeComponent navigieren würden,
und dies sollte hier voll übereinstimmen.
Also diese drei, werde ich für die Routen hier liefern, für den Moment.
Die restlichen
werden, wie gesagt, als Teil der restlichen Übungen hinzugefügt werden.
Nun, offensichtlich siehst du diese roten zerquetschigen
Linien da, weil die alle in sind
../Also lass mich die reparieren.
Also, jetzt, aus der Datei routes.ts,
bereiten wir diese Routenkonstante hier vor und
machen sie dann verfügbar.
Jetzt, da dies für uns bereit ist, werden wir zum app-routing.module zurückkehren.
Und im app-routing.module
werde ich die Routenkonstante importieren,
Routenkonstante.
Wenn Sie sagen möchten, dass als Routen, Routen Konstanten, und verwenden Sie es hier.
Wie kann ich es hier nutzen?
Nun nimmt das RouterModule
als Parameter für die ForRoot,
Der Parameter ist die Routenkonfiguration.
Also werde ich die Routen als Parameter dafür bereitstellen, das RouterModule.
Okay, damit behebt unsere Routing-Konfiguration für unsere Anwendung.
Eine letzte Änderung, die wir beheben müssen, ist, dass
wir vom app-routing.module aus in der Lage sein wollen, das RouterModule in unser app-Modul zu exportieren
, damit es es auch nutzen kann.
Dies ist, wo wir die
Exporteigenschaft in unserem NGModule Dekorator verwenden.
Und stellen Sie unser RouterModule für das AppModule zur Verfügung.
Also lassen Sie uns die Änderungen auch bisher speichern.
Wenn Sie nun zu einem dieser Teile weiterleiten,
unabhängig davon, welche Ansicht Sie für die jeweilige Komponente anzeigen.
Wir haben momentan nichts in unserer Bewerbung.
Wenn Sie sich die Datei AppComponent.html ansehen.
Hier haben wir standardmäßig nur die app-header, app-menu
und die app-footer hier.
Nun zum Glück
bietet uns das Angular RouterModule
eine Direktive namens Router-Steckdose.
Also, wenn Sie diese Direktive als angeben,
Das Tag in Ihrer Vorlagendatei.
Dann verwendet Ihre Angular-Anwendung
dies automatisch als den Ort, an dem die entsprechende Ansicht eingefügt werden muss.
Also, indem Sie das Router-Outlet in der Vorlagendatei meiner AppComponent angeben.
Jetzt werde ich in der Lage sein, jede dieser Informationen an diesem bestimmten Ort anzuzeigen.
Also haben wir Änderungen am App-Routing-Modul,
der Datei AppComponent.html, vorgenommen, wo wir das Router-Outlet hinzugefügt haben.
Wir haben die Routen in der Routes.ts-Datei definiert und
dann haben wir das AppModule, wo wir im ApproutingModule
als einen der Importe dort hinzugefügt haben, nachdem wir es hier oben importiert haben.
Lassen Sie uns nach all diesen Änderungen
einen Blick darauf werfen, was unsere Angular-Anwendungen im Browser zeigt. Wenn wir
zu unserem Browser gehen, können wir jetzt sehen, dass in unserem Browser
die Standardsache, die hier gezeigt wurde, zu Hause funktioniert.
Aus Ihrem Wissen, wie die Komponente, die von Angular CLI generiert wird, funktioniert.
Sie erkennen bereits, dass dies in der Vorlage für die Home-Komponente enthalten sein muss.
Werfen Sie auch einen Blick auf die URL im Adressteil des Browsers.
Sie sehen, dass es localhost sagt: 4200/home.
Wenn ich einfach localhost: 4200 tippe,
wird sich dies automatisch zu localhost umleiten: 4200/home.
Weil wir diese spezielle Route in unserer Routenkonfiguration hier einrichten.
Jetzt haben wir keine Möglichkeit, zu den restlichen Modulen zu gehen, also
wie stellen wir die Verknüpfung bereit, damit wir zum verbleibenden Modul navigieren können.
Um das auszufüllen, müssen wir gehen und in der Lage sein, zusätzliche
Informationen in den Header-Komponenten-Vorlagendateien hinzuzufügen
, so dass es zwischen diesen verschiedenen Komponenten navigieren kann.
Kommen Sie zurück zu unserem Editor, lassen Sie mich die Datei HeaderComponent.html öffnen.
In dieser HeaderComponent-Datei sehen wir, dass wir diese Schaltflächen
hier oben haben, die es uns ermöglichen sollten, zu diesen bestimmten Komponenten dort zu navigieren.
Also hier nehmen wir die Hilfe einer anderen Attribut-Direktive,
die das Routing-Modul für uns als RouterLink zur Verfügung stellt.
Dazu liefern wir
RouterLink als /home.
Was bedeutet, dass für diesen speziellen Button,
der Home-Link in unserer Werkzeugleiste.
Wenn wir darauf klicken, sollte mich das automatisch nach Hause leiten.
Auf diese Weise weiß meine Angular-Anwendung, wohin ich mich an dieser Stelle schicken soll.
Das ist also für Zuhause da.
Nun ähnlich, lassen Sie mich auch eine für das Menü hier hinzufügen.
Für das Menü, wenn ich auf den Menü-Link dort klicke,
sollte das mich zur Menükomponente bringen.
Die RouterLink-Attributdirektive ermöglicht es mir, wie Sie
hier eine Zeichenfolge sehen, in der ich den Pfad angeben kann, der hinzugefügt werden muss.
Lassen Sie uns diese Änderungen auch speichern, und dann werfen Sie einen letzten Blick auf unsere Anwendung.
Gehen wir zu unserer Anwendung, jetzt sehen wir, dass eine Home-Komponente hier angezeigt wird.
Wenn wir auf die Menükomponente klicken, befinden wir uns im Menü.
Beachten Sie also, wie meine Anwendung automatisch zur
Menükomponente navigiert hat, um die Ansicht mit dem Menü hier anzuzeigen.
Und wenn Sie sich auch die Adressleiste ansehen,
beachten Sie, wie die Adressleiste jetzt localhost anzeigt: 4200/menu.
Wieder können wir zurück zur Home-Komponente und zur Menükomponente navigieren,
hin und her.
Dies zeigt also, wie
wir durch Hinzufügen dieses Routing zu unserer Anwendung navigieren und verschiedene Ansichten innerhalb unserer Anwendung anzeigen können.
Nun, die Über und Kontakt, wir werden das als Teil
einer anderen Übung und der Aufgabe, die später folgt, tun.
Dies schließt diese Übung ab, wo wir Angular Router Modul verwendet haben und
dann unsere Angular-Anwendung konfiguriert haben, um verschiedene Routen
zu verwenden, um die verschiedenen Ansichten anzuzeigen.
Dies ist ein guter Zeitpunkt für
Sie, ein Git-Commit mit der Nachricht Angular Router Grundlagen zu machen.
( MUSIK)