Angular Moderne
Standalone Components, Routing et Forms
Cours Angular
4 mars 2026
Cours Angular Angular Moderne 4 mars 2026 1 / 32
Plan du cours
1 Standalone Components
2 Routing Angular
3 Template Driven Forms
4 Reactive Forms
5 Signals
6 Comparaison
7 Cas pratique
8 Exercices
Cours Angular Angular Moderne 4 mars 2026 2 / 32
Standalone Components
Depuis Angular 14, les composants peuvent être standalone.
Avantages :
moins de modules
architecture simplifiée
meilleure performance
Cours Angular Angular Moderne 4 mars 2026 3 / 32
Création d’un composant
ng generate component student --standalone
Cours Angular Angular Moderne 4 mars 2026 4 / 32
Exemple simple
import { Component } from ’@angular/core’;
@Component({
selector:’app-student’,
standalone:true,
template:’<h2>Students</h2>’
})
export class StudentComponent{}
Cours Angular Angular Moderne 4 mars 2026 5 / 32
Structure Standalone
Une application standalone contient :
composants
services
routes
Cours Angular Angular Moderne 4 mars 2026 6 / 32
Routing Angular
Le routing permet de naviguer entre les pages.
Exemple :
/home
/students
/courses
Cours Angular Angular Moderne 4 mars 2026 7 / 32
Définition des routes
export const routes:Routes=[
{path:’’,component:HomeComponent},
{path:’students’,component:StudentComponent}
];
Cours Angular Angular Moderne 4 mars 2026 8 / 32
Activation du Router
bootstrapApplication(AppComponent,{
providers:[provideRouter(routes)]
});
Cours Angular Angular Moderne 4 mars 2026 9 / 32
Router outlet
<router-outlet></router-outlet>
Cours Angular Angular Moderne 4 mars 2026 10 / 32
Navigation
<a routerLink="/students">Students</a>
Cours Angular Angular Moderne 4 mars 2026 11 / 32
Routes dynamiques
{path:’student/:id’,
component:StudentDetail}
Cours Angular Angular Moderne 4 mars 2026 12 / 32
Lecture du paramètre
constructor(private route:ActivatedRoute){}
id=[Link][’id’]
Cours Angular Angular Moderne 4 mars 2026 13 / 32
Lazy Loading
Avantages :
meilleure performance
réduction du bundle
Cours Angular Angular Moderne 4 mars 2026 14 / 32
Template Driven Forms
Formulaire basé sur le template HTML.
Avantages :
simple
rapide
Cours Angular Angular Moderne 4 mars 2026 15 / 32
Activation
import {FormsModule}
from ’@angular/forms’
Cours Angular Angular Moderne 4 mars 2026 16 / 32
Exemple formulaire
<form #f="ngForm">
<input name="nom"
ngModel>
<button>Envoyer</button>
</form>
Cours Angular Angular Moderne 4 mars 2026 17 / 32
Validation
<input name="email"
ngModel
required
email>
Cours Angular Angular Moderne 4 mars 2026 18 / 32
Reactive Forms
Approche recommandée pour :
formulaires complexes
validation avancée
tests
Cours Angular Angular Moderne 4 mars 2026 19 / 32
Activation
import {ReactiveFormsModule}
Cours Angular Angular Moderne 4 mars 2026 20 / 32
Création du formulaire
form=new FormGroup({
nom:new FormControl(’’),
email:new FormControl(’’)
})
Cours Angular Angular Moderne 4 mars 2026 21 / 32
Template
<form [formGroup]="form">
<input formControlName="nom">
<input formControlName="email">
</form>
Cours Angular Angular Moderne 4 mars 2026 22 / 32
Validation
email:new FormControl(’’,[
[Link],
[Link]
])
Cours Angular Angular Moderne 4 mars 2026 23 / 32
Signals Angular
Angular introduit les signals pour la réactivité.
Avantages :
performance
simplicité
reactivité fine
Cours Angular Angular Moderne 4 mars 2026 24 / 32
Créer un signal
import {signal} from ’@angular/core’
count=signal(0)
Cours Angular Angular Moderne 4 mars 2026 25 / 32
Update
increment(){
[Link](v=>v+1)
}
Cours Angular Angular Moderne 4 mars 2026 26 / 32
Template
<button (click)="increment()">
{{count()}}
</button>
Cours Angular Angular Moderne 4 mars 2026 27 / 32
Comparaison
Type Facilité Puissance
Template Forms Facile Moyen
Reactive Forms Moyen Très puissant
Signal Forms Moderne Très performant
Cours Angular Angular Moderne 4 mars 2026 28 / 32
Cas pratique
Application :
Gestion des étudiants
Fonctionnalités :
routing
formulaire inscription
validation
Cours Angular Angular Moderne 4 mars 2026 29 / 32
Exercice 1
Créer un routing :
accueil
étudiants
contact
Cours Angular Angular Moderne 4 mars 2026 30 / 32
Exercice 2
Créer un formulaire avec :
nom
email
password
Cours Angular Angular Moderne 4 mars 2026 31 / 32
Mini projet
Application Angular :
gestion étudiants
routing
reactive forms
Cours Angular Angular Moderne 4 mars 2026 32 / 32