[MUSIK]
Fangen wir jetzt an, über Angular Routing zu sprechen.
Ist es Routing oder verwurzelt es?
Ich werde zum Routing verwurzeln.
Von nun an werde ich all diese als Routing,
Routen, Router und so weiter aussprechen.
Wenn Sie aus einem Gebiet kommen, in dem Sie es auf Englisch als Route oder
Router aussprechen, bitte tragen Sie mit mir.
Also, was genau ist Angular Routing und wie hilft es uns?
In Bezug auf die Angular-Anwendung, die wir
bisher gesehen haben, haben wir noch nie die Verwendung für das Routing gesehen.
Wir haben gesehen, dass wir eine Winkelapplikation mit
mehreren Komponenten entwickeln und sie dann ineinander nutzen können und
eine ganze Angular-Anwendung entwickeln können, ohne auch nur über Routing zu sprechen.
Angenommen, Sie haben mehrere Komponenten und
möchten in der Lage sein, zwischen den Komponenten
so zu navigieren, dass Sie diese Navigation verursachen können
, z. B. durch Klicken auf Links oder Schaltflächen in Ihrer Benutzeroberfläche und in der
Lage sein, verschiedene Ansichten auf dem Bildschirm Ihrer Anwendung zu rendern,
dann Angular Routing kommt zu Ihrer Rettung.
Wir werden sehen, wie wir Routing verwenden können, um etwas namens
Single-Page-Anwendungen zu entwickeln.
Wir werden in der nächsten Lektion über einseitige Anwendungen sprechen.
Aber für den Moment, konzentrieren wir uns auf Angular Routing und
speziell auf die Route ein Modul, das in Angular verfügbar ist.
Das Router-Modul selbst ist getrennt vom Angular-Kernmodul, daher
ist es als separates Modul verfügbar und Sie müssen es explizit
in Ihre Angular-Anwendung importieren, um das unterstützte
Angular Router-Modell nutzen zu können, ermöglicht es Ihnen, zwischen
Radiusansichten zu navigieren aus den Radiuskomponenten, die Teil Ihrer Winkelpredation bilden.
Als Teil der Übung werden wir mehrere Komponenten hinzufügen und
wir werden sehen, wie wir zwischen ihnen mit dem Winkelrouter navigieren können.
Wie ich bereits erwähnt habe,
ermöglicht der Angular-Router die Navigation zwischen verschiedenen Ansichten.
So, dass Sie diese Navigation in
die Links oder die Symbolleisten-basierten Schaltflächen
einfügen können und so weiter, dass Sie in die Benutzeroberfläche Ihrer Angular-Anwendung einfügen
können und dann die Navigation von einer Ansicht zur anderen auslösen können,
indem Sie entweder auf den Link oder die Schaltfläche in Ihrem UI.
Hier nutzt der Angular Router die Browser-URL und
verwendet die Browser-URL als Anweisung, um
zwischen den vom Radius vom Client generierten Ansichten zu navigieren.
Diese Ansichten werden in der Regel von den mehreren Komponenten unterstützt
, die hart Ihrer Angular-Anwendung sind.
Wenn Sie nun von einer Ansicht zu einer anderen Ansicht navigieren,
können Sie auch optionale Parameter an diese Ansichten übergeben.
Wie wir in dieser vorherigen Folie gelernt haben,
nutzt der Angular Router die URL, um
es zu ermöglichen, die Notwendigkeit zu erkennen, zwischen der Mitte zu navigieren.
Also, hier nutzt Angular Router das, was
bereits in HTML5 über die History-API unterstützt wird?
Also, was ermöglicht uns die History-API zu tun?
Es gibt den Entwicklern die Möglichkeit, die
URL einer Website zu ändern, ohne eine Seitenaktualisierung zu verursachen.
Wenn Sie es gewohnt sind, verschiedene Websites in Ihrem Browser zu besuchen,
klicken Sie normalerweise entweder auf die Lesezeichenleiste oder
auf einen Link in einer Seite oder geben Sie
die URL explizit in die Adressleiste Ihres Browsers ein.
Wenn Sie das tun, geben Sie dort explizit die URL an.
Wenn Sie nun eine URL angeben,
lösen Sie Ihren Browser aus, automatisch zu einem Server zu wechseln und
diese neue Seite abzurufen und die Seite im Browserfenster zu rendern.
Nun, wenn es diese Notwendigkeit unterdrücken kann, zu einem Server zu gehen und Informationen zu holen, sondern
stattdessen die URL ändern, ohne diese Seite aktualisieren
zu verursachen, dann können wir nutzen, dass wir in der Lage sein,
zwischen Ansichten zu navigieren, die Teil einer einzigen Anwendung sind, und
dies ist, wo wir nehmen Vorteil des HTML5.
History API, die Methoden wie PushState und ReplaceState unterstützt.
Der PushState ermöglicht es Ihnen, einen Verlaufseintrag in den Verlauf Ihres
Browsers hinzuzufügen, ohne tatsächlich eine Seitenaktualisierung zu verursachen.
In ähnlicher Weise ändert ein ReplaceState
den vorhandenen Verlaufseintrag im Verlauf Ihres Browsers.
So können Sie sogar die Zurück- und
Vorwärts-Taste Ihres Browsers verwenden, um
zwischen den URLs hin und her zu bewegen, ohne eine Seitenaktualisierung zu verursachen.
Nun, hier müssen Sie etwas in Ihrer
Index-HTML-Seite angeben, das die Basis genannt wird.
Wenn die HTML-Verlaufs-API diese Methoden verwendet,
müssen Sie für die Änderung einen
Basisspeicherort angeben, von dem aus Sie die zusätzlichen Teile
Ihres URL-Pfads angeben, was nicht zu einer Seitenaktualisierung führt.
In diesem Fall
beginnt dies für unsere Angular-Anwendung immer an der Wurzel.
Deshalb geben wir die Basis als href=“/“ an.
Alles andere, was danach in der URL kommt, wird
innerhalb Ihrer Angular-Anwendung als etwas behandelt, das die
Navigation auslöst, die den Angular-Router selbst behandelt wird,
ohne dass Ihr Browser eine Aktualisierung von einem Server benötigt.
So nutzt der Winkelrouter die HTML5-Verlaufs-API.
Wenn Sie nun die History-API nicht haben, besteht
die andere Möglichkeit, die Navigation zu machen, darin, Hashtags zu verwenden.
Sie wissen bereits, dass in HTML, wenn Sie einen Link angeben, der
mit einem Hashtag beginnt, der sich auf einen Link innerhalb derselben Seite bezieht.
Wenn Sie also auf solche Links klicken, wird es keine Seitenaktualisierung verursachen.
Stattdessen werden Sie an einen anderen Speicherort innerhalb derselben Seite weitergeleitet.
Also, das ist eine andere Art, Dinge zu tun.
Für ein sauberes Rendern unterstützt die HTML5-API diese
Verlaufs-API, mit der Sie den Verlauf
Ihres Browsers bearbeiten können, ohne eine Seitenaktualisierung zu verursachen.
Lassen Sie uns nach dieser langen Erklärung ein Beispiel nehmen, um uns zu helfen, dies noch weiter zu verstehen.
Angenommen, Sie definieren Ihre URL wie folgt, zum Beispiel beispiel.abc.com/home.
Jetzt mit der HTML5-Verlaufs-API
können Sie einfach den letzten Teil der URL nehmen und
diesen in eine andere URL ändern, wie ich hier mit beispiel.abc.com/menu gezeigt hatte.
Sie sehen also, dass die URL jetzt von Schrägstrich Home in Schrägstrich Menü geändert wurde.
Diese Änderung kann mit einer Push-Statusmethode der
HTML5-History-API ausgelöst werden, ohne wie erwähnt, ohne die Seite neu zu laden.
Stattdessen wird dies ein interner Trigger für
die Navigation sein, den der Angular Router explizit nutzt, um
die Navigation zwischen verschiedenen Ansichten Ihrer Angular-Anwendung zu unterstützen.
Jetzt müssen Sie offensichtlich daran interessiert sein, wie der Angular Router
dies nutzt.
Hier nutzt der Angular Router die Verlaufsmanipulation, um die
URL des Browsers zu ändern, ohne eine Seitenaktualisierung auszulösen.
Nehmen wir ein Beispiel.
Angenommen, Sie haben Ihre Angular-Anwendung unter dieser bestimmten URL.
Nun kommt es so vor, dass die Angular-Anwendung, an der Sie arbeiten, im
Browser gerendert wird, indem Sie unter dieser bestimmten URL darauf zugreifen.
So wird es uns helfen, schnell zu verstehen, was der Angular Router uns ermöglicht.
In diesem Fall, wenn Sie dies in Ihre Browser-URL eingeben,
können Sie Angular Router einfach so konfigurieren, dass Sie
an einen Standardspeicherort innerhalb Ihrer Winkelanwendung umgeleitet werden.
In der Regel erinnern Sie mich, dass so etwas wie zu Hause.
Das bringt Sie also zum Standard-Einstiegspunkt für
Ihre eckige Anwendung, die aus
Gründen des einfachen Verständnisses, ich werde es als /home beschriften.
Wenn Ihre URL also localhost: 4200/home enthält,
bedeutet das, dass Sie sich an Ihrem Standardstandort befinden.
Nun, wenn diese Navigation ausgelöst wird,
können Sie dann von Ihrem Angular Router automatisch zu der Ansicht bringen lassen
, die beispielsweise von dieser Home-Komponente unterstützt wird.
Wenn die URL also localhost: 4200/home wird,
werden Sie automatisch die Ansicht der Home-Komponente im Browserbildschirm rendern.
Sehr genau, wenn Sie die Ansicht platzieren, die wir auf der nächsten Folie und
in der folgenden Übung betrachten.
In ähnlicher Weise können Sie andere Ansichten in Ihrer
Angular-Anwendung haben, die auch über andere URLs unterstützt werden können
, die Erweiterungen für localhost: 4200 sind.
Wenn die URL beispielsweise localhost: 4200/aboutus lautet,
kann dies dazu führen, dass Sie die Ansicht angezeigt werden, die von der AboutComponent gerendert wird.
Und in ähnlicher Weise zeigt Ihnen das Menü die MenuComponent und so weiter.
Dies ermöglicht uns also,
je nachdem, welche URL in Ihrem Browser verwendet
wird, verwenden Sie diese, um automatisch zwischen den verschiedenen
Ansichten Ihrer verschiedenen Komponenten Ihrer Angular-Anwendung zu navigieren.
Sie müssen sich nicht explizit darum kümmern.
Wenn Sie den Angular Router so konfigurieren, dass er sich um all dies kümmert,
kümmert sich der Router automatisch darum, Ihnen die Navigation zwischen diesen
Komponenten bereitzustellen, wie wir in der Übung sehen würden, die dieser speziellen Vorlesung folgt.
Bevor wir nun mit der Übung fortfahren, wo wir mehr über
den Winkelrouter erfahren werden, lassen Sie mich schnell Ihre Aufmerksamkeit auf ein paar Begriffe
innerhalb des Angular Routers lenken, die Sie während der Übung begegnen werden, und
ich möchte, dass Sie besonders auf diese Begriffe achten,
weil sie entscheidend, um zu verstehen, wie der Angular Router tatsächlich funktioniert.
Sie würden also zuerst sehen, dass wir, wenn wir den Angular Router entwerfen,
diese Hilfe des Router-Moduls nehmen, das
Teil der eckigen Schrägstrich Router-Bibliothek ist.
Also werden wir das Router-Modul in oder eckige Anwendung in
das App-Modul importieren und dann werden wir auch die Routen importieren.
Die Routen ermöglichen es uns also, die verschiedenen Routen zu definieren, die unsere
Angular-Anwendung nutzt oder von denen der Angular Router verwendet wird.
In diesem Fall würden wir also die Routen in Form eines Pfades und
der entsprechenden Komponente angeben.
Wie Sie in der vorherigen Folie gesehen haben, haben Sie gesehen, dass jede dieser
URL-Erweiterungen der Ansicht einer bestimmten Komponente zugeordnet wurde. Diese
Art von Informationen wird also an diesen Angular Router
über Routen geliefert und diese Routen werden alle mit
einem JavaScript-Objekt wie diesem Pfad mit zwei Eigenschaften angegeben.
Pfad und Komponente und einige zusätzliche Eigenschaften, die wir
jetzt nicht begegnen werden, aber wir werden in einigen der späteren Übungen sehen.
Die zweite Frage, die Sie sich fragen würden, ist auch, wo würde diese Ansicht
in Ihrer Angular-Anwendung gerendert werden?
Dies ist, wo in unserer Vorlage unserer App-Komponente,
werden wir eine Direktive als RouterOutlet genannt, die angegeben wird, wie Sie
sehen, als und .
Dies wird in die App-Komponenten-Vorlagendatei aufgenommen,
jetzt navigiert Ihr Angular Router zu
den verschiedenen Ansichten der verschiedenen Komponenten.
Die entsprechende Ansicht der Komponente wird in Ihre
Anwendungsansicht eingefügt, wo immer Sie diese bestimmte Router-Steckdose angeben.
Also, achten Sie auf das in der folgenden Übung.
Um die Navigation auszulösen, würden Sie außerdem sehen, dass
bei vielen der a-Tags, die in der Anwendung verwendet werden.
So würde ich zum Beispiel ein Setup ein Tags mit der
MD-Schaltfläche Angular Materialkomponente in der Symbolleiste einfügen,
in der Header-Komponente unserer Angular-Anwendung.
Ich würde die a-Tags mit einer anderen Direktive verknüpfen,
einer Attributrichtlinie namens RouterLink.
Der RouterLink ist eine eigentliche Direktive, die das Routermodul für uns bereitstellt.
Dieser Router-Link ermöglicht es uns, den Pfad wie zum Beispiel
geschriebene Codes anzugeben, kann ich ein „/menu“ sehen.
Sie können mehr Details als diese für den RouterLink haben.
Aber für die Übung, werden wir mit einem einfachen Beispiel beginnen, wo wir haben,
zum Beispiel, /menu Schrägstrich Hause Kontakt mit uns und so
weiter mit dem RouterLink-Attribut direkt angegeben.
Wenn Sie also auf einen Link wie diesen in Ihrer Symbolleiste
klicken, löst dies den Angular Router aus, um eine Änderung oder
eine Navigation zu einer bestimmten Ansicht zu verursachen, die vom Angular Router Modul unterstützt wird.
Also, das Mapping zwischen dieser Verbindung und den entsprechenden Komponenten
ist bereits in der Route angegeben, die wir unserer Angular-Anwendung geben.
Also, achten Sie auf all diese Dinge, während Sie die Übung machen.
Ich werde einige dieser Dinge erklären und den Grund dafür erklären,
sie zu tun, während wir die Schritte der Übung ausführen, die dieser Lektion folgt.
( MUSIK)