Angular 8 Routing & Navigation Tutorial mit Beispiel

Blog

Angular 8 Routing & Navigation Tutorial mit Beispiel

Ursprünglich veröffentlicht von Didin J at https://www.djamware.com

Der Angular 8 Router verwendet, um zwischen Ansichten oder Seiten zu navigieren, die durch die Benutzeraktionen ausgelöst werden. Dies ist ein Standardverhalten in der Webanwendung, PWA oder mobilen Apps. Die Navigations- oder Ansichtsänderungen erfolgen, wenn der Benutzer auf den Link klickt, auf die Schaltfläche klickt oder die URL aus der Adressleiste des Browsers eingibt. Jeder Ansichtswechsel kann die Parameter der Daten aus der vorherigen Ansicht in die nächste Ansicht bringen.

Inhaltsverzeichnis:

  • Vorbereitung
  • Einfaches Winkel-Routing
  • Winkel-Wildcard-Route
  • Angular Routing & Navigation für modulare Webanwendungen
  • Winkelroutenparameter
  • Fügen Sie der gerouteten Komponente eine Winkelanimation hinzu

In diesem Tutorial implementieren wir das Angular Routing & Navigation beginnend mit der einfachen Webanwendungsnavigation von nur wenigen Seiten oder Ansichten. Fahren Sie dann mit weiteren Ansichten und verschachtelten Ansichten fort, die mit Sende-/Get-Parametern, animierten Übergängen, untergeordnetem Routing usw.

Vorbereitung

Die folgenden Tools, Frameworks, Bibliotheken und Module sind für dieses Tutorial erforderlich:

Responsive Dropdown-Menü mit Untermenü
  • Node.js
  • Winkel 8
  • Terminal oder Befehlszeile
  • Texteditor oder IDE

Stellen Sie also sicher, dass alle diese Elemente auf Ihrem Computer installiert und betriebsbereit sind. Wir gehen davon aus, dass Sie Node.js erfolgreich installieren und lauffähig sind NPM Befehl dann müssen wir die richtige Version für den Node.js- und den NPM-Befehl überprüfen, indem Sie Ihr Terminal oder die Node.js-Befehlszeile öffnen und diese Befehle eingeben.

src/app/app.component.ts

Dass die von uns verwendeten Node.js- und NPM-Versionen die stabile und empfohlene Version sind. Als nächstes müssen wir Angular CLI installieren, indem Sie diesen Befehl eingeben.

src/app/app-routing.module.ts

Jetzt haben wir die neueste Version von Angular, als dieses Beispiel geschrieben wurde.

src/app/app-routing.module.ts

Erstellen Sie als Nächstes eine Angular 8-Anwendung für dieses Routing & Navigation-Beispiel, indem Sie diesen Befehl eingeben.

src/app/page-not-found/page-not-found.component.html

Beantworten Sie alle Fragen wie unten, wobei wir Angular Routing und SCSS als Stylesheet verwenden.

src/app/articles/articles/articles.component.ts

Um das neu erstellte Angular 8-Projekt zu bereinigen, gehen Sie zu diesem Projektordner und führen Sie dann die Angular-Anwendung aus.

src/app/articles/articles/articles.component.html

Sie werden diese Seite anzeigen oder anzeigen, wenn Sie

offen ' http://localhost:4200/' in Ihrem Browser, was bedeutet, dass das Angular 8 einsatzbereit ist.

Wenn Sie das Projekt mit Ihrer IDE oder Ihrem Texteditor öffnen, gibt es eine Startkomponente app.component.html als Standard-Root-Ansicht. Diese Komponente ist die Standardansicht, die vom index.html using-Tag ausgelöst wird, und der Stamm der Anwendungs-URL, die durch in index.html bestimmt wird. Es gibt auch ein leeres Routing-Array, wenn Sie in `src/app/app-routing.module.ts` sehen.

src/app/app.component.html

Als Nächstes werden alle Ansichten, Routing und Navigation, in dieses Routes-Array eingefügt.

Einfaches Winkel-Routing

Das einfache Angular 8 Routing enthält einige Seiten oder Ansichten, die die gleiche Ebene haben. Wir beschreiben dieses einfache Angular Routing & Navigation durch dieses Diagramm.

node js mehrere Dateien

Aus diesem Diagramm müssen wir die neuen Komponenten erstellen, indem Sie diesen Befehl eingeben, um sie mit Angular Schematics zu generieren.

src/app/app.module.ts

Jetzt haben wir einen Home-, About-, Privacy- und Terms-Ordner im App-Ordner. Als nächstes müssen wir das Routing für diese Komponenten hinzufügen, indem wir `src/app/app-routing.module.ts` öffnen und bearbeiten und dann diese Komponentenimporte hinzufügen.

src/app/articles/articles-routing.module.ts

Fügen Sie als Nächstes die konstante Routenvariable durch dieses Array von Komponentenrouten hinzu oder ändern Sie sie.

src/app/animation.ts

Das bedeutet, dass diese Komponenten über diese URLs zugänglich sind.

Alle diese Komponentenrouten werden in app.component.html durch die Zeile eingeschlossen. Dynamische Ansichten ändern sich innerhalb des Router-Outlet-Tags. Wir können also den Rest der Ansicht app.component.html für den Navigationsheader verwenden. Wir werden das Angular Bootstrap-Modul verwenden, um die schöne UI/UX zu erstellen. Als nächstes installieren Sie das ng-bootstrap-Modul mit diesem Befehl.

src/app/app.component.ts

Als nächstes importieren Sie nach `src/app/app.module.ts`.

node -v v10.15.1 npm -v 6.10.2 

Fügen Sie es auch zum Array @NgModule imports hinzu.

sudo npm install -g @angular/cli 

Fügen Sie diese Stylesheet-Referenz zum Bootstrap-Stylesheet in der index.html hinzu, bevor Sie das Head-Tag schließen.

ng version 

Als nächstes müssen wir die Datei `src/app/app.component.html` ändern, um alle HTML-Tags außer Tag zu ersetzen.

ng new angular-routing 

Wir fügen die Funktion toggleNavbar() hinzu, damit dieser Boostrap reaktionsschnell ist und das Menü mit der dünneren Breite arbeitet. Öffnen und bearbeiten |_+_| Fügen Sie dann diese Variable und Funktion hinzu.

Unterschied zwischen cnn und rnn
? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? SCSS [https://sass-lang.com/documentation/syntax#scss ] 

Die Navigation funktioniert durch Klicken auf das Navigationselement und wird vom Angular [routerLink] ausgeführt. Um die aktive Ansicht in der Boostrap-Navigationsleiste zu markieren, verwenden Sie das Angular routerLinkActivate einfach inline mit dem [routerLink]. Und so funktioniert es.


Winkel-Wildcard-Route

Aus dem vorherigen Beispiel des einfachen Angular Routing können Sie einfach zu dem Routing navigieren, das in der app-routing.module.ts definiert ist. Wenn Sie auf eine andere URL verweisen, wird die Ansicht leider auf die Stamm-URL umgeleitet. Wenn Sie einen Navigationsfehler durch eine ungültige URL behandeln möchten, können Sie den gesamten undefinierten Router über die Wildcard-Route umleiten, die mit zwei Sternchen definiert ist '.

Als nächstes öffnen und erneut bearbeiten |_+_| Fügen Sie diese Wildcard-Route dann unter anderen Routen hinzu. Es wird also so aussehen.

cd ./angular-routing ng serve 

Diese Wildcard-Route erforderte eine PageNotFoundComponent. Generieren Sie dazu mit diesem Befehl eine neue Komponente.

const routes: Routes = []; 

Importieren Sie diese Komponente in |_+_| Datei.

ng g component Home ng g component About ng g component Privacy ng g component Terms 

Nehmen Sie eine kleine Änderung am |_+_| . vor Datei durch diese Zeilen von HTML-Tags.

import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; import { PrivacyComponent } from './privacy/privacy.component'; import { TermsComponent } from './terms/terms.component'; 

Alternativ können wir mithilfe von Typescript-Code programmgesteuert von Artikeln zur Artikeldetailansicht mit Parametern navigieren. Fügen Sie den Import von Winkelrouten zu |_+_| hinzu.

const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: 'privacy', component: PrivacyComponent }, { path: 'terms', component: TermsComponent }, { path: '', redirectTo: '/home', pathMatch: 'full' } ]; 

Injizieren Sie die Routen in den Konstruktor.

npm install --save @ng-bootstrap/ng-bootstrap 

Fügen Sie eine Funktion hinzu, um zu den Artikeldetails zu navigieren.

import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 

Ändern Sie als Nächstes das Attribut [routerLink] in (click) im |_+_|.

imports: [ BrowserModule, AppRoutingModule, NgbModule ], 

Als nächstes können Sie das Produktmodul auf die gleiche Weise erstellen und dann das Navigationsmenü der Produkte zu |_+_| hinzufügen.

 

Fügen Sie der gerouteten Komponente eine Winkelanimation hinzu

Das obige Beispiel hat keinen Übergang. Dazu müssen wir eine Angular-Animation hinzufügen, um einen animierten Navigationsübergang zu erstellen. Übergänge mit Animation können auf jede Komponente angewendet werden. Als nächstes öffnen und bearbeiten Sie |_+_| Fügen Sie dann diesen Import von BrowserAnimationModule hinzu.

  Angular Routing   







Wir werden den Übergang nur zum Artikelmodul hinzufügen. Öffnen und bearbeiten Sie dazu |_+_| Ändern Sie dann die Routenvariable, um eine Animation als Datenfeld hinzuzufügen.

navbarOpen = false; 

toggleNavbar() {
this.navbarOpen = !this.navbarOpen;
}

Als nächstes erstellen Sie die |_+_| Datei, um den Animationsstil zu konfigurieren, und füllen Sie diese Datei dann mit diesen Typescript-Codes.

  const routes: Routes = [  
{ path: ‘home’, component: HomeComponent },
{ path: ‘about’, component: AboutComponent },
{ path: ‘privacy’, component: PrivacyComponent },
{ path: ‘terms’, component: TermsComponent },
{ path: ‘’, redirectTo: ‘/home’, pathMatch: ‘full’ },
{ path: '
', component: PageNotFoundComponent }
];

Fügen Sie diese Animationskonfiguration zu |_+_| . hinzu indem Sie es zuerst zusammen mit dem RouterOutlet-Modul importieren.

ng g component PageNotFound  

Fügen Sie diese Animation dem @Component-Objekt hinzu.

import { PageNotFoundComponent } from ‘./page-not-found/page-not-found.component’;  

Jetzt sehen Sie den animierten Übergang, wenn Sie von Artikeln zu Artikeldetails wechseln und umgekehrt.

Das ist das grundlegende Angular Routing & Navigation. Um mehr über Angular Routing zu erfahren, werden wir später ein weiteres Beispiel dazu schreiben. Für dieses Beispiel erhalten Sie den vollständigen Quellcode in unserem GitHub .

Wie erstelle ich ein Schlangenspiel in Python?

Wenn Sie Ihre Zeit nicht mit der Gestaltung Ihres eigenen Frontends oder Ihrem Budget verschwenden möchten, indem Sie einen Webdesigner einstellen, dann ist Angular Templates der beste Ort für Sie. Beschleunigen Sie also Ihre Front-End-Webentwicklung mit Premium Winkelschablonen . Wählen Sie Ihre Vorlage für Ihr Frontend-Projekt Hier .

Danke fürs Lesen

Wenn dir dieser Beitrag gefallen hat, teile ihn mit all deinen Programmierfreunden!

Folge uns auf Facebook | Twitter

Weitere Informationen zu Angular

Angular 8 (ehemals Angular 2) - Das komplette Handbuch

Angular & NodeJS - Der MEAN Stack Guide

Der komplette Node.js-Entwicklerkurs (3. Auflage)

Das Bootcamp für Webentwickler

Die 50 besten Angular-Interview-Fragen für Frontend-Entwickler im Jahr 2019

☞ So erstellen Sie eine CRUD-Web-App mit Angular 8.0

☞ React vs Angular: Ein eingehender Vergleich

React vs Angular vs Vue.js am Beispiel

Aktivierung des Office-Produkts fehlgeschlagen

☞ Microfrontends – Verbindung von JavaScript-Frameworks (React, Angular, Vue usw.)

☞ Erstellen einer mobilen CRUD-App mit Ionic 4, Angular 8

☞ So erstellen Sie mobile Apps mit Angular, Ionic 4 und Spring Boot

☞ Ionic 4 & Angular Tutorial für Anfänger - Crashkurs

#eckig #web-entwicklung #node-js #javascript