Formation Angular

Programme de notre formation Angular

Introduction & fondamentaux

• ES2024-2025 : le JavaScript moderne
  • Nouveautés : Pattern matching (TC39), Async Context, Set methods et Decorators
  • Atelier pratique : refactoriser un script ES5 vers les derniers standards en cinq itérations
• ES2024 et les modules
  • Import / export dynamiques, top-level await, scopes privés
  • Atelier pratique : charger dynamiquement un module pour afficher une fonctionnalité « feature-flag »
• TypeScript : le typage du JavaScript
  • Types avancés : unions, intersections, template-literal-types, infer
  • Décorateurs et métaprogrammation légère
• Atelier pratique : convertir le script précédent en TypeScript, configurer tsconfig strict.

Les bases du framework

• Philosophie d’Angular : architecture Standalone, injection de dépendances hiérarchique via inject()
• Templating : Control Flow (@if, @for), interpolation, sécurité du DOM
• Angular CLI : commandes essentielles, nouveau builder (esbuild), Nx basics
• Atelier pratique : installation de l’environnement, génération d’une application v21+, mise en place du linting et du formatage (Prettier + ESLint).

Composant

• Web Components & encapsulation Shadow DOM
• Réactivité moderne : input(), output(), model() et signals
• Data binding et zones de rendu
• Cycle de vie : de AfterViewInit aux effets de signaux
• Atelier pratique : Créer un composant réutilisable (carte utilisateur) + tests unitaires avec Vitest.

Directives

• Directives structurelles et attributs : @if, @for, ngClass, ngStyle
• Fonctionnement, hooks, DI dans une directive
• Attribute vs Structural directives
• Directives complexes et composition
• Atelier pratique : Écrire une directive appHighlight avec paramètres configurables et la publier via un Standalone Component.

Pipes

• Les transformateurs fournis
• Formater une chaîne et internationalisation
• Formater des collections
• Utiliser un pipe comme un service
• Atelier pratique : Créer ses propres pipes personnalisés.

Modules & Lazy Loading

• Transition vers le Full Standalone : provide*() API
• Compatibilité NgModules : forRoot, forChild
• Imports/Exports, scopes, Lazy-loading de composants
• Patterns d’organisation sans modules (Folder-based architecture)
• Atelier pratique : créer une route Feature « Products », l’exporter puis l’intégrer en lazy-loading dynamique.

Services

• Services fournis (HttpClient, Location, Title…)
• Atelier pratique : Instrumentation du service HttpClient avec un interceptor fonctionnel de journalisation.

Injection de dépendances (IOC)

• Résolveurs de dépendances : type-based & injection tokens
• Providers : value, factory, class, existing
• Atelier pratique : Créer un logger configurable avec injection token et l’injecter hiérarchiquement.

Router

• Configuration des routes, guards fonctionnels, resolvers, lazy-loading dynamique
• URLs, redirections, paramètres typés et Input binding du router
• Vues imbriquées, named outlets, View Transitions API
• Atelier pratique : Transformer l’application en SPA multi-features, protéger une route par un guard d’authentification JWT.

Tests & Sécurisation

• Principes TDD : Vitest, Playwright (remplaçants modernes de Jasmine/Karma)
• Tests d’intégration avec TestBed + Component Harnesses
• Sécurité : XSS, CSRF, Content Security Policy, Angular DomSanitizer
• Atelier pratique : écrire un test de composant avec Harness + mock HTTP, corriger une faille XSS signalée par ESLint.

Observables : Réactivité avec RxJS & Signals

• Observables, opérateurs RxJS, différences avec les Signals
• Nouveaux concepts : signal, computed, effect, linkedSignal
• Bases de RxJS, interopérabilité (toSignal, toObservable)
• Opérateurs de création, transformation, combinaison
• Atelier pratique : Implémenter un Observable de recherche auto-complétion avec bridge vers un Signal.

Échanger avec un serveur

• Requêtes HTTP : interceptors fonctionnels, réessais, back-off exponentiel
• API REST & GraphQL (Angular Apollo)
• Gestion d’état client : @ngrx/signals (SignalStore), ComponentStore
• Atelier pratique : consommer une API REST, stocker les données dans un SignalStore, affichage optimisé.

Formulaire

• Template-driven vs Reactive Forms
• Validators natifs & custom ; Async Validators
• Gestion d’erreurs et synchronisation avec les Signals (signalEffect)
• Atelier pratique : créer un formulaire de commande réactif, validation cross-field + envoi POST.

Performance & Optimisation

• Détection des changements : OnPush et mode Zoneless native
• Fine-grained reactivity : optimiser le rendu avec les Signals
• Compilation stratégies : AOT, Hydratation SSR et Event Replay
• Lazy-loading images, defer blocks (@defer), progressive hydration
• Hydratation incrémentale et chargement différé
• Atelier pratique : Profiler avec Angular DevTools, migrer un composant vers le mode Zoneless.