Angular Router: Eine Einführung in die Komponenten -Routing

Dies ist Teil 4 des SitePoint Angular 2 -Tutorials zum Erstellen einer CRUD -App mit der Winkel -CLI. In diesem Artikel stellen wir Angular Router vor und erfahren, wie sie unsere Anwendung aktualisieren können, wenn sich die Browser -URL ändert, und umgekehrt. Wir werden auch erfahren, wie wir unsere Anwendung aktualisieren können, um Daten von unserer Back-End-API mit dem Router zu beheben.

In Teil 1 haben wir gelernt, wie wir unsere Todo -Anwendung zum Ausführen bringen und auf Github -Seiten bereitstellen können. Dies funktionierte gut, aber leider wurde die gesamte App in eine einzige Komponente zusammengefasst.

In Teil zwei haben wir eine modularere Komponentenarchitektur untersucht und gelernt, diese einzelne Komponente in einen strukturierten Baum kleinerer Komponenten zu unterteilen, die leichter zu verstehen, wiederverwenden und aufrechtzuerhalten.

In Teil drei haben wir unsere Anwendung aktualisiert, um mit einem REST -API -Back -End mit dem HTTP -Dienst von RXJS und Angular zu kommunizieren.

1. Teil 0 - Die ultimative Angular -CLI -Referenzhandbuch
2. Teil 1 - Erhalten Sie unsere erste Version der Todo -Anwendung und laufend
3. Teil 2 - Erstellen Sie separate Komponenten, um eine Liste von Todos und eine einzelne Todo
anzuzeigen
4. Teil 3 - Aktualisieren Sie den Todo -Dienst, um mit einer REST -API
zu kommunizieren.
Teil 4 - Verwenden Sie den Angular -Router, um Daten
6. aufzulösen
Teil 5 - Authentifizierung hinzufügen, um den privaten Inhalt zu schützen
Teil 6 - So aktualisieren Sie Winkelprojekte auf die neueste Version.

Mach dir keine Sorgen! Sie müssen nicht zwei oder drei dieses Tutorials verfolgt haben, damit vier Sinn machen müssen. Sie können einfach eine Kopie unseres Repo schnappen, den Code von Teil drei auschecken und diesen als Ausgangspunkt verwenden. Dies wird unten ausführlicher erklärt.

Key Takeaways

• Winkelrouter ermöglicht die Erstellung von Einzelseiten -Anwendungen (SPAs), indem die staatlichen Übergänge und Navigationspfade zwischen verschiedenen Anwendungszuständen verwaltet werden.
• Der Router übernimmt die URL -Änderungen der Browser -URL und aktualisiert den Anwendungszustand, sodass die Anwendung dynamisch auf URL -Änderungen reagieren kann, ohne die Seite neu zu laden.
• Angular Router unterstützt die faule Belastung, wodurch die anfängliche Lastleistung durch das Laden von Modulen bei Bedarf und nicht beim Start verbessert wird.
• Routenwächter im Angular -Router schützen bestimmte Routen, indem sie den Zugriff basierend auf der Benutzerauthentifizierung oder anderen Kriterien steuern, um sicherzustellen, dass nur autorisierte Benutzer auf bestimmte Teile der Anwendung zugreifen können.
• Der Router kann 404 Fehler oder falsche URLs mit Wildcard -Routing verarbeiten, wodurch Benutzer auf eine vorgewiesene Seite „404 nicht gefunden“ oder andere Fallback -Seite umgeleitet werden, wenn keine Routen mit der URL übereinstimmen.
• Winkelrouter ermöglicht das Übergeben von Daten zwischen Routen mithilfe von Routenparametern, die den Inhalt oder das Verhalten von Komponenten dynamisch beeinflussen können.
• Debugging -Routing -Probleme werden durch Router -Ereignisse erleichtert, die detaillierte Informationen zum Routing -Prozess liefern und angemeldet werden können, um das Routing -Verhalten zu verstehen und zu lösen.

up und rennen

Stellen Sie sicher, dass Sie die neueste Version der Angular CLI installiert haben. Wenn Sie dies nicht tun, können Sie es mit dem folgenden Befehl installieren:

<span>npm install -g @angular/cli@latest
</span>

Wenn Sie eine frühere Version der Winkel -CLI entfernen müssen, können Sie dies tun:

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

Danach benötigen Sie eine Kopie des Code aus Teil drei. Dies ist bei GitHub erhältlich. Jeder Artikel in dieser Serie hat ein entsprechendes Tag im Repository, damit Sie zwischen den verschiedenen Zuständen der Anwendung hin und her wechseln können.

Der Code, mit dem wir in Teil drei beendet sind und mit dem wir in diesem Artikel beginnen, ist als Teil 3 mitgeteilt. Der Code, mit dem wir diesen Artikel beenden, wird als Teil 4 markiert.

Sie können sich Tags wie einen Alias ​​einer bestimmten Commit -ID vorstellen. Sie können mit Git Checkout zwischen ihnen wechseln. Hier können Sie mehr darüber lesen.

Um zum Laufen zu gehen (die neueste Version der angularen CLI installierten) würden wir dies tun:

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-3
</span><span>npm install
</span>ng serve

Besuchen Sie dann http: // localhost: 4200/. Wenn alles gut ist, sollten Sie die funktionierende Todo -App sehen.

Eine schnelle Zusammenfassung

So sah unsere Anwendungsarchitektur am Ende von Teil 3 aus:

In diesem Artikel werden wir:

• Erfahren Sie, warum eine Anwendung möglicherweise Routing muss
• Erfahren Sie, was für ein JavaScript -Router
ist
• Erfahren Sie, welcher Winkelrouter ist, wie es funktioniert und was es für Sie tun kann
• Richten Sie den Winkelrouter ein und konfigurieren Sie die Routen für unsere Anwendung
• Erstellen Sie einen Resolver, um die Todos von unserer REST -API zu holen
Aktualisieren Sie unsere Anwendung, um die Todos mit unserem neuen Resolver abzurufen.

Am Ende dieses Artikels werden Sie verstehen:

Wann und warum Ihre Anwendung möglicherweise Routing
• muss
Der Unterschied zwischen Routing auf dem Server und dem Routing im Browser
Welcher Winkelrouter ist und was kann er für Ihre Anwendung tun
wie man Winkelrouter aufstellt
So konfigurieren Sie Routen für Ihre Anwendung
wie man den Angular -Router mitteilt, wo Komponenten in der DOM
• platziert werden sollen
wie man mit unbekannten URLs anmutig umgeht
Was für ein Resolver ist und was für
• verwendet werden kann
So verwenden Sie einen Resolver, um Daten mit dem Winkelrouter zu lösen.

Also fangen wir an!

Warum Routing?

In seinem aktuellen Zustand berücksichtigt unsere Webanwendung die Browser -URL nicht.

Wir greifen auf unsere Anwendung über eine URL zu, wie z.

Die meisten Webanwendungen müssen verschiedene URLs unterstützen, um Benutzer auf verschiedene Seiten in der Anwendung zu navigieren. Hier kommt ein Router ins Spiel.

In traditionellen Websites wird Routing von einem Router auf dem Server behandelt:

1. Ein Benutzer klickt auf einen Link im Browser, wodurch die URL
geändert wird
2. Der Browser sendet eine HTTP -Anforderung an Server
3. Der Server liest die URL aus der HTTP -Anforderung und generiert eine geeignete HTTP -Antwort
4. Der Server sendet die HTTP -Antwort an den Browser.

In modernen JavaScript -Webanwendungen wird Routing häufig von einem JavaScript -Router im Browser behandelt.

Was ist ein JavaScript -Router?

Im Wesentlichen macht ein JavaScript -Router zwei Dinge:

1. Aktualisieren Sie den Webanwendungsstatus, wenn sich die Browser -URL
ändert
Aktualisieren Sie die Browser -URL, wenn sich der Webanwendungsstatus ändert.

JavaScript-Router ermöglichen es uns, einseitige Anwendungen (SPAs) zu entwickeln.

Ein Spa ist eine Webanwendung, die eine Benutzererfahrung bietet, die einer Desktop -Anwendung ähnelt. In einem Spa tritt die gesamte Kommunikation mit einem Back -End hinter den Kulissen auf.

Wenn ein Benutzer von einer Seite zur anderen navigiert, wird die Seite dynamisch ohne Nachladen aktualisiert, auch wenn sich die URL ändert.

Es sind viele verschiedene JavaScript -Router -Implementierungen verfügbar.

Einige von ihnen werden speziell für ein bestimmtes JavaScript -Framework wie Angular, Ember, React, Vue.js und Aurelia usw. geschrieben

Was ist Winkelrouter?

Angular Router ist eine offizielle Angular -Routing -Bibliothek, die vom Angular Core -Team geschrieben und gepflegt wird.

Es handelt sich um eine JavaScript -Router -Implementierung, die mit Angular funktioniert und als @Angular/Router verpackt ist.

Zunächst kümmert sich Angular Router um die Aufgaben eines JavaScript -Routers:

• Es aktiviert alle erforderlichen Winkelkomponenten, um eine Seite zu verfassen, wenn ein Benutzer zu einer bestimmten URL
navigiert
• Ermöglicht die Benutzer von einer Seite zu einer anderen ohne Seite Reload
navigieren
• iT aktualisiert den Geschichte des Browsers, damit der Benutzer die Tasten zurück und vorwärts verwenden kann, wenn Sie zwischen Seiten hin und her navigieren.

Zusätzlich ermöglicht uns Angular Router:

• eine URL zu einer anderen URL
umleiten
Daten auflösen, bevor eine Seite angezeigt wird
Skripte ausführen, wenn eine Seite aktiviert oder deaktiviert wird
LAZY Teile unserer Anwendung laden.

In diesem Artikel lernen wir, wie Sie einen Winkelrouter einrichten und konfigurieren, wie Sie eine URL umleiten und wie man Angular Router verwendet, um Todos von unserer Back-End-API zu lösen.

Im nächsten Artikel werden wir unserer Anwendung Authentifizierung hinzufügen und den Router verwenden, um sicherzustellen, dass auf einige der Seiten nur zugegriffen werden kann, wenn der Benutzer angemeldet ist.

Wie der Winkelrouter

funktioniert

Bevor wir in den Code eintauchen, ist es wichtig zu verstehen, wie der Angular -Router arbeitet und welche Terminologie, die er einführt,

Wenn ein Benutzer zu einer Seite navigiert, führt Angular Router die folgenden Schritte in der Reihenfolge aus:
2. liest die Browser -URL, zu der der Benutzer navigieren möchte, zu
3. Es wendet eine URL -Umleitung an (falls eine definiert ist)
4. Es findet sich heraus, welcher Router -Zustand der URL
entspricht
5. Es wird die Wachen ausgeführt, die im Router -Zustand definiert sind
6. Es wird die erforderlichen Daten für den Router -Status
gelöst
es aktiviert die Winkelkomponenten, um die Seite

anzuzeigen

Es verwaltet die Navigation und wiederholt die obigen Schritte, wenn eine neue Seite angefordert wird.

Um seine Aufgaben zu erledigen, führt Angular Router die folgenden Begriffe und Konzepte ein:

• Router Service: Der globale Angular -Router -Service in unserer Anwendung
• Router Konfiguration: Definition aller möglichen Router gibt an, dass unsere Anwendung in
stattfinden kann
• Routerzustand: Der Zustand des Routers irgendwann, ausgedrückt als Baum mit aktivierten Routen -Snapshots
• aktiviertes Routen -Snapshot: Bietet Zugriff auf die URL, die Parameter und Daten für einen Router -Statusknoten
• Schutz: Skript, das ausgeführt wird, wenn eine Route geladen, aktiviert oder deaktiviert ist
• Resolver: Skript, das Daten abreißt, bevor die angeforderte Seite aktiviert ist
• Router Auslass: Position im Dom, wo der Winkelrouter aktivierte Komponenten platzieren kann.

Mach dir keine Sorgen, wenn die Terminologie überwältigend klingt. Sie werden sich an die Begriffe gewöhnen, wenn wir sie allmählich in dieser Serie angehen und wenn Sie mehr Erfahrungen mit dem Angular -Router sammeln.

Eine Winkelanwendung, die Angular Router verwendet, hat nur eine Router -Service -Instanz: Es ist ein Singleton. Wann und wo immer Sie den Router -Service in Ihre Anwendung injizieren, erhalten Sie Zugriff auf die gleiche Angular -Router -Service -Instanz.

Für einen eingehenderen Blick auf den Winkelrouting-Prozess lesen Sie den 7-Stufen-Routing-Prozess der Angular-Router-Navigation.

Aktivieren von Routing

Um das Routing in unserer Winkelanwendung zu ermöglichen, müssen wir drei Dinge tun:

1. Erstellen Sie eine Routing -Konfiguration, die die möglichen Zustände für unsere Anwendung
definiert
2. Importieren Sie die Routing -Konfiguration in unsere Anwendung
3. Fügen Sie einen Router -Outlet hinzu, um Angular Router zu sagen, wo die aktivierten Komponenten in der DOM platziert werden sollen.

Beginnen wir also mit einer Routing -Konfiguration.

Erstellen der Routing -Konfiguration

Um unsere Routing -Konfiguration zu erstellen, benötigen wir eine Liste der URLs, die unsere Anwendung unterstützt.

Derzeit ist unsere Anwendung sehr einfach und hat nur eine Seite, auf der eine Liste von Todos angezeigt wird:

• /: Liste der Todos
anzeigen

, die die Liste der Todos als Startseite unserer Anwendung anzeigen würde.

Wenn jedoch ein Benutzer buchstabiert / in seinem Browser, um seine Liste der Todos zu konsultieren und den Inhalt unserer Homepage zu ändern (die wir in Teil 5 dieser Serie tun werden), würde ihr Lesezeichen ihre Liste nicht mehr zeigen von Todos.

Geben wir also unserer TODO -Liste eine eigene URL und leiten Sie unsere Homepage dazu um:

• /: Umleiten zu /todos
• /todos: Liste der Todos anzeigen.

Dies bietet uns zwei Vorteile:

• Wenn Benutzer die Todos -Seite mit einem Lesezeichen versehen, wird ihr Browser ein Lesezeichen /Todos anstelle von /, was wie erwartet weiter funktioniert, auch wenn wir den Inhalt der Startseite ändern
• Wir können jetzt unsere Startseite leicht ändern, indem wir sie in eine beliebige URL umleiten, die bequem ist, wenn Sie Ihren Homepage -Inhalt regelmäßig ändern müssen.

Der offizielle Angular Style Guide empfiehlt das Speichern der Routing -Konfiguration für ein Winkelmodul in einer Datei mit einem Dateinamen, der in -Routing endet

Unser aktuelles Modul wird als AppModule bezeichnet. Wir erstellen daher eine Datei SRC/App/App-Routing.module.ts und exportieren unsere Routing-Konfiguration als Winkelmodul namens CmulutingModule:

<span>npm install -g @angular/cli@latest
</span>

zuerst importieren wir Routermodule und Routen von @Angular/Router:

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

Als nächstes definieren wir variable Routen von Typrouten und weisen diese unsere Router -Konfiguration zu:

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-3
</span><span>npm install
</span>ng serve

Der Routetyp ist optional und lässt eine IDE mit TypeScript -Unterstützung oder dem Typenkriptkompiler Ihre Routenkonfiguration während der Entwicklung bequem validieren.

Die Routerkonfiguration repräsentiert alle möglichen Router, in denen unsere Anwendung angegeben ist.

Es ist ein Routenbaum, der als JavaScript -Array definiert ist, wobei jede Route die folgenden Eigenschaften haben kann:

Pfad: String, Pfad, um mit der URL
• übereinzustimmen
pathmatch: String, wie man mit der URL
• übereinstimmt
Komponente: Klassenreferenz, Komponente zu aktivieren, wenn diese Route aktiviert wird
RedirectTo: String, URL, um zu leiten, wann diese Route aktiviert ist
Daten: statische Daten, die Route
• zugewiesen werden sollen
Auflösung: Dynamische Daten zur Auflösung und Zusammenführung mit Daten, wenn
• aufgelöst wird
Kinder: Kinderrouten.

Unsere Anwendung ist einfach und enthält nur zwei Geschwisterrouten, aber eine größere Anwendung könnte eine Routerkonfiguration mit untergeordneten Routen haben, wie z. B.

<span>import { NgModule } from '@angular/core';
</span><span>import { RouterModule, Routes } from '@angular/router';
</span><span>import { AppComponent } from './app.component';
</span>
<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    component<span>: AppComponent
</span>  <span>}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  imports<span>: [RouterModule.forRoot(routes)],
</span>  exports<span>: [RouterModule],
</span>  providers<span>: []
</span><span>})
</span><span>export class AppRoutingModule {
</span><span>}
</span>

Hier hat Todos zwei untergeordnete Routen und: ID ist ein Routenparameter, sodass der Router die folgenden URLs erkennen kann:

/: Homepage, leiten Sie zu /todos
• um
/todos: Aktivieren Sie TodospageComponent und zeigen Sie die Liste von Todos
/todos/1: Aktivieren Sie TodopageComponent und setzen Sie den Wert von: ID -Parameter auf 1
/todos/2: Aktivieren Sie das TodopageComponent und setzen Sie den Wert von: ID -Parameter auf 2.

Beachten Sie, wie wir PathMatch angeben: 'voll' bei der Definition der Umleitung.

Winkelrouter hat zwei Matching -Strategien:

Präfix: Standard, übereinstimmt, wenn die URL mit dem Wert des Pfades beginnt
voll: Übereinstimmt, wenn die URL dem Pfadwert entspricht.

Wir können die folgende Route erstellen:

<span>import { RouterModule, Routes } from '@angular/router';
</span>

In diesem Fall wendet Angular Router die standardmäßige Strategie für Präfixpfadanpassungen an und jede URL wird in TODOS umgeleitet, da jede URL mit der leeren Zeichenfolge beginnt, die auf dem Pfad angegeben ist.

Wir möchten nur, dass unsere Startseite in Todos umgeleitet wird. Daher fügen wir PathMatch hinzu: 'voll', um sicherzustellen, dass nur die URL, die der leeren Zeichenfolge entspricht, übereinstimmt:

<span>npm install -g @angular/cli@latest
</span>

Um mehr über die verschiedenen Routing -Konfigurationsoptionen zu erfahren, lesen Sie die offizielle Winkeldokumentation zum Routing und der Navigation.

Schließlich erstellen und exportieren wir ein Winkelmodul zu und exportieren Sie die Genehmigungsmodul:

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

Es gibt zwei Möglichkeiten, ein Routing -Modul zu erstellen:

1. Routermodule.fOrroot (Routen): Erstellt ein Routing -Modul, das die Router -Direktiven, die Routenkonfiguration und den Router -Dienst enthält
2. Routermodule.forchild (Routen): Erstellt ein Routing -Modul, das die Router -Richtlinien enthält, die Routenkonfiguration, jedoch nicht der Router -Dienst.

Die Methode von Rousterodule.forchild () ist erforderlich, wenn Ihre Anwendung mehrere Routing -Module hat.

Denken Sie daran, dass der Router -Service die Synchronisation zwischen unserem Anwendungszustand und der Browser -URL kümmert. Das Instanziieren mehrerer Router -Dienste, die mit derselben Browser -URL interagieren, würde zu Problemen führen. Daher ist es wichtig, dass in unserer Anwendung nur eine Instanz des Router -Dienstes vorhanden ist, unabhängig davon, wie viele Routing -Module wir in unserer Anwendung importieren.

Wenn wir ein Routing -Modul importieren, das mit Routermodule.fOrroot () erstellt wird, wird Angular den Router -Service instanziiert. Wenn wir ein Routing -Modul importieren, das mit Routermodule.forchild () erstellt wurde, wird Angular den Router -Service nicht instanziiert.

Daher können wir nur einmal Routermodule.fOrroot () verwenden und Rousterodule.forchild () mehrmals für zusätzliche Routing -Module verwenden.

Da unsere Anwendung nur ein Routing -Modul hat, verwenden wir Rousterodule.fOrroot ():

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-3
</span><span>npm install
</span>ng serve

Zusätzlich geben wir Routermodule in der EXPORTS -Eigenschaft an:

<span>import { NgModule } from '@angular/core';
</span><span>import { RouterModule, Routes } from '@angular/router';
</span><span>import { AppComponent } from './app.component';
</span>
<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    component<span>: AppComponent
</span>  <span>}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  imports<span>: [RouterModule.forRoot(routes)],
</span>  exports<span>: [RouterModule],
</span>  providers<span>: []
</span><span>})
</span><span>export class AppRoutingModule {
</span><span>}
</span>

Dies stellt sicher, dass wir Routermodule in AppModule nicht explizit importieren müssen, wenn AppModule die Zulassungsmodule importiert.

Jetzt, da wir unsere Genehmigungsmodule haben, müssen wir es in unserem AppModule importieren, um es zu aktivieren.

Importieren der Routing -Konfiguration

Um unsere Routing -Konfiguration in unsere Anwendung zu importieren, müssen wir die Genehmigungsmodule in unser Haupt -AppModule importieren.

Öffnen wir src/app/app.module.ts und fügen Sie das Import -Array in AppModule von @ngmodule metadata:

Zulassungsmodule hinzu:

<span>import { RouterModule, Routes } from '@angular/router';
</span>

Da die Genehmigungsmodule RoutingModule in seiner Exports -Eigenschaft aufgelistet hat, importiert Angular RoutingModule beim Importieren von Genehmigungsmodule, sodass wir Routermodule nicht mehr explizit importieren müssen (obwohl dies keinen Schaden verursachen würde).

.

.

Bevor wir unsere Änderungen im Browser ausprobieren können, müssen wir den dritten und letzten Schritt ausfüllen.

Hinzufügen eines Router -Outlets

Obwohl unsere Anwendung jetzt über eine Routing -Konfiguration verfügt, müssen wir den Angular -Router noch mitteilen, wo die instanziierten Komponenten in der DOM platzieren können.

Wenn unsere Anwendung Bootstrade ist, angular Instantiates AppComponent, da AppComponent in der Bootstrap -Eigenschaft von AppModule:

aufgeführt ist

<span>npm install -g @angular/cli@latest
</span>

Um den Angular-Router zu sagen, wo es Komponenten platzieren kann, müssen wir das HTML-Vorlage von AppComponent das Element hinzufügen.

.

Das Element sagt Angular Router, in dem es Komponenten im DOM instanziieren kann.

Wenn Sie bekannt sind, können Sie angularjs 1.x Router und UI-Router vertraut sind, Sie können die Winkel-Alternative zu NG-View und Ui-View betrachten.

Ohne ein Element würde Angular Router nicht wissen, wo die Komponenten platziert werden sollen, und nur HTML von AppComponent würde gerendert.

AppComponent zeigt derzeit eine Liste von Todos an.

, aber anstatt AppComponent eine Liste von Todos anzeigen zu lassen, möchten wir jetzt, dass AppComponent ein enthält, und den Angular Router anweisen, eine andere Komponente innerhalb von AppComponent zu instanziieren, um die Liste der TODOS anzuzeigen. Um dies zu erreichen, generieren wir eine neue Komponente mit einem Angular CLI:

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

Verschieben wir auch alle HTML von SRC/App/App.comPonent.html auf SRC/App/Todos/Todos.comPonent.html:

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-3
</span><span>npm install
</span>ng serve

Verschieben wir auch die gesamte Logik von SRC/App/App.comPonent.ts auf SRC/App/Todos/Todos.comPonent.ts:

<span>import { NgModule } from '@angular/core';
</span><span>import { RouterModule, Routes } from '@angular/router';
</span><span>import { AppComponent } from './app.component';
</span>
<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    component<span>: AppComponent
</span>  <span>}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  imports<span>: [RouterModule.forRoot(routes)],
</span>  exports<span>: [RouterModule],
</span>  providers<span>: []
</span><span>})
</span><span>export class AppRoutingModule {
</span><span>}
</span>

Jetzt können wir die Vorlage von AppComponent in SRC/App/App.comPonent.html durch:

<span>import { RouterModule, Routes } from '@angular/router';
</span>

ersetzen

Wir können auch alle veralteten Code aus der Klasse von AppComponent in SRC/App/App.comPonent.ts:

<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    component<span>: AppComponent
</span>  <span>}
</span><span>];
</span>

entfernen

Schließlich aktualisieren wir unsere Todos-Route in SRC/App/App-Routing.module.ts, um Todoscomponent anstelle von AppComponent zu instanziieren:

<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    children<span>: [
</span>      <span>{
</span>        path<span>: '',
</span>        component<span>: 'TodosPageComponent'
</span>      <span>},
</span>      <span>{
</span>        path<span>: ':id',
</span>        component<span>: 'TodoPageComponent'
</span>      <span>}
</span>    <span>]
</span>  <span>}
</span><span>];
</span>

Wenn unsere Anwendung nun Bootstrade ist, angular Instantiates AppComponent und findet ein , bei dem Angular Router Komponenten instanziieren und aktivieren kann.

Probieren wir unsere Änderungen im Browser aus.

Starten Sie Ihren Entwicklungsserver und Ihre Back-End-API, indem Sie ausführen:

<span>// no pathMatch specified, so Angular Router applies
</span><span>// the default `prefix` pathMatch
</span><span>{
</span>  path<span>: '',
</span>  redirectTo<span>: 'todos'
</span><span>}
</span>

Navigieren Sie Ihren Browser zu http: // localhost: 4200.

Angular Router liest die Routerkonfiguration und leitet unseren Browser automatisch auf http: // localhost: 4200/todos.

Wenn Sie die Elemente auf der Seite inspizieren, werden Sie feststellen, dass die Todoskomponente nicht in gerendert wird, aber direkt daneben:

<span>{
</span>  path<span>: '',
</span>  redirectTo<span>: 'todos',
</span>  pathMatch<span>: 'full'
</span><span>}
</span>

Unsere Anwendung ist jetzt Routing aktiviert. Super!

Hinzufügen einer Platzhalterroute

Wenn Sie in Ihrem Browser zu http: // localhost: 4200/unübertroffen-URL navigieren und die Entwickler-Tools Ihres Browsers öffnen, werden Sie feststellen

<span><span>@NgModule</span>({
</span>  imports<span>: [RouterModule.forRoot(routes)],
</span>  exports<span>: [RouterModule],
</span>  providers<span>: []
</span><span>})
</span><span>export class AppRoutingModule {
</span><span>}
</span>

Um nicht übereinstimmende URLs zu handhaben, müssen wir zwei Dinge tun:

1. Erstellen Sie PagenotfoundComponent (Sie können es anders benennen, wenn Sie möchten), um eine freundliche Nachricht anzuzeigen, dass die angeforderte Seite nicht gefunden werden konnte
2. Sagen Sie den Angular -Router, den PagenotfoundComponent anzuzeigen, wenn keine Route mit der angeforderten URL übereinstimmt.

Beginnen wir mit dem Erzeugen von PagenotfoundComponent mit Angular CLI:

<span>npm install -g @angular/cli@latest
</span>

Bearbeiten Sie dann seine Vorlage in SRC/App/Page-NOT-Found/Page-not-Found.component.html:

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

Als nächstes fügen wir eine Wildcard -Route mit ** als Pfad hinzu:

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-3
</span><span>npm install
</span>ng serve

Die ** entspricht jeder URL, einschließlich Kinderpfaden.

Wenn Sie nun in Ihrem Browser zu http: // localhost: 4200/unübertroffen-URL navigieren, wird pagenotfoundComponent angezeigt.

Beachten Sie, dass die Wildcard -Route die letzte Route in unserer Routing -Konfiguration sein muss, damit sie wie erwartet funktioniert.

Wenn der Angular -Router mit einer Anforderungs -URL mit der Routerkonfiguration übereinstimmt, wird die Verarbeitung eingestellt, sobald sie das erste Spiel findet.

Wenn wir also die Reihenfolge der Routen auf diese ändern würden:

<span>import { NgModule } from '@angular/core';
</span><span>import { RouterModule, Routes } from '@angular/router';
</span><span>import { AppComponent } from './app.component';
</span>
<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    component<span>: AppComponent
</span>  <span>}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  imports<span>: [RouterModule.forRoot(routes)],
</span>  exports<span>: [RouterModule],
</span>  providers<span>: []
</span><span>})
</span><span>export class AppRoutingModule {
</span><span>}
</span>

Dann würde Todos niemals erreicht werden und der Pagenotfoundcomponent würde angezeigt, da die Wildcard -Route zuerst übereinstimmt.

wir haben schon viel getan, also lass uns schnell zusammenfassen, was wir bisher erreicht haben:

• Wir stellen Winkelrouter auf
• Wir haben die Routing -Konfiguration für unsere Anwendung
erstellt
• Wir haben AppComponent zu todoscomponent
neu gestellt.
Wir haben zur Vorlage von AppComponent
• hinzugefügt
Wir haben eine Wildcard -Route hinzugefügt, um unvergleichliche URLs anmutig zu bewältigen.

Als nächstes werden wir einen Resolver erstellen, um die vorhandenen Todos von unserer Back-End-API mit einem Winkelrouter abzurufen.

Daten mithilfe von Angular Router

auflösen

In Teil 3 dieser Serie haben wir bereits gelernt, wie man Daten aus unserer Back-End-API mit dem Winkel-HTTP-Dienst abholt.

, wenn wir unseren Browser zur TODOS -URL navigieren, geschieht Folgendes:

Winkelrouter entspricht der Todos -URL
3. Winkelrouter aktiviert die Todoskomponente
4. Angular Router platziert die Todoskomponente neben im DOM
5. Die Todoskomponente wird im Browser mit einem leeren Anteil von Todos
angezeigt
6. Die Todos werden aus der API im Ngoninit -Handler von Thetodoscomponent
abgeholt

Die Todoskomponente wird im Browser mit den von der API abgeholten Todos aktualisiert.

Wenn das Laden der Todos in Schritt 5 drei Sekunden dauert, wird dem Benutzer drei Sekunden lang eine leere Todo -Liste angezeigt, bevor die tatsächlichen Todos in Schritt 6 angezeigt werden.

<span>import { RouterModule, Routes } from '@angular/router';
</span>

Wenn die Todoskomponente die folgende HTML in seiner Vorlage haben:

Dann würde der Benutzer diese Nachricht drei Sekunden lang sehen, bevor die tatsächlichen Todos angezeigt werden, was den Benutzer völlig irreführen und den Benutzer veranlassen könnte, vor dem Eintauchen der tatsächlichen Daten zu navigieren.

Wir könnten ein Lader zu einem Todeskomponenten hinzufügen, der einen Spinner zeigt, während die Daten geladen werden, aber manchmal haben wir möglicherweise keine Kontrolle über die tatsächliche Komponente, beispielsweise wenn wir eine Komponente von Drittanbietern verwenden.

Um dieses unerwünschte Verhalten zu beheben, brauchen wir Folgendes:

1. Winkelrouter entspricht der Todos -URL
Winkelrouter holt die Todos aus der API
3. ab
4. Winkelrouter aktiviert die Todoskomponente
5. Angular Router platziert die Todoskomponente neben im DOM

Die Todoskomponente wird im Browser angezeigt, wobei die von der API abgeholten Todos abgeholt werden.

Hier wird das Todoscomponent erst angezeigt, wenn die Daten aus unserer API -Back -End verfügbar sind.

genau das kann ein Resolver für uns tun.

Um den Angular -Router die Todos auflösen zu lassen, bevor es die Todoskomponente aktiviert, müssen wir zwei Dinge tun:
2. Erstellen Sie einen Todosresolver, der die Todos aus der API
abruft

Sagen Sie den Angular -Router, den Todosresolver zu verwenden, um die Todos beim Aktivieren des Todoskomponenten in der Todos -Route abzurufen.

Durch Anhängen eines Resolvers an die Todos -Route bitten wir den Angular -Router, zuerst die Daten zu beheben, bevor das Todoskomponenten aktiviert ist.

Lassen Sie uns einen Resolver erstellen, um unsere Todos zu holen.

Erstellen von Todosresolver

<span>npm install -g @angular/cli@latest
</span>

Angular CLI hat keinen Befehl zum Generieren eines Resolvers. Erstellen wir also eine neue Datei SRC/Todos.resolver

Wir definieren den Resolver als eine Klasse, die die Resolve -Schnittstelle implementiert.

Die Resolve -Schnittstelle ist optional, ermöglicht unsere Typscript -IDE oder unser Compiler jedoch sicher, dass wir die Klasse korrekt implementieren, indem wir eine Resolve () -Methode implementieren.

Wenn der Winkelrouter Daten mit einem Resolver auflösen muss, wird die Resolve () -Methode des Resolvers aufgerufen und erwartet, dass die Resolve () -Methode einen Wert, ein Versprechen oder ein beobachtbares.

zurückgibt.

Wenn die Methode resolve () ein Versprechen zurückgibt oder ein beobachtbarer Winkelrouter wartet, bis das Versprechen oder beobachtbar ist, bevor sie die Komponente der Route aktiviert.

Wenn der Angular -Router die methode (resolve () -Methode aufgerufen hat, gibt es den aktivierten Routen -Snapshot und den Snapshot des Router -Status bequem, um uns den Zugriff auf Daten (wie Routenparameter oder Abfrageparameter) zu gewähren. 🎜>

Der Code für Todosresolver ist sehr präzise, ​​weil wir bereits einen TododataService haben, der alle Kommunikation mit unserem API -Back -End übernimmt.

Wir injizieren TododataService in den Konstruktor und verwenden seine GetAllTodos () -Methode, um alle TODOs in der Resolve () -Methode abzurufen.

Die Auflösungsmethode gibt ein beobachtbares des Typs Todo [] zurück, so

Nachdem wir unseren Resolver haben, konfigurieren wir Angular Router, um ihn zu verwenden.

Auflösen von Todos über den Router

Um den Winkelrouter einen Resolver zu verwenden, müssen wir ihn an einer Route in unserer Routenkonfiguration anbringen.

Öffnen wir SRC/App-Routing.module.ts und fügen Sie unseren Todosresolver zur Todos-Route hinzu:

<span>npm install -g @angular/cli@latest
</span>

importieren wir todosresolver:

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

füge es auch als Resolver hinzu, die Todos -Route:

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-3
</span><span>npm install
</span>ng serve

Dies fordert den Angular -Router an

Auf die Daten einer Route können aus dem ActivatedRoute oder ActivatedRoutesNapshot zugegriffen werden, den wir im nächsten Abschnitt sehen werden.

Sie können die Daten einer Route mit der Dateneigenschaft der Route direkt zu den Daten einer Route hinzufügen:

<span>import { NgModule } from '@angular/core';
</span><span>import { RouterModule, Routes } from '@angular/router';
</span><span>import { AppComponent } from './app.component';
</span>
<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    component<span>: AppComponent
</span>  <span>}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  imports<span>: [RouterModule.forRoot(routes)],
</span>  exports<span>: [RouterModule],
</span>  providers<span>: []
</span><span>})
</span><span>export class AppRoutingModule {
</span><span>}
</span>

Sie können auch dynamische Daten unter Verwendung eines in der Resolve -Eigenschaft der Route angegebenen Resolver hinzufügen:

<span>import { RouterModule, Routes } from '@angular/router';
</span>

Sie könnten auch beides gleichzeitig tun:

<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    component<span>: AppComponent
</span>  <span>}
</span><span>];
</span>

Sobald die Resolver aus der Resolve -Eigenschaft behoben sind, werden ihre Werte mit den statischen Daten aus der Dateneigenschaft verschmolzen und alle Daten als Daten der Route verfügbar gemacht.

Angular Router verwendet die Winkelabhängigkeitsinjektion, um auf Resolver zuzugreifen. Daher müssen wir sicherstellen

Wenn Sie in Ihrem Browser zu http: // localhost: 4200, Angular Router jetzt:

<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    children<span>: [
</span>      <span>{
</span>        path<span>: '',
</span>        component<span>: 'TodosPageComponent'
</span>      <span>},
</span>      <span>{
</span>        path<span>: ':id',
</span>        component<span>: 'TodoPageComponent'
</span>      <span>}
</span>    <span>]
</span>  <span>}
</span><span>];
</span>

navigieren:

leitet die URL von / to / todos
1. um
sieht, dass die Todos -Route Todosresolver in seiner Resolve -Eigenschaft
2. definiert hat
führt die methode resolve () von todosresolver aus, wartet auf das Ergebnis und weist den Daten in den Daten der Route das Ergebnis zu
3. das Ergebnis zu
aktiviert todoscomponent.

Wenn Sie die Registerkarte "Netzwerk" Ihrer Entwickler -Tools öffnen, werden Sie feststellen, dass die Todos jetzt zweimal von der API abgerufen werden. Einmal durch Angular Router und einmal vom Ngoninit -Handler in todoscomponent.

So Angular Router holt die Todos bereits aus der API ab, aber todoscomponent verwendet immer noch eine eigene interne Logik, um die Todos zu laden.

Im nächsten Abschnitt werden wir TODOSCOMPONENT so aktualisieren, dass die vom Angular Router aufgelösten Daten verwendet werden.

Verwenden von aufgelösten Daten

Öffnen wir App/SRC/Todos/Todos.comPonent.ts.

Der ngoninit () -Handler holt derzeit die Todos direkt aus der API:

<span>// no pathMatch specified, so Angular Router applies
</span><span>// the default `prefix` pathMatch
</span><span>{
</span>  path<span>: '',
</span>  redirectTo<span>: 'todos'
</span><span>}
</span>

Jetzt, da Angular Router die Todos mit Todosresolver abholt, möchten wir die Todos in todoscomponent aus den Routendaten anstelle der API abrufen.

Um auf die Routendaten zuzugreifen, müssen wir ActivatedRoute aus @Angular/Router importieren:

<span>{
</span>  path<span>: '',
</span>  redirectTo<span>: 'todos',
</span>  pathMatch<span>: 'full'
</span><span>}
</span>

und verwenden Sie Winkelabhängigkeitsinjektion, um den aktivierten Weg zu greifen:

<span><span>@NgModule</span>({
</span>  imports<span>: [RouterModule.forRoot(routes)],
</span>  exports<span>: [RouterModule],
</span>  providers<span>: []
</span><span>})
</span><span>export class AppRoutingModule {
</span><span>}
</span>

Schließlich aktualisieren wir den Handler von Ngoninit (), um die Todos anstelle der API aus den Routendaten zu erhalten:

imports<span>: [RouterModule.forRoot(routes)]
</span>

Die ActivatedRoute enthält die Routendaten als beobachtbar, sodass unser Code kaum ändert.

Wir ersetzen dies.

Wenn Sie in Ihrem Browser nach Localhost: 4200 navigieren und die Registerkarte Netzwerk öffnen, werden Sie nicht mehr zwei HTTP -Anforderungen mehr sehen, die die Todos von der API abrufen.

Mission erfüllt! Wir haben den Angular -Router in unserer Anwendung erfolgreich integriert!

Bevor wir abschließen, führen wir unsere Unit -Tests durch:

<span>npm install -g @angular/cli@latest
</span>

Ein Unit -Test schlägt fehl:

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

Wenn Todoscomponent getestet wird, ist sich das Testbed nicht bewusst, dass Todolistheadercomponent und Angular beklagt, dass es das Element der App-Todo-List-List-Header nicht kennt.

Um diesen Fehler zu beheben, öffnen wir App/src/todos/todos.component.spec.ts und fügen Sie den Testbenoptionen no_errors_schema hinzu:

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-3
</span><span>npm install
</span>ng serve

Jetzt zeigt Karma einen weiteren Fehler:

<span>import { NgModule } from '@angular/core';
</span><span>import { RouterModule, Routes } from '@angular/router';
</span><span>import { AppComponent } from './app.component';
</span>
<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    component<span>: AppComponent
</span>  <span>}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  imports<span>: [RouterModule.forRoot(routes)],
</span>  exports<span>: [RouterModule],
</span>  providers<span>: []
</span><span>})
</span><span>export class AppRoutingModule {
</span><span>}
</span>

Fügen wir die erforderlichen Anbieter zu den Testbettoptionen hinzu:

<span>import { RouterModule, Routes } from '@angular/router';
</span>

Dies wirft erneut einen weiteren Fehler auf:

<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    component<span>: AppComponent
</span>  <span>}
</span><span>];
</span>

Fügen wir einen weiteren Anbieter für ActivatedRoute zu den Testbenoptionen hinzu:

<span>const routes: Routes = [
</span>  <span>{
</span>    path<span>: '',
</span>    redirectTo<span>: 'todos',
</span>    pathMatch<span>: 'full'
</span>  <span>},
</span>  <span>{
</span>    path<span>: 'todos',
</span>    children<span>: [
</span>      <span>{
</span>        path<span>: '',
</span>        component<span>: 'TodosPageComponent'
</span>      <span>},
</span>      <span>{
</span>        path<span>: ':id',
</span>        component<span>: 'TodoPageComponent'
</span>      <span>}
</span>    <span>]
</span>  <span>}
</span><span>];
</span>

Wir weisen den Anbieter für ActivatedRoute ein Scheinobjekt zu, das eine beobachtbare Dateneigenschaft enthält, um einen Testwert für Todos aufzudecken.

Jetzt passieren die Unit -Tests erfolgreich:

<span>// no pathMatch specified, so Angular Router applies
</span><span>// the default `prefix` pathMatch
</span><span>{
</span>  path<span>: '',
</span>  redirectTo<span>: 'todos'
</span><span>}
</span>

fabelhaft! Um unsere Anwendung in einer Produktionsumgebung bereitzustellen, können wir jetzt ausführen:

<span>{
</span>  path<span>: '',
</span>  redirectTo<span>: 'todos',
</span>  pathMatch<span>: 'full'
</span><span>}
</span>

Wir laden das generierte DIST -Verzeichnis auf unseren Hosting -Server hoch. Wie süß ist das?

Wir haben in diesem Artikel viel behandelt. Lassen Sie uns also zusammenfassen, was wir gelernt haben.

Zusammenfassung

Im ersten Artikel haben wir gelernt, wie man:

Initialisieren Sie unsere Todo -Anwendung mit Angular CLI
Erstellen Sie eine Todo -Klasse, um einzelne Todos
• darzustellen
Erstellen Sie einen TododataService -Dienst, um Todos
• zu erstellen, zu aktualisieren und zu entfernen
Verwenden Sie die AppComponent -Komponente, um die Benutzeroberfläche
• anzuzeigen
Bereiten Sie unsere Anwendung auf GitHub -Seiten
• bereit

Im zweiten Artikel haben wir AppComponent überarbeitet, um den größten Teil seiner Arbeit zu delegieren, um:

zu delegieren:

• a todolistComponent, um eine Liste von Todos
anzuzeigen
• a todolistItemComponent, um ein einzelnes Todo
anzuzeigen
• a todolistheaderComponent, um ein neues Todo zu erstellen
• a todolistfotercomponent, um zu zeigen, wie viele Todos übrig sind.

Im dritten Artikel haben wir gelernt, wie man:

• Erstellen Sie eine Scheinrest -API zurück
Speichern Sie die API -URL als Umgebungsvariable
Erstellen Sie einen Apiservice, um mit der Rest -API zu kommunizieren
Aktualisieren Sie den TododataService, um den neuen Apiservice
• zu verwenden
Aktualisieren Sie die AppComponent, um asynchrone API -Aufrufe
• zu verarbeiten
Erstellen Sie einen ApimockService, um reale HTTP -Aufrufe beim Ausführen von Unit -Tests zu vermeiden.

In diesem vierten Artikel haben wir gelernt:

• Warum eine Anwendung möglicherweise Routing muss
• Was für ein JavaScript -Router ist
• Welcher Winkelrouter ist, wie es funktioniert und was es für Sie tun kann
• So richten Sie Winkelrouter ein und konfigurieren Sie Routen für unsere Anwendung
• wie man den Angular -Router mitteilt, wo Komponenten in der DOM
platziert werden sollen
• wie man mit unbekannten URLs anmutig umgeht
• So verwenden Sie einen Resolver, um Winkelrouter aufzulösen.

Der gesamte Code aus diesem Artikel ist unter GitHub verfügbar.

In Teil 5 werden wir die Authentifizierung implementieren, um den unbefugten Zugriff auf unsere Anwendung zu verhindern.

Bleiben Sie also für mehr und wie immer können Sie Ihre Gedanken und Fragen in den Kommentaren verlassen!

Empfohlene Kurse

Online -Kurse für Winkel und Typenkript Todd Motto Experten geführte Online-AngularJs, Angular- und Typscript-Schulungskurse für Einzelpersonen und Teams. Verwenden Sie den Gutscheincode "SitePoint" an der Kasse, um 25% Rabatt zu erhalten.

häufig gestellte Fragen (FAQs) zum Komponentenrouting mit einem Winkelrouter

Welche Bedeutung hat die Bedeutung des Winkelrouters in der Webentwicklung? SPAs sind Webanwendungen oder Websites, die mit dem Benutzer interagieren, indem sie die aktuelle Webseite dynamisch mit neuen Daten vom Webserver umschreiben, anstelle der Standardmethode des Browsers, das ganze neue Seiten lädt. Dies führt zu einer schnelleren, nahtloseren Benutzererfahrung, da nur der erforderliche Inhalt aktualisiert wird. Angular Router hilft bei der Definition der Navigationspfade zwischen den verschiedenen Anwendungszuständen und verwaltet die Zustandsübergänge Um unbekannte oder falsche URLs zu handhaben. Wenn der Router auf eine URL trifft, die keine vordefinierten Routen übereinstimmt, kann sie zu einer Seite „404 nicht gefunden“ oder auf einer anderen Fallback -Seite umleiten. Dies wird erreicht, indem eine Route mit dem Pfad '**' definiert und mit der gewünschten Komponente assoziiert. Daten zwischen Routen, die eine Funktion namens Routenparameter verwenden. Routenparameter sind Teile der URL, die sich ändern können, und ihre Werte können von der Komponente verwendet werden, um Inhalte dynamisch anzuzeigen oder das Verhalten zu bestimmen. Dies ist besonders nützlich, wenn Sie zu einer Detailansicht eines Elements in einer Liste navigieren möchten.

Wie kann ich bestimmte Routen in meiner Anwendung mit einem Winkelrouter schützen? Routenwächter sind Schnittstellen, die dem Router mitteilen können, ob die Navigation zu einer angeforderten Route zulassen soll. Sie können verwendet werden, um den Zugriff basierend auf Benutzerauthentifizierung, rollenbasierter Zugriffskontrolle oder anderen benutzerdefinierten Kriterien zu steuern.

Wie handelt es sich Interagiert mit der Geschichte des Browsers über den Standortdienst. Es verwendet die HTML5 -Historie -API, um die URL zu ändern, ohne eine vollständige Seite nachzuladen. Dies bedeutet, dass die Rück- und Vorwärts -Tasten des Browsers wie erwartet funktionieren und zwischen den Anwendungszuständen navigieren. von Modulen. Dies bedeutet, dass bestimmte Module Ihrer Anwendung auf Anfrage geladen werden können, und nicht bei der anfänglichen Belastung der Anwendung. Dies kann die anfängliche Lastleistung Ihrer Anwendung erheblich verbessern. Routing -Verhalten. Zu diesen Veranstaltungen gehören Navigationsstart, Navigationsende, Routenerkennung und viele andere. Durch Abonnieren dieser Ereignisse können Sie detaillierte Informationen zum Routing -Prozess erhalten. . Auf diese Weise können Sie komplexere Navigationsstrukturen erstellen, in denen bestimmte Routen Unterausreiber zugeordnet sind. Dies ist besonders nützlich, um hierarchische Navigationsstrukturen zu erstellen. Dies kann verwendet werden, um visuell ansprechende Übergänge zwischen verschiedenen Zuständen Ihrer Anwendung zu erstellen und die Benutzererfahrung zu verbessern. Feature namens Vorspannungsstrategie für Prelad -Module. Dies bedeutet, dass bestimmte Module nach der anfänglichen Belastung der Anwendung im Hintergrund geladen werden können. Dies kann die Navigationsgeschwindigkeit Ihrer Anwendung erheblich verbessern, da die Module bereits geladen sind, wenn sie benötigt werden.

Das obige ist der detaillierte Inhalt vonAngular Router: Eine Einführung in die Komponenten -Routing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!