Cours Angular : construire des applications web avec TypeScript
Angular est un cours de niveau intermédiaire de 5 leçons (environ 1 h 33), avec 20 exercices et 15 questions de quiz. Prérequis : TypeScript. Les exercices s'exécutent dans le navigateur, sans installation.
- Front-end
- Intermédiaire
- 5 leçons
- 1 h 33
- 20 exercices
- Exercices exécutés dans le navigateur
Le cours en bref
Ce cours vous apprend à construire une application Angular moderne en TypeScript : composants standalone et signaux, services et injection de dépendances, observables RxJS et client HTTP, formulaires réactifs validés, routage avec chargement à la demande et gardes. Les exercices de code portent sur la logique des services, validateurs et routes, vérifiée automatiquement ; les composants se construisent dans des tâches pratiques au résultat vérifiable.
Ce que tu sauras faire
- Créer une application avec Angular CLI et écrire des composants standalone avec leurs templates
- Gérer l'état avec les signaux et faire communiquer les composants avec input() et output()
- Organiser la logique en services injectés et choisir la portée de leurs fournisseurs
- Utiliser les observables RxJS et HttpClient sans fuite d'abonnement
- Construire des formulaires réactifs typés avec validateurs fournis, personnalisés et de groupe
- Configurer le routeur : paramètres, chargement à la demande, page introuvable et gardes fonctionnelles
Programme des 5 leçons
- Créer un projet avec Angular CLI et comprendre la structure d'une application standalone
- Écrire un composant avec son template : interpolation, liaisons de propriété et d'événement, @if et @for
- Gérer un état local avec les signaux et transmettre des données avec input() et output()
Composants standaloneTemplates et blocs de contrôleSignaux (signal, computed)input() et output()
- 02
Services et injection de dépendances
- Créer un service qui regroupe une logique ou un état partagé
- Injecter des dépendances avec inject() ou le constructeur et choisir leur portée
- Remplacer une dépendance par une autre (jeton, abstraction, double de test)
- 03
RxJS, observables et client HTTP
- Expliquer ce qu'est un observable et en quoi il diffère d'une promesse
- Composer des opérateurs RxJS (map, filter, debounceTime, switchMap, catchError)
- Appeler une API avec HttpClient et consommer le résultat sans fuite (async, toSignal, takeUntilDestroyed)
Observables RxJSOpérateurs RxJSHttpClientSubject et BehaviorSubject
- 04
Formulaires réactifs et validation
- Choisir entre formulaires pilotés par le template et formulaires réactifs
- Construire un formulaire réactif typé avec FormBuilder, FormGroup et FormControl
- Valider avec les validateurs fournis et personnalisés et afficher des erreurs accessibles
Formulaires réactifsValidateursFormulaires pilotés par le template
- 05
Routage, chargement à la demande et gardes
- Déclarer les routes d'une application avec provideRouter, paramètres et redirections
- Naviguer avec routerLink et Router, et lire les paramètres de route
- Charger les pages à la demande et protéger des routes avec des gardes fonctionnelles
Projet final
Application de gestion de commandes avec Angular
Construisez l'interface d'une épicerie fictive qui gère ses commandes en ligne : catalogue avec recherche en direct, fiche produit, panier, création de compte et espace d'administration réservé. L'application utilise des composants standalone et des signaux, des services injectés, HttpClient sur une API simulée (fichiers JSON ou serveur local), des formulaires réactifs validés et un routeur avec chargement à la demande et gardes.
Livrables
- Un projet Angular CLI qui démarre avec ng serve et se construit avec ng build
- Des composants communiquant par input() et output(), avec @for (track) et @if
- Des services PanierService et SessionService fournis en racine, et un service d'API dont l'URL vient d'un InjectionToken
- Une recherche en direct avec debounceTime, switchMap et catchError, sans abonnement manuel non terminé
- Un formulaire d'inscription réactif avec validateurs personnalisés et de groupe
- Un routeur avec loadComponent, loadChildren pour l'administration, page introuvable et gardes de connexion et de rôle
Critères d'évaluation
- Composants centrés sur l'affichage, logique et état partagé dans des services
- Signaux mis à jour sans mutation, valeurs dérivées en computed
- Observables correctement composés et abonnements gérés (async, toSignal, takeUntilDestroyed)
- Formulaires accessibles : erreurs après interaction, messages explicites associés aux champs
- Routes ordonnées correctement, paramètres convertis, gardes renvoyant true ou une UrlTree
Questions fréquentes
Faut-il connaître TypeScript avant d'apprendre Angular ?
Oui. Angular est écrit et s'utilise en TypeScript : classes, interfaces, génériques et types d'union reviennent partout. Le cours TypeScript sert de prérequis.
Ce cours couvre-t-il les NgModule ?
Le cours utilise les composants standalone, devenus la norme dans les versions récentes. Il explique le rôle historique des NgModule pour que vous puissiez lire et faire évoluer un projet plus ancien.
Faut-il maîtriser RxJS pour utiliser Angular ?
Il faut en connaître les bases : observables, abonnement et quelques opérateurs (map, filter, switchMap, catchError), utilisés par le client HTTP, les formulaires et le routeur. Le cours les présente avec les signaux, qui simplifient la gestion de l'état.
Pourquoi les exercices de code ne contiennent-ils pas de composants Angular ?
Les exercices de code sont vérifiés automatiquement sans installer Angular : ils portent sur la logique (services, validateurs, observables, routes) en TypeScript ou JavaScript. Les composants, formulaires et routes se construisent dans des tâches guidées dans votre propre projet.
Ce cours, raconté pour ton métier
Dis ce que tu veux savoir faire : « Angular » prend sa place dans ton parcours, avec des exemples de ton secteur. Les notions restent celles du cours.