Formation Angular

Programme de notre formation Angular 20

Introduction & fondamentaux

• ES2024 : le nouveau JavaScript
  • Nouveautés : Records/Tuples, pipeline operator, async context, pattern matching
  • Atelier pratique : refactoriser un script ES5 vers ES2024 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 MVVM, injection de dépendances hiérarchique
• Templating : lines directives, interpolation, sécurité du DOM
• Angular CLI : commandes essentielles, générateurs personnalisés, Nx basics
• Atelier pratique : installation de l’environnement, génération d’une première application, mise en place du linting et du formatage continu (Prettier + ESLint).

Composant

• Web Components & encapsulation Shadow DOM
• Décorateurs Angular : @Component, @Input, @Output, @Signal
• Data binding
• Cycle de vie avec signals
• Atelier pratique : Créer un composant réutilisable (carte utilisateur) + tests unitaires Jasmine/Karma.

Directives

• Directives structurelles et attributs : ngIf, ngFor, ngSwitch, ngClass, ngStyle
• Fonctionnement, hooks, DI dans une directive
• Attribute vs Structural directives
• Directives complexes
• 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
• Formater des collections
• Utiliser un pipe comme un service
• Atelier pratique : Créer ses propres pipes.

Modules & Lazy Loading

• Modules Angular : forRoot, forChild, provide*()
• Providers d’un module, provide*() API
• Imports/Exports, scopes, Lazy-loading
• Patterns forRoot / forChild
• Atelier pratique : créer un module Feature « Products », l’exporter puis l’intégrer dans l’app racine avec lazy-loading.

Services

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

Injection de dépendances (IOC)

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

Router

• Configuration des routes, guards, resolvers, lazy-loading dynamique
• URLs, redirections, paramètres typés (routerLinkActiveOptions)
• Vues imbriquées, named outlets, router-animations
• Atelier pratique : Transformer l’application précédente en SPA multi-features, protéger une route par un guard d’authentification JWT.

Tests & Sécurisation

• Principes TDD : Jasmine, Karma, Vitest
• Tests d’intégration avec TestBed + 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-plugin-security.

Observables : Réactivité avec RxJS & Signals

• Observables, opérateurs RxJS, différences avec Promises
• Nouveaux concepts : signal, effect, linkedSignal
• Bases de RxJS, marble diagrams
• Opérateurs de création, transformation, combinaison
• Atelier pratique : Implémenter un Observable de recherche auto-complétion avec annulation.

Échanger avec un serveur

• Requêtes HTTP : interceptors, réessais, back-off exponentiel
• API REST & GraphQL (Angular Apollo)
• Gestion d’état client : SignalStore, ComponentStore, NgRx SignalStore adapter
• Atelier pratique : consommer une API REST distante, stocker les données dans un signal store, afficher via AsyncPipe.

Formulaire

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

Performance & Optimisation

• Détection des changements : stratégies Default, OnPush, zoneless (en preview)
• ChangeDetection : Default vs OnPush, signeX autopush
• Compilation stratégies : JIT, AOT, hydration SSR
• Lazy-loading images, defer blocks, progressive hydration
• Hydratation incrémentale, chargement différé, directives @defer
• Atelier pratique : Profiler avec Angular DevTools, corriger un composant surchargé.