Application de cas pratique de routage angulaire

Cette fois, je vais vous présenter un cas pratique d'application du routage angulaire. Quelles sont les précautions à prendre pour utiliser le routage angulaire ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

Préface :

Le saut entre les vues de l'application angulaire dépend du routeur (routage). Dans ce chapitre, nous parlerons de l'application du routeur

. Explication avec exemples

Les résultats d'exécution sont les suivants. Trois barres de navigation sont configurées : Accueil, À propos et Tableau de bord. Cliquez sur différentes barres de navigation pour accéder à la page correspondante :

Créer 3 composants

1. ng g c home

2. ng g c à propos

3. ng g c tableau de bord

Routage et configuration

(1) **Présentez le routeur angulaire **

Lors de l'utilisation du routeur angulaire, vous devez introduire le module RouterModule, comme suit :

// app.module.ts
import { RouterModule } from '@angular/router';
imports: [
 BrowserModule, RouterModule
],

(2) Configuration du routage

Rappelez-vous qui gère le composant ? Oui, il est géré par le module. Par conséquent, introduisez le composant nouvellement créé dans app.moudle. Comme suit :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { appRoutes } from './routerConfig';
import { AppComponent } from './app.component';
import { AboutComponent } from './components/about/about.component';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

Astuce : Faites attention au chemin du composant Pour faciliter la gestion, nous avons déplacé le composant nouvellement créé vers le dossier des composants.

Créer le fichier de configuration du routeur

Dans le répertoire de l'application, créez le fichier routerConfig.ts. Le code est le suivant :

import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
export const appRoutes: Routes = [
 { path: 'home', 
 component: HomeComponent 
 },
 {
 path: 'about',
 component: AboutComponent
 },
 { path: 'dashboard',
 component: DashboardComponent
 }
];

Remarque : Angular 2.X ou supérieur commence à utiliser TypeScript pour écrire du code au lieu de JavaScript, donc le suffixe du fichier est : ts au lieu de js

Comment appeler ce fichier routerConfigue ? Il doit être chargé dans app.module.ts car app.moudle.ts est l'entrée de l'ensemble de l'application Angular.

// app.module.ts
import { appRoutes } from './routerConfig';
imports: [
 BrowserModule,
 RouterModule.forRoot(appRoutes)
],

Déclarer la prise du routeur

Dans le fichier app.component.html, ajoutez le code :

<p style="text-align:center">
 <h1>
  {{title}}!!
 </h1>
 <nav>
  <a routerLink="home" routerLinkActive="active">Home</a>
  <a routerLink="about">About</a>
  <a routerLink="dashboard">Dashboard</a>
 </nav>
 <router-outlet></router-outlet>
 </p>

Exécuter

Entrez le chemin où se trouve le projet et exécutez

ng serve --open

Lorsque webpack est compilé avec succès, dans la barre d'adresse du navigateur, saisissez : http://localhost:4200.

pour voir les résultats au début de cet article.

Concernant Router, changez la façon dont il est écrit :

Dans le fichier app.moudle.ts, le code est le suivant :

 imports: [
  BrowserModule,
  RouterModule.forRoot(
  [
   { path: 'home', 
   component: HomeComponent 
   },
   {
   path: 'about',
   component: AboutComponent
   },
   {
   path: 'dashboard',
   component: DashboardComponent
   }
  ]
  )
 ],

De cette façon, il n'est pas nécessaire de créer un fichier routerConfigure.ts séparé.

Résumé

Depuis l'introduction de l'orientation composant (composant), la gestion du routage est devenue beaucoup plus pratique qu'AngularJS (1.X).

Autre optimisation :

Peut-être avez-vous remarqué que lors de l'accès à http://localhost:4200, son chemin devrait être "/", et nous devrions définir ce chemin par défaut.

{
   path: '',
   redirectTo:'/home',
   pathMatch: 'full'
   },

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment transférer des données avec vue+props

Explication détaillée du cas pratique BubbleTransition

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!