Routing et navigation avec Angular 17

Mis à jour : 03/01/2024 danny

Le Routing ou Routage permet de gèrer les URL ou Routes d'une Application Web

Dans ce tutoriel nous allons intégrer le routing en utilisant le framework javascript Angular version 17.0.7

Angular dispose de la librairie angular@routeur.

​​​​​​​Celle-ci nous permettra de mettre en place rapidement et facilement la navigation au travers du routing.

Routing avec Angular
Routing avec Angular

Si vous n'avez pas le temps de lire ce guide en entier,
téléchargez le maintenant


Comment le faire ?

Pour réaliser ce routage voici un résumé de ce que nous allons faire

  • Avant de Commencer
    Qu'est-ce que le routing ou routage ?
     
  • Création de notre projet Angular
    Nous utiliserons un projet existant contenant les fonctionnalités essentielles.
    Le projet a été généré avec Angular CLI.
     
  • Structure du projet
    Avant d'intégrer nos modifications il nous faut choisir une structure.
     
  • Initialisation du projet
    En utilisant angular Cli
     
  • Child Routes
    Comment gèrer des routes plus complexes
    ​​​​​​​
  • Effectuer les Tests
    Réaliser les tests unitaires.
     
  • Code source
    Pour les plus pressés d'entre vous, le code complet du projet est disponible sur Github.

    Il vous suffit de vous rendre à l'adresse suivante
    https://github.com/ganatan/angular-react-routing
     

Avant de commencer

Tout d'abord un exemple pour essayer de comprendre la théorie.

2 films nous intéressent ou plutôt intéressent nos enfants (à vous de voir).
​​​​​​​Utilisons donc Wikipedia c'est rapide et c'est simple.

Et v​​​​​​oyons ce que cela donne en image.

Angular HTML et Routing Le roi Lion et avengers

Quelques explications maintenant.
​​​​​​​
Un site web est constitué d'une multitude de pages.
Ces pages sont écrites grâce notamment au langage HTML.
HTML signifie HyperText Markup Language.

L'hypertexte est la technologie qui permettra de relier une page à d'autres pages via des hyperliens.

Le Routing est le mécanisme qui permet de naviguer d'une page à une autre dans notre exmple.

Par exemple si vous tapez ces deux url dans votre navigateur.


En fonction du nom de film indiqué dans l'url, l'application Web de Wikipedia va déterminer le traitement à effectuer.
Ce traitement permettra d'afficher la page web correspondante au film demandé (ici Le_Roi_lion ou Avengers:_Endgame).

C'est ce que l'on appelle le Routage ( traduit littéralement en anglais par Routing ).

Si nous devions faire une comparaison c'est un peu comme un aiguilleur du ciel ou un chef de gare.
Sans Routage on ne sait plus on va.

​​​​​​Donc vous l'aurez compris sans routage pas d'application Web.
Ce qui pourrait donner ça.

Angular sans routage avec routage


Ce principe de fonctionnement étant omniprésent dans l'utilisation d'un site web, il nous faut l'appliquer au plus vite dans tout projet web.

​​​​​​​Nous allons donc implémenter ce mécanisme dans notre projet Angular.


Création du projet Angular

Pour pouvoir continuer ce tutoriel nous devons bien évidemment disposer de certains éléments

  • Node.js : La plateforme javascript
  • Git : Le logiciel de gestion de versions. 
  • Angular CLI : L'outil fourni par Angular.
  • Visual Studio code : Un éditeur de code.

Vous pouvez consulter le tutoriel suivant qui vous explique en détails comment faire


Dans ce tutoriel nous allons utiliser un projet existant dont les caractéristiques sont

  • Genéré avec Angular CLI
# Créez un répertoire demo (le nom est ici arbitraire)
mkdir demo

# Allez dans ce répertoire
cd demo

# Récupérez le code source sur votre poste de travail
git clone https://github.com/ganatan/angular-react-starter

# Allez dans le répertoire qui a été créé
cd angular-react-starter
cd angular

# Exécutez l'installation des dépendances (ou librairies)
npm install

# Exécutez le programme
npm run start

# Vérifiez son fonctionnement en lançant dans votre navigateur la commande
http://localhost:4200/

Structure du projet

La question de la structure de notre projet se pose très rapidement.
Cette structure conditionnera les modifications que nous ferons au fur et à mesure du développement du projet.

Angular nous donne certains conseils dans sa documentation officielle


Lors de la création du projet avec Angular CLI la structure créée par défaut est la suivante

Remarque
Le répertoire environments n'est plus généré automatiquement depuis Angular 15.
Je l'ai rajouté manuellement dans le tutoriel précédent Démarrer avec Angular.
​​​​​​​

|-- src/
    |-- app
    |-- assets
    |-- environments
package.json

Nous allons suivre cette façon de procéder en imaginant les éléments qui pourraient constituer notre projet.

|-- src/
    |-- app
        |-- components
        |-- directives
        |-- mocks
        |-- pages
        |-- pipes
        |-- services
    |-- assets
    |-- environments
package.json

Le choix que nous avons fait est arbitraire, votre structure pourra prendre n'importe quelle autre forme.
Ce choix sera néanmoins suivi dans les tutoriels suivants.

  • pages/general regroupera les éléments que l'on retrouve dans tous les projets.
  • pages/application regroupera les éléments spécifiques à une application.

Pour créer un nouveau projet il suffira de copier le projet de base et d'adapter pages/application à nos besoins.

|-- app
    |-- components
    |-- directives
    |-- mocks
    |-- pages
        |-- general   (contient les éléments que l'on retrouve dans tous les types de projet)
            |-- not-found
            |-- home
            |-- contact
            |-- login
            |-- signup
        |-- application  (contient les éléments spécifiques à notre projet)
            |-- item01
            |-- item02
            |-- ....
            |-- itemXX
     |-- pipes
     |-- services
|-- assets
|-- environments

Initialisation

Un rapide tour d'horizon avant de voir les détails techniques

Angular propose une librairie angular@routeur qui permet de gérer le routing.

Dans les versions Antérieures à Angular 17 le routing était gérée de la façon suivante.

La librairie angular@routeur était importée dans un module dédié au routage.
Ce module portait le nom suivant app-routing.module.ts

Depuis la version 17 le routing est implicite lors de la création du projet avec Angular CLI.
​​​​​​​

Le routing est ainsi géré via 3 fichiers de base.

  • app.component.ts
  • app.config.ts
  • app.routes.ts​​​​​​​

Le schéma suivant vous expliquera comment il est géré avec la version 17.

Tout au long de ce didacticiel nous essaierons d'utiliser les commandes que propose angular-cli pour genérer automatiquement le code source nécessaire.

Tout d'abord nous allons créer six composants qui seront utilisés dans le routing.
Un composant correspondra à une page Web.
Ce sont six pages Web classiques que l'on retrouve dans tout site web.

  • Home
  • Contact
  • About
  • Login
  • Signup​​​​
  • NotFound

Donc deux schémas pour récapituler ce que nous allons faire avec la version 17
​​​​​​​et sa comparaison avec les version 16 et antérieures.

Routing avec Angular 17

Angular Router

Routing avec Angular 16

Angular Router

Nous utiliserons angular CLI pour cela.

Le tutoriel suivant vous donnera des informations sur les commandes Angular CLI
https://www.ganatan.com/tutorials/demarrer-avec-angular-cli


Exécutons les commandes suivantes.

ng g correspond à la commande ng generate

# Création des nouveaux composants (méthode 1)
ng generate component pages/general/contact
ng generate component pages/general/login
ng generate component pages/general/signup
ng generate component pages/general/home
ng generate component pages/general/about
ng generate component pages/general/not-found

# Création des nouveaux composants (méthode 2)
ng g c pages/general/contact
ng g c pages/general/login
ng g c pages/general/signup
ng g c pages/general/home
ng g c pages/general/about
ng g c pages/general/not-found

Les répertoires pages et pages/general sont créés par la commande éxécutée.
Tous les fichiers relatifs à chaque composant sont créés automatiquement par angular CLI.

Par exemple pour le composant Home 4 fichiers sont créés

  • home.component.css    (code CSS dédié au design)
  • home.component.html   (code HTML)
  • home.component.spec.ts  (code de test unitaire du composant)
  • home.component.ts    (partie logique en typescript de notre composant)

 

Il faut ensuite modifier les fichiers suivants

  • app-routes.ts
  • styles.css
  • app.component.html
  • app.component.css
  • app.component.ts
  • app.component.spec.ts​​​​​​​

Ce qui permettra de traiter le routage désiré et les composants appelés.

src/app/app-routes.ts
import { Routes } from '@angular/router';

import { HomeComponent } from './pages/general/home/home.component';

import { LoginComponent } from './pages/general/login/login.component';
import { SignupComponent } from './pages/general/signup/signup.component';
import { NotFoundComponent } from './pages/general/not-found/not-found.component';

import { AboutComponent } from './pages/general/about/about.component';
import { ContactComponent } from './pages/general/contact/contact.component';

export const routes: Routes = [
    { path: '', component: HomeComponent, },

    { path: 'login', component: LoginComponent },
    { path: 'signup', component: SignupComponent },

    { path: 'about', component: AboutComponent },
    { path: 'contact', component: ContactComponent },

    { path: '**', component: NotFoundComponent }
];
src/styles.css
body {
  color: black;
  font-weight: 400;
}

Dans le composant AppComponent nous prendrons soin de rajouter l'élément <router-outlet> au niveau du fichier app.component.html.
Il indiquera au router ou afficher les éléments graphiques routés.

L'élément routerLink permettra de créer le lien vers les pages souhaitées.

src/app/app.component.html
<div class="app">
  <header>
    <section>
      <h1>{{ title }}</h1>
    </section>
    <nav>
      <h2>3 Links with Routes</h2>
      <ul>
        <li><a routerLink="/">Home</a></li>
        <li><a routerLink="/login">Login</a></li>
        <li><a routerLink="/signup">Signup</a></li>
      </ul>
      <h3>2 Links with Child Routes</h3>
      <ul>
        <li><a routerLink="/about">About</a></li>
        <li><a routerLink="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h4>Routes Result</h4>
    <router-outlet></router-outlet>
  </main>

  <footer>
    <a href="{{ footerUrl }}">{{ footerLink }}</a>
  </footer>

</div>
src/app.component.css
h1 {
  color: blue;
}

.app {
  font-family: Arial, Helvetica, sans-serif;
  max-width: 500px;
  margin: auto;
}

src/app.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterLink, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-routing';
  footerUrl = 'https://www.ganatan.com';
  footerLink = 'www.ganatan.com';
}


Le routing fonctionne

Après toutes ces modifications vérifions que cela fonctionne.
On éxécute le script de lancement et on teste le résultat dans le navigateur.

# Exécutez l'application
npm run start

# Testez l'application dans votre navigateur
http://localhost:4200

Le programme fonctionne , testez le routing en cliquant sur les différents liens.

​​​​​​​On est d'accord ce n'est pas très joli.
Mais on a fait rapide on a utilisé du HTML et du CSS très simples.

​​​​​​​On peaufinera tout ça plus tard en utilisant Bootstrap dans un tutoriel suivant.

​​​​​​​En attendant le résultat en image.
 

Angular et routing résultat  en image

Il nous faut rajouter le module RouterTestingModule au niveau des tests unitaires du composant App.
Ce rajout se fait au niveau du fichier de test correspondant app.component.spec.ts.

src/app/app.component.spec.ts
import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { RouterTestingModule } from '@angular/router/testing';

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent, RouterTestingModule],
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have the 'angular-routing' title`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('angular-routing');
  });

});

Child Routes


Pour gérer des routes plus complexes, par exemple faire du routage à partir du composant contact, il nous faut aborder la gestion des Child routes ou Nesting Routes.

Cette question est évoquée dans la documentation
https://angular.io/guide/router#child-route-configuration

Nous allons rajouter cinq composants qui seront accessibles à partir des composants Contact et About

  • mailing (pour contact)
  • mapping (pour contact)
  • ​​​​​​​website (pour contact)​​​​​​​
     
  • skill (pour about)​​​​​​​
  • experience (pour about)​​​​​​​​​​​​​​
     

# Rajout des trois composants pour contact
ng generate component pages/general/contact/mailing
ng generate component pages/general/contact/mapping
ng generate component pages/general/contact/website


# Rajout des deux composants pour about
ng generate component pages/general/about/skill
ng generate component pages/general/about/experience



4 fichiers sont automatiquement créés pour chaque composant par exemple pour mailing

  • mailing.component.css
  • mailing.component.html
  • mailing.component.spec.ts
  • mailing.component.ts​​​​​​​

Il nous reste à modifier le routage

  • contact.component.html
  • contact.component.ts
  • contact.component.spec.ts
  • about.component.html
  • about.component.ts
  • about.component.spec.ts
     
  • ​​​​​​​​​​​​​​app-routes.module.ts​​​​​​​

  •  
contact.component.html
<div>
    <p>contact works!</p>
    <ul>
      <li><a routerLink="/contact/mailing">Mailing</a></li>
      <li><a routerLink="/contact/mapping">Mapping</a></li>
      <li><a routerLink="/contact/website">Website</a></li>
    </ul>
    <h4>Child Routes Result</h4>
    <router-outlet></router-outlet>
  </div>
contact.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-contact',
  standalone: true,
  imports: [CommonModule, RouterLink, RouterOutlet],
  templateUrl: './contact.component.html',
  styleUrl: './contact.component.css'
})
export class ContactComponent {

}
about.component.html
<div>
    <p>about works!</p>
    <ul>
      <li><a routerLink="/about/experience">experience</a></li>
      <li><a routerLink="/about/skill">skill</a></li>
    </ul>
    <h4>Child Routes Result</h4>
    <router-outlet></router-outlet>
  </div>
about.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-about',
  standalone: true,
  imports: [CommonModule, RouterLink, RouterOutlet],
  templateUrl: './about.component.html',
  styleUrl: './about.component.css'
})
export class AboutComponent {

}
app-routes.ts
import { Routes } from '@angular/router';

import { HomeComponent } from './pages/general/home/home.component';
import { LoginComponent } from './pages/general/login/login.component';
import { SignupComponent } from './pages/general/signup/signup.component';
import { NotFoundComponent } from './pages/general/not-found/not-found.component';

import { AboutComponent } from './pages/general/about/about.component';
import { ExperienceComponent } from './pages/general/about/experience/experience.component';
import { SkillComponent } from './pages/general/about/skill/skill.component';

import { ContactComponent } from './pages/general/contact/contact.component';
import { MailingComponent } from './pages/general/contact/mailing/mailing.component';
import { MappingComponent } from './pages/general/contact/mapping/mapping.component';
import { WebsiteComponent } from './pages/general/contact/website/website.component';

export const routes: Routes = [
  { path: '', component: HomeComponent, },

  { path: 'login', component: LoginComponent },
  { path: 'signup', component: SignupComponent },

  {
    path: 'about', component: AboutComponent,
    children: [
      { path: '', component: ExperienceComponent },
      { path: 'experience', component: ExperienceComponent },
      { path: 'skill', component: SkillComponent },
    ],
  },
  {
    path: 'contact', component: ContactComponent,
    children: [
      { path: '', component: MailingComponent },
      { path: 'mailing', component: MailingComponent },
      { path: 'mapping', component: MappingComponent },
      { path: 'website', component: WebsiteComponent },
    ],
  },

  { path: '**', component: NotFoundComponent }
];
contact.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { ContactComponent } from './contact.component';
import { RouterTestingModule } from '@angular/router/testing';

describe('ContactComponent', () => {
  let component: ContactComponent;
  let fixture: ComponentFixture<ContactComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [ContactComponent, RouterTestingModule]
    })
      .compileComponents();

    fixture = TestBed.createComponent(ContactComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});
about.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { AboutComponent } from './about.component';
import { RouterTestingModule } from '@angular/router/testing';

describe('AboutComponent', () => {
  let component: AboutComponent;
  let fixture: ComponentFixture<AboutComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AboutComponent,RouterTestingModule]
    })
    .compileComponents();
    
    fixture = TestBed.createComponent(AboutComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Tests

Il ne reste plus qu'à tester les scripts suivants.

# Développement
npm run start
http://localhost:4200/

# Test de la page not-found
http://localhost:4200/lien-inconnu

# Tests
npm run test

# Production
npm run build

Code source

Le code source utilisé en début de tutoriel est disponible sur github
https://github.com/ganatan/angular-react-starter

Le code source obtenu à la fin de ce tutoriel est disponible sur github
https://github.com/ganatan/angular-react-routing

 

L' étape suivante est la gestion du Lazy Loading.
Elle nécessite un tutoriel complet qui est à l'adresse suivante

Les étapes suivantes vous permettront d'obtenir une application prototype.

Les étapes suivantes vous permettront d'améliorer ce prototype​​​​​​​

​​​​​​​
Cette dernière étape permet d'obtenir un exemple d'application


Le code source de cette application finale est disponible sur GitHub
https://github.com/ganatan/angular-app

Comment créer une application From scratch ?

Créez votre compte ganatan

Téléchargez gratuitement vos guides complets

Démarrez avec angular CLI Démarrez avec angular CLI

Gérez le routing Gérez le routing

Appliquez le Lazy loading Appliquez le Lazy loading

Intégrez Bootstrap Intégrez Bootstrap


Utilisez Python avec Angular Utilisez Python avec Angular

Utilisez Django avec Angular Utilisez Django avec Angular

Utilisez Flask avec Angular Utilisez Flask avec Angular

Ganatan site Web avec Angular