Configurer rapidement le routing sur Angular

Dans cet article, découvrez comment réaliser rapidement le routing de votre outil Angular.

Notre formation Angular de 3 jours vous rendra opérationnel sur l’un des frameworks web les performant du marché. Vous y apprendrez comment créer vos propres composants réutilisables ainsi qu’à exploiter toutes les fonctionnalités avancées qui vous permettront de créer et de déployer des applications web.

L’équipe Ambient IT

Étape 1 : Installation du projet Angular

Installez d’abord le CLI Angular sur votre système : npm install -g @angular/cli

Créez un projet ngRouter : ng new ngRouter

Étape 2 : créez 3 composants pour l’application

Créez un répertoire dans src >> app appelé components puis à l’aide de la commande suivante, créez 3 composants :

ng g c home
ng g c about
ng g c dashboard

Cette manipulation créée un dossier séparé dans le répertoire src >> app. Il faut maintenant déplacer ces 3 dossiers vers leurs composants pour une meilleure composition du projet :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { DashboardComponent } from './dashboard/dashboard.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule, RouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Étape 3 : routing et navigation

Le routeur Angular permet la navigation d’une vue à une autre pendant la réalisation de tâches applicatives.

Il faut d’abord importer le module de routage dans le fichier app.module.ts :

// app.module.ts

import { RouterModule } from '@angular/router';

imports: [
    BrowserModule, RouterModule
],

Lorsque les composants sont créés, le chemin par défaut est différent et comme nous avons déplacé les composants, changez le chemin dans le fichier app.module.ts :

// app.module.ts

import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

Il faut ensuite créer un fichier dans le dossier de l’application appelé routerConfig.ts :

// routerConfig.ts

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';

const appRoutes: Routes = [
  { path: 'home', 
    component: HomeComponent 
  },
  {
    path: 'about',
    component: AboutComponent
  },
  { path: 'dashboard',
    component: DashboardComponent
  }
];
export default appRoutes;

Importez cet objet dans app.module.ts et enregistrez-le :

// app.module.ts

import appRoutes from './routerConfig';

imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes)
],

Étape 4 : définir la sortie du router

Dans le fichier app.component.html écrivez :

<!-- app.component.html  -->

<div style="text-align:center">
  <h1>
    Welcome to {{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>
</div>

Changez le titre dans app.component.ts :

// app.component.ts

title = 'Angular Router Tutorial';

Puis démarrez l’application :

ng serve --open

Tous les codes nécessaires au routing d’Angular ou ceux liés aux fonctions les plus avancées peuvent être trouvées sur le Github associé à l’outil. Vous pouvez découvrir comment en apprendre plus sur le routing Angular et sur l’outil en général avec notre article comment se former à Angular.