Sélectionner une page

Formation > Blog > Langage > Configurer rapidement le routing sur Angular

Apprenez le routing Angular

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.

UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?

Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.

ILS SE SONT FORMÉS CHEZ NOUS

partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp
partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp