Développement

Angular - Développement Avancé

3 jour(s) • 21h

Description

Objectif général: Permettre aux développeurs Angular expérimentés de maîtriser les patterns avancés du framework — Signals, Standalone Components, gestion d'état avec NgRx, programmation réactive RxJS, tests et optimisation des performances — afin de concevoir, architecturer et maintenir des applications Angular modernes à grande échelle. Un projet applicatif fil rouge complexe est développé et refactorisé progressivement tout au long de la formation — migration vers une architecture standalone, intégration des Signals, mise en place de NgRx — permettant à chaque participant de repartir avec des patterns directement applicables à leurs projets en production.

Objectifs pédagogiques

Maîtriser l'architecture Angular moderne : Standalone Components et migration depuis NgModules
Implémenter la réactivité fine avec les Signals Angular et les intégrer avec RxJS
Structurer et optimiser la gestion d'état avec NgRx (Store, Effects, Selectors)
Appliquer les patterns avancés de routing : guards, resolvers, lazy loading, prefetching
Développer et distribuer des librairies de composants Angular réutilisables
Écrire des tests unitaires et d'intégration robustes avec Jest et Testing Library
Optimiser les performances d'une application Angular en production
Documenter une architecture Angular avec Compodoc

Public concerné

Développeurs front-end expérimentés ayant déjà une bonne connaissance d’Angular.

Architectes logiciels souhaitant maîtriser les patterns avancés et les choix d'architecture Angular modernes

Tech leads souhaitant structurer et normaliser les pratiques Angular de leur équipe

Prérequis

Bonne maîtrise d'Angular : composants, services, routing, modules, formulaires réactifs

Connaissances solides en TypeScript et JavaScript ES2020+

Expérience de la conception et du développement d'applications web Angular

Déroulé du programme

Module 1 — Architecture moderne : Standalone Components et migration (3h)

L'évolution d'Angular : de NgModules vers une architecture standalone — pourquoi et comment
Standalone Components : principes, création, bootstrapping sans AppModule
Standalone Directives et Pipes : découplage et réutilisabilité maximale
Stratégie de migration progressive : de NgModules vers 100% standalone sans rupture
Injection de dépendances avancée : inject, InjectionToken, hiérarchie des injecteurs
Providers au niveau composant vs providers root : quand et pourquoi
Nouveaux control flow Angular (if, for, switch) : remplacement de NgIf, NgFor
Travaux pratiques : migration du projet fil rouge d'une architecture NgModules vers une architecture standalone — refactorisation progressive, extraction des providers, adoption du nouveau control flow

Module 2 — Signals Angular : réactivité fine et zoneless (4h)

Pourquoi les Signals ? Limites de Zone.js et du Change Detection traditionnel
L'API Signals : signal(), computed(), effect() — définition, lecture, écriture
Signals en lecture seule : encapsulation et exposition contrôlée de l'état
Signaux calculés (computed) : mémoïsation et dépendances automatiques
Effets (effect) : réagir aux changements sans abonnement manuel
Interopérabilité Signals / RxJS : toSignal(), toObservable() — choisir le bon outil
Input Signals : la nouvelle API @Input basée sur les Signals (input(), model())
Migration d'un composant basé sur Observables vers les Signals : stratégie et pièges
Vision zoneless : ApplicationRef.bootstrap sans Zone.js — état de l'art 2026
Travaux pratiques : réécriture d'un composant du projet fil rouge — migration des Input classiques vers input(), remplacement d'un Observable local par un Signal, utilisation de computed() pour des valeurs dérivées, mise en place d'un effect() pour la synchronisation

Module 3 — Programmation réactive avancée avec RxJS (3h)

Rappels : Observables, Subjects, pipe() — ce qui change à ce niveau
Opérateurs de transformation avancés : switchMap, mergeMap, concatMap, exhaustMap — choisir le bon selon le cas d'usage
Opérateurs de contrôle temporel : debounceTime, throttleTime, auditTime
Gestion des subscriptions : takeUntilDestroyed(), DestroyRef — éviter les memory leaks
Patterns RxJS avancés : combineLatest, withLatestFrom, forkJoin, race
Error handling robuste : catchError, retry, retryWhen
Hot vs Cold Observables : Subject, BehaviorSubject, ReplaySubject, AsyncSubject
Quand utiliser RxJS vs Signals : règles de décision pratiques et cas limites
Travaux pratiques : implémentation d'une recherche avec autocomplétion (debounceTime + switchMap + takeUntilDestroyed), gestion d'appels API parallèles avec forkJoin, intégration d'un BehaviorSubject comme source de données partagée

Module 4 — Gestion d'état avec NgRx (4h)

Pourquoi NgRx ? Le pattern Redux appliqué à Angular — cas d'usage et contre-indications
Architecture NgRx : Store, Actions, Reducers, Selectors, Effects
Créer un Store NgRx : structure, initialisation, intégration dans une application standalone
Actions : createAction, props — conventions et bonnes pratiques de nommage

Création de librairies Angular (4 heures)

Développer et publier des librairies de composants Angular.
Gestion des dépendances et intégration avec Angular CLI.
Travaux pratiques : développement d’une librairie de composants.
Reducers : createReducer, on() — immutabilité et pure functions
Selectors : createSelector, createFeatureSelector — mémoïsation et composition
Effects : createEffect, Actions, ofType — orchestration des effets de bord asynchrones
NgRx Signal Store : la nouvelle API basée sur les Signals — signalStore(), withState(), withMethods()
Signal State vs Signal Store : choisir selon la complexité de l'application
NgRx DevTools : time-travel debugging, inspection de l'état
Travaux pratiques : mise en place d'un Store NgRx complet sur le projet fil rouge — actions CRUD, reducer avec état normalisé, selectors composés, effect pour les appels API avec gestion des états loading/success/error ; exploration du Signal Store pour un sous-module isolé

Module 5 — Routing avancé et performance (3h)

Lazy loading avancé : routes autonomes avec loadComponent() et loadChildren()
Prefetching et stratégies de préchargement : PreloadAllModules, custom preloading strategy
Route Guards modernes : fonctionnels (canActivate, canDeactivate, canMatch) sans classe
Resolvers fonctionnels : pré-chargement des données avant activation de route
Gestion des erreurs de routing : redirectTo, pathMatch, wildcard routes
Optimisation du Change Detection : OnPush, ChangeDetectorRef, markForCheck()
Deferrable Views (defer) : chargement différé des blocs de template
Performance Budgets : angular.json, analyse du bundle avec Source Map Explorer
Build optimisé : SSR avec Angular Universal, hydratation partielle, SSG
Travaux pratiques : refactorisation du routing du projet fil rouge — migration vers loadComponent(), implémentation d'un guard fonctionnel avec redirection, mise en place d'un resolver, mesure des performances avant/après avec Chrome DevTools et analyse du bundle

Module 6 — Tests avancés (2h)

État des tests Angular : Jest remplace Karma/Jasmine — pourquoi et comment migrer
Tests unitaires avec Jest : configuration, structure, mocking des dépendances Angular
Angular Testing Library : tester le comportement utilisateur plutôt que l'implémentation
Tester les Signals et les composants standalone
Tester les Effects NgRx : marbles RxJS, provideMockActions
Tester les Selectors NgRx : projector pattern
Tests d'intégration : TestBed, HttpClientTestingModule, RouterTestingModule
Couverture de code : interpréter les rapports, identifier les zones critiques non couvertes
Travaux pratiques : écriture d'une suite de tests complète sur un composant du projet fil rouge — tests unitaires des Selectors et du Reducer, test d'un Effect avec mock HTTP, test d'un composant standalone avec Angular Testing Library

Module 7 — Librairies, documentation et mise en production (2h)

Créer une librairie Angular avec Nx ou Angular CLI : workspace, structure, build
Publier et versionner une librairie : npm, peer dependencies, changelog
Exposer des tokens et API publiques propres depuis une librairie
Compodoc : générer et maintenir la documentation technique de l'architecture
Conventions de documentation : JSDoc, commentaires structurés, exemples de code
Checklist de mise en production : AOT, tree shaking, budgets de bundle, CSP
CI/CD pour les projets Angular : GitHub Actions, pipeline de test et de build automatisé
Plan d'action individuel : chaque participant identifie les 3 priorités à appliquer sur son projet
Travaux pratiques : génération de la documentation Compodoc du projet fil rouge, analyse du bundle de production, construction d'un pipeline GitHub Actions simplifié (lint + test + build)