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.
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.
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.
So sah unsere Anwendungsarchitektur am Ende von Teil 3 aus:
In diesem Artikel werden wir:
Am Ende dieses Artikels werden Sie verstehen:
Also fangen wir an!
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:
In modernen JavaScript -Webanwendungen wird Routing häufig von einem JavaScript -Router im Browser behandelt.
Im Wesentlichen macht ein JavaScript -Router zwei Dinge:
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
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:
Zusätzlich ermöglicht uns Angular Router:
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.
funktioniert
Bevor wir in den Code eintauchen, ist es wichtig zu verstehen, wie der Angular -Router arbeitet und welche Terminologie, die er einführt,
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: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.
Um das Routing in unserer Winkelanwendung zu ermöglichen, müssen wir drei Dinge tun:
Beginnen wir also mit einer 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:
, 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:
Dies bietet uns zwei Vorteile:
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>
npm uninstall -g @angular/cli angular-cli npm cache clean <span>npm install -g @angular/cli@latest </span>
<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:
<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>
Winkelrouter hat zwei Matching -Strategien:
<span>import { RouterModule, Routes } from '@angular/router';
</span>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:
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.
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).
.
.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
Das Element
Wenn Sie bekannt sind, können Sie angularjs 1.x Router und UI-Router vertraut sind, Sie können
Ohne ein
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
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>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>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
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
<span>{
</span> path<span>: '',
</span> redirectTo<span>: 'todos',
</span> pathMatch<span>: 'full'
</span><span>}
</span>Unsere Anwendung ist jetzt Routing aktiviert. Super!
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:
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:
Als nächstes werden wir einen Resolver erstellen, um die vorhandenen Todos von unserer Back-End-API mit einem Winkelrouter abzurufen.
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:
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:
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.
Durch Anhängen eines Resolvers an die Todos -Route bitten wir den Angular -Router, zuerst die Daten zu beheben, bevor das Todoskomponenten aktiviert ist.
Erstellen von Todosresolver
<span>npm install -g @angular/cli@latest </span>
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.
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>
<span>import { RouterModule, Routes } from '@angular/router';
</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>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>
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
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>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>
<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>
imports<span>: [RouterModule.forRoot(routes)] </span>
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>
npm uninstall -g @angular/cli angular-cli npm cache clean <span>npm install -g @angular/cli@latest </span>
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
<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>
<span>import { RouterModule, Routes } from '@angular/router';
</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>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>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>
<span>{
</span> path<span>: '',
</span> redirectTo<span>: 'todos',
</span> pathMatch<span>: 'full'
</span><span>}
</span>Wir haben in diesem Artikel viel behandelt. Lassen Sie uns also zusammenfassen, was wir gelernt haben.
Zusammenfassung
zu delegieren:
Im dritten Artikel haben wir gelernt, wie man:
In diesem vierten Artikel haben wir gelernt:
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!
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.
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
