[Vidéo] Utilisez les signaux, c'est le futur d'Angular !

Dans cette vidéo de 3 minute, découvrez pourquoi les signaux sont essentiels pour l'avenir du développement web et apprenez les 3 fonctions: signal / computed / effect

Skip to content

Créer un simple routeur

Dans le module, nous définissons les chemins pour les composants dans app.routes.ts :

js
import { RouterModule, Routes } from '@angular/router';

import {OtherComponent} from './other.component';
import {MainComponent} from './main.component';

export const routes: Routes = [
  { path: '', component: MainComponent },
  { path: 'other', component: OtherComponent }
];

On admet que nous avons 2 composants : MainComponent et OtherComponent. Nous créons donc un tableau définissant les différentes routes.

Chargeons le provider du routeur

Dans le fichier app.config.ts, nous chargeons le provider du routeur :

ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
    providers: [
        provideRouter(routes)
    ]
};

provideRouter prend en paramètre le tableau des routes définies précédemment. Il permet de charger le routeur dans l'application.

Utiliser les directives pour naviguer

Le composant utilise des directives pour naviguer avec le routeur :

js
import { Component } from '@angular/core';
import { RouterOutlet, RouterLink } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  template: `
    <ul>
      <li><a routerLink="/">main</a></li>
      <li><a routerLink="/other">other</a></li>
    </ul>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
}

La directive routerLink indique le chemin du composant et la directive router-outlet permet de charger le composant correspondant.

En août, Recevez des nouvelles libraries Angular 🌟 qui peuvent vous être utiles pour booster vos projets. Inscrivez-vous maintenant et découvrez les dernières tendances et outils Angular directement dans votre boîte mail !