3 jours
Perfectionnement / Avancé
Présentiel Classe à distance
Partager
Accueil › Formations › Informatique › Langages et développement › Développeur Web HTML, CSS et JavaScript › Angular 21 et 22 - Développement d'applications Web
Validez les prérequis
Afin de vérifier que vous disposez bien des prérequis nécessaires à cette formation, nous vous invitons à réaliser ce test.
Temps estimé : 4 minutes.
Passer le testObjectifs de formation
A l'issue de cette formation, vous serez capable de :
- Utiliser les versions 21 et 22 du framework Angular
- Maîtriser l'architecture Signals-first et le mode zoneless
- Développer et tester complètement une application avec Vitest
- Concevoir des formulaires modernes (Reactive Forms et Signal Forms)
- Mettre en pratique les outils d'Intelligence Artificielle (IA) officiels d'Angular pour développer plus efficacement
- Appliquer les bonnes pratiques de développement.
Programme de votre formation
-
#
M2I START AVANT VOTRE FORMATION
Contextualisation du projet de formation et prise en compte des besoins de chacun
- Positionnement initial de l’apprenant par rapport aux objectifs
- Définition des priorités et des objectifs personnels de l’apprenant
- Vidéos de mise en situation
- Accès au Chat interactif myM2i pour interagir avec les membres de son groupe
-
#
M2I LIVE VOTRE FORMATION ANIMÉE PAR NOTRE EXPERT ¹
Programme
Jour 1 - Matin
Architecture, installation et premier projet Angular 21 / 22
- Architecture moderne d'une application Angular :
- Tout est standalone par défaut depuis Angular 19
- Disparition progressive des NgModule (encore supportés mais plus recommandés)
- Simplification du bootstrapping avec bootstrapApplication() et app.config.ts
- Installation de l'environnement avec Angular CLI v21 / v22
- Premier projet : création via CLI et déploiement local avec Vite / esbuild
- Le mode zoneless par défaut (Angular 21) :
- Suppression de zone.js des polyfills
- Bundle plus léger, change detection prévisible et plus performante
- provideZoneChangeDetection() à ajouter explicitement pour les anciennes applications
- TypeScript 5.9+ : types, classes, interfaces, modules ES, async / await
- Architecture MVVM Signals-first, sans Zone.js
- A noter pour Angular 22 : OnPush deviendra la stratégie de change detection par défaut
Exemple de travaux pratiques (à titre indicatif)
- Création d'un projet Angular 21 / 22 zoneless et exploration du code généré
Jour 1 - Après-midi
Les Signals : le cœur réactif d'Angular 21 / 22
- Pourquoi les Signals ? Le passage de Zone.js à un modèle réactif explicite
- Les trois primitives fondamentales :
- signal() - valeur réactive modifiable
- computed() - valeur dérivée, recalculée à la demande
- effect() - réaction à un changement (logs, persistance, side-effects)
- Lecture / écriture : (), .set(), .update()
- Comparaison rapide Signals vs Observables (Promises mises de côté pour le moment)
- Les Signals dans le template : binding automatique sans async pipe
Exemple de travaux pratiques (à titre indicatif)
- Création d'un compteur réactif puis d'une mini todo-list utilisant signal(), computed(), effect()
Jour 2 - Matin
Composants standalone, templates modernes et communication
- Démarrer "from scratch" avec ng new et composants standalone
- Création d'un composant à la main (@Component + bootstrapApplication)
- Templates syntaxiques modernes :
- Interpolation {{ }}
- Property binding [prop]
- Event binding (event)
- Two-way binding [(ngModel)]
- Directives structurelles intégrées @if, @for, @switch, @let
- Remplacement définitif de *ngIf, *ngFor, *ngSwitch
- Pipes intégrés et création de pipes personnalisés
- Communication entre composants avec les Signals :
- input() - remplace @Input() (signal en lecture seule côté enfant)
- output() - remplace @Output()
- model() - two-way binding signal-natif
- viewChild() / contentChild() à base de Signals
Exemples de travaux pratiques (à titre indicatif)
- Création de plusieurs composants communicants avec input(), output(), model()
- Liste filtrable utilisant @for et computed()
Jour 2 - Après-midi
Services, HTTP et accès au backend
- Création et injection de services avec inject() (recommandé)
- provideHttpClient() activé par défaut depuis Angular 21
- Différences entre Promises, Observables et Signals (rappel et choix selon les cas)
- Présentation rapide de RxJS (encore utile pour les flux asynchrones)
- Requêtes HTTP via HttpClient :
- HttpClient.get, post, put, delete
- Intercepteurs basiques
- Gestion d'erreurs avec catchError
- Intégration avec les Signals : convertir un Observable HTTP en Signal avec toSignal()
- Introduction à httpResource() : chargement asynchrone signal-natif (approfondi en formation avancée)
- async / await vs subscribe dans les composants
- Mise en place rapide de Tailwind CSS via ng add @angular/cli:tailwind
Exemple de travaux pratiques (à titre indicatif)
- Intégration d'une API REST externe dans un service, exposition via Signals et affichage dans le composant avec @if / @for
Jour 3 - Matin
Formulaires Angular : Reactive Forms et Signal Forms
- Types de formulaires : Template-driven vs Reactive Forms
- Création de formulaires "classiques" :
- FormsModule
- ReactiveFormsModule et FormBuilder
- FormGroup, FormControl typés (TypedFormGroup)
- Validation, gestion des erreurs, affichage dynamique
- Signal Forms - la grande nouveauté Angular 21 / 22 :
- Nouvelle API expérimentale (Angular 21) > stable (Angular 22)
- Création d'un formulaire avec la fonction form() à partir d'un signal modèle
- Synchronisation automatique entre modèle (signal) et DOM
- Validation déclarative basée sur des schémas
- Type-safety complet
- Mises à jour fines : seul le champ modifié déclenche un re-render
- Migration progressive avec @angular/forms/signals/compat
Exemples de travaux pratiques (à titre indicatif)
- Création d'un formulaire de login avec Reactive Forms typés
- Refactorisation du même formulaire en Signal Forms
Jour 3 - Après-midi
Routage, tests Vitest et développement assisté par Intelligence Artificielle (IA)
- Routage modulaire :
- Configuration via provideRouter()
- Définition des routes dans des fichiers séparés
- Lazy loading via loadComponent() et loadChildren()
- Navigation avec routerLink, RouterOutlet, paramètres dynamiques
- Notions de guards et resolvers (approfondies en formation avancée)
- Les tests dans Angular 21 / 22 :
- Vitest : runner officiel et stable depuis Angular 21
- Remplace Karma / Jasmine pour les nouveaux projets (Karma / Jasmine restent disponibles)
- Tests unitaires de composants standalone
- En mode zoneless : await fixture.whenStable() au lieu de fixture.detectChanges()
- E2E testing avec Playwright (préconisé)
- Développement Angular assisté par IA :
- Pourquoi Angular investit autant sur l'IA : framework qui évolue vite, LLM qui ont du retard
- Les fichiers llms.txt et llms-full.txt officiels (angular.dev/context/) :
- Index et corpus complet de la doc Angular optimisé pour les LLM
- A donner en contexte à Claude, ChatGPT, Gemini... pour générer du code Angular à jour
- best-practices.md : fichier de règles officielles à inclure dans son IDE
- Fichiers de règles spécifiques aux IDE :
- GitHub Copilot : .github/copilot-instructions.md
- Cursor : .cursor/rules/
- MCP Server Angular CLI (introduction) :
- ng mcp - serveur Model Context Protocol
- Permet à un assistant IA d'interagir directement avec votre projet Angular
- Découverte des principaux outils (vue détaillée en formation avancée)
Exemples de travaux pratiques (à titre indicatif)
- Configuration d'un router avec plusieurs vues (home, about, produit) et lazy loading
- Tests unitaires d'un service et d'un composant standalone avec Vitest
- Configuration de Claude / Cursor / Copilot avec les fichiers llms.txt officiels d'Angular et génération assistée d'un composant Signals-first
Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.
- Architecture moderne d'une application Angular :
-
#
M2I BOOST APRÈS VOTRE FORMATION
Réactivation et consolidation des acquis en situation de travail
- 30 jours d’accompagnement personnalisé sur myM2i inclus ²
- Ressources Boosters (Abonnement au M2i’Mag Soft Skills, formations offertes, invitations aux conférences d’actualité…)
- ¹ Les actions et les outils présentés dans ce programme le sont à titre indicatif et peuvent faire l’objet d'adaptation selon les niveaux, prérequis et besoins des apprenants. Les compétences clés de ce programme sont traitées à raison d'une compétence par demi-journée de formation.
- ² Sur myM2i, pendant 30 jours post-fin de formation, les apprenants disposent d’une messagerie sécurisée pour échanger, dans la limite de 4 sollicitations, avec leur formateur.
Modalités, méthodes et moyens pédagogiques
Formation délivrée en présentiel ou distanciel* (blended-learning, e-learning, classe virtuelle, présentiel à distance).
Le formateur alterne entre méthode** démonstrative, interrogative et active (via des travaux pratiques et/ou des mises en situation).
Variables suivant les formations, les moyens pédagogiques mis en oeuvre sont :
- Ordinateurs Mac ou PC (sauf pour certains cours de l'offre Management), connexion internet fibre, tableau blanc ou paperboard, vidéoprojecteur ou écran tactile interactif (pour le distanciel)
- Environnements de formation installés sur les postes de travail ou en ligne
- Supports de cours et exercices
En cas de formation intra sur site externe à M2I, le client s'assure et s'engage également à avoir toutes les ressources matérielles pédagogiques nécessaires (équipements informatiques...) au bon déroulement de l'action de formation visée conformément aux prérequis indiqués dans le programme de formation communiqué.
* nous consulter pour la faisabilité en distanciel
** ratio variable selon le cours suivi
Modalités d’évaluation des acquis
- En cours de formation, par des études de cas ou des travaux pratiques
- Et, en fin de formation, par un questionnaire d'auto-évaluation
Accessibilité de la formation
Le groupe M2I s'engage pour faciliter l'accessibilité de ses formations. Toutes nos formations sont accessibles aux personnes en situation de handicap : les détails de l
Modalités et délais d’accès à la formation
Les formations M2I sont disponibles selon les modalités proposées sur la page programme. Les inscriptions sont possibles jusqu'à 48 heures ouvrées avant le début de la formation. Dans le cas d'une formation financée par le CPF, ce délai est porté à 12 jours ouvrés.
