Share
Im zweiten Teil des Anfängerleitfadens zur Angular-Lernreihe haben Sie erfahren, welche Services in Angular 4 enthalten sind und wie Sie Angular-Services schreiben und in einer Angular-Komponente verwenden.
In diesem Teil der Tutorialreihe erfahren Sie, wie Sie mit Routing in Angular 4 umgehen.
Sie beginnen mit dem Klonen des Quellcodes aus dem ersten Teil der Übungsreihe.
Git Klon https://github.com/royagasthyan/AngularComponent.git
Wenn Sie über den Quellcode verfügen, navigieren Sie zum Projektverzeichnis und installieren Sie die erforderlichen Abhängigkeiten.
cd AngularComponent npm installieren
Starten Sie nach der Installation der Abhängigkeiten die Anwendung, indem Sie den folgenden Befehl eingeben:
ng dienen
Sie sollten die Anwendung auf http: // localhost: 4200 / ausführen..
Wenn ein Benutzer eine Webanwendung oder Website eingibt, dient Routing zur Navigation durch die Anwendung. Um von einer Ansicht zu einer anderen zu wechseln, klickt der Benutzer auf einer Seite auf die verfügbaren Links.
Angular bietet einen Router, um das Definieren von Routen für die Webanwendungen zu vereinfachen und von einer Ansicht zu einer anderen Ansicht in der Anwendung zu navigieren.
Um das Routing in der Webanwendung zu implementieren, verwenden Sie das Angular Routing-Modul. Erstellen Sie eine Datei mit dem Namen app.routing.ts in der src / app Mappe.
Um mit dem Implementieren von Routing beginnen zu können, müssen Sie das importieren RouterModule und Routen von @ angle / router.
RouterModule, Routes von '@ angle / router' importieren;
Sie brauchen auch die ModuleWithProviders Modul zur Implementierung des Routings.
importieren Sie ModuleWithProviders aus '@ angle / core / src / metadata / ng_module';
Erstellen und exportieren Sie eine aufgerufene Variable AppRoutes in dem app.routing.ts, Dies wäre eine Sammlung aller Routen in der Angular-Anwendung.
export const AppRoutes: Routen = [];
Das Routing-Modul kann auf zwei Arten erstellt werden: RouterModule.forRoot und RouterModule.forChild.
RouterModule.forRoot dient zum Erstellen von Routen für die gesamte Anwendung, und RouterModule.forChild dient zum Erstellen von Routen für faul geladene Module.
In diesem Tutorial verwenden Sie RouterModule.forRoot Routen für die Root-Anwendung erstellen.
Erstellen Sie das Routing-Modul mit RouterModule.forRoot in der app.routing.ts Datei.
export const ROUTING: ModuleWithProviders = RouterModule.forRoot (AppRoutes);
Fügen Sie eine Route im hinzu AppRoutes Liste um unsere zu zeigen CalcComponent.
Pfad: 'calc', Komponente: CalcComponent
Hier ist wie das app.routing.ts Datei sieht:
RouterModule, Routes von '@ angle / router' importieren; importieren Sie ModuleWithProviders aus '@ angle / core / src / metadata / ng_module'; import CalcComponent aus './calc/calc.component' export const AppRoutes: Routes = [Pfad: 'calc', Komponente: CalcComponent]; export const ROUTING: ModuleWithProviders = RouterModule.forRoot (AppRoutes);
Wie aus dem Code ersichtlich, ist die hinzugefügte Route / calc, was würde das machen CalcComponent.
Importieren Sie die ROUTING konstant in der app.module.ts Datei.
ROUTING aus './app.routing' importieren
Ergänzen Sie die ROUTING zu den Importabschnitten.
Importe: [BrowserModule, FormsModule, ROUTING],
Hier ist wie das app.module.ts Datei sieht:
BrowserModule aus '@ angle / platform-browser' importieren; NgModule aus '@ angle / core' importieren; importieren ROUTING aus './app.routing' import AppComponent aus './app.component'; import CalcComponent aus './calc/calc.component' import FormsModule aus '@ angle / forms'; RouterModule aus '@ angle / router' importieren; @NgModule (Deklarationen: [AppComponent, CalcComponent]) importiert: [BrowserModule, FormsModule, ROUTING], Provider: [], Bootstrap: [AppComponent]) Exportklasse AppModule
Speichern Sie die obigen Änderungen und starten Sie die Angular-Anwendung erneut mit ng dienen.
Richten Sie Ihren Browser auf http: // localhost: 4200 / calc und Sie haben die CalcComponent angezeigt.
Mit der oben erstellten Route versuchen Sie, die Navigation zu implementieren. Beginnen wir mit der Erstellung einer Hauptkomponente für unsere Anwendung namens HomeComponent.
Erstellen Sie einen Ordner mit dem Namen Zuhause in der src / app Mappe. In der Zuhause Erstellen Sie eine Datei mit dem Namen home.component.ts. So sieht es aus:
Component aus '@ angle / core' importieren; @Component (Selector: 'home', templateUrl: 'home.component.html') Exportklasse HomeComponent
Erstellen Sie eine Vorlagendatei mit dem Namen home.component.html. Fügen Sie den folgenden Code hinzu:
Willkommen auf der Startseite
Wie im obigen Code zu sehen, haben Sie verwendet RouterLink zum Einrichten der Link-Navigation. RouterLink wird aus dem importiert RouterModule.
Ergänzen Sie die HomeComponent zum NgModule in dem app.module.ts Datei.
BrowserModule aus '@ angle / platform-browser' importieren; NgModule aus '@ angle / core' importieren; importieren ROUTING aus './app.routing' import AppComponent aus './app.component'; import CalcComponent aus './calc/calc.component'; HomeComponent aus './home/home.component' importieren; FormsModule aus '@ angle / forms' importieren; RouterModule aus '@ angle / router' importieren; @NgModule (Deklarationen: [AppComponent, CalcComponent, HomeComponent]) importiert: [BrowserModule, FormsModule, ROUTING], Provider: [], Bootstrap: [AppComponent]) Exportklasse AppModule
Da Sie Angular-Routing verwenden, müssen Sie die Stelle in unserer Anwendung anzeigen, an der der Router die Ansichten anzeigen würde. Da hast du die AppComponent Fügen Sie zur Laufzeit den folgenden Code zu dem hinzu app.component.html Datei.
Der Router-Ausgang teilt dem Angular-Router mit, wo er die Ansichten anzeigen soll.
In der app.routing.ts Datei die Standardroute ein, die als angezeigt werden soll HomeComponent. So sieht der modifizierte Code aus:
Pfad: ", Komponente: HomeComponent
Hier ist wie das app.routing.ts Datei sieht:
RouterModule, Routes von '@ angle / router' importieren; importieren Sie ModuleWithProviders aus '@ angle / core / src / metadata / ng_module'; import CalcComponent aus './calc/calc.component'; HomeComponent aus './home/home.component' importieren; export const AppRoutes: Routes = [path: ", Komponente: HomeComponent, Pfad: 'calc', Komponente: CalcComponent]; export const ROUTING: ModuleWithProviders = RouterModule.forRoot (AppRoutes);
Speichern Sie die obigen Änderungen und starten Sie die Webanwendung erneut. Richten Sie Ihren Browser auf http: // localhost: 4200 / und Sie haben die HomeComponent standardmäßig angezeigt.
Klicken Sie auf den Link in der Home-Komponente und Sie werden zur Rechnerkomponente navigiert.
Fügen wir nun eine Route hinzu, um undefinierte Routing-Anforderungen zu bearbeiten. Wenn der Benutzer zu einer nicht vorhandenen Route navigiert, wird eine Meldung angezeigt, dass die Route nicht gefunden wurde.
Fügen Sie eine neue Komponente mit dem Namen hinzu nicht gefunden. Erstellen Sie einen Ordner mit dem Namen nicht gefunden in der src / app Mappe. Erstellen Sie eine Datei mit dem Namen notfound.component.ts. Fügen Sie den folgenden Code hinzu:
Component aus '@ angle / core' importieren; @Component (Selector: 'notfound', templateUrl: 'notfound.component.html', styleUrls: ['notfound.component.css']) Exportklasse NotFoundComponent
Erstellen Sie eine Datei mit dem Namen notfound.component.html und fügen Sie den folgenden Code hinzu:
Komponente nicht gefunden
Sie müssen eine Wildcard-Route hinzufügen, um nicht vorhandene Routen zu verarbeiten. Fügen Sie dem folgenden Code hinzu app.routing.ts Datei:
Pfad: '**', Komponente: NotFoundComponent
Hier ist wie das app.routing .ts Datei sieht:
RouterModule, Routes von '@ angle / router' importieren; importieren Sie ModuleWithProviders aus '@ angle / core / src / metadata / ng_module'; import CalcComponent aus './calc/calc.component'; HomeComponent aus './home/home.component' importieren; import NotFoundComponent aus './notfound/notfound.component'; export const AppRoutes: Routes = [Pfad: ", Komponente: HomeComponent, Pfad: 'calc', Komponente: CalcComponent, Pfad: '**', Komponente: NotFoundComponent]; export const ROUTING: ModuleWithProviders = RouterModule .forRoot (AppRoutes);
Speichern Sie die obigen Änderungen und starten Sie den Server erneut. Richten Sie Ihren Browser auf http: // localhost: 4200 / abc und Sie sehen die nicht gefundene Ausnahmemeldung.
In diesem Lernprogramm haben Sie die Grundlagen für das Routing in Angular kennen gelernt. Sie haben gelernt, wie Sie eine Route definieren und durch eine Angular-Anwendung navigieren.
Sie haben gelernt, wie Sie mit nicht vorhandenen Routen umgehen, indem Sie eine Wildcard-Route definieren. Sie haben gelernt zu bedienen RouterLink um zu einer anderen Route zu gelangen.
Wie haben Sie erfahren, wie Sie Angular Routing lernen? Teilen Sie uns Ihre Kommentare und Vorschläge im Kommentarbereich mit.
Der Quellcode aus diesem Tutorial ist auf GitHub verfügbar.
Accentsconagua