Angular CLI est un puissant outil de commandes permettant de créer un projet, d’ajouter des fichiers et d’effectuer diverses tâches de développement. La navigation au sein d’Angular s’effectue avec un système de route qui doivent être définies par l’utilisateur.
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>
Étape 5 : Optimisation des Performances avec le Lazy Loading
Pour ajouter une couche de sécurité à votre application, vous pouvez utiliser les guards. Par exemple, le guard ‘AuthGuard‘ peut être utilisé pour protéger certaines routes afin qu’elles ne soient accessibles qu’aux utilisateurs authentifiés.
Création d’un guard :
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}
canActivate(): boolean {
if (this.authService.isLoggedIn()) {
return true;
} else {
this.router.navigate(['login']);
return false;
}
}
}
Ajout d’un guard à une Route :
import { AuthGuard } from './auth.guard';
const appRoutes: Routes = [
{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
// autres routes
];
Étape 6 : Utilisation des guards pour protéger les routes
Le lazy loading permet de charger les modules de manière paresseuse, réduisant ainsi le temps de chargement initial de l’application.
Configuration du Lazy Loading :
const routes: Routes = [
{ path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
// autres routes
];
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.