Angular - Développement Avancé

• 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

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)

Du 18/09 au 20/09