Développement

Angular, maîtriser le Framework Front-End de Google

3 jour(s) • 21h

Description

Maîtrisez Angular dans sa version actuelle : de l'architecture standalone aux Signals, en passant par les formulaires réactifs, le routing, les appels HTTP et le déploiement - cette formation vous rend opérationnel sur des projets réels en trois jours.

Objectifs pédagogiques

Configurer un environnement Angular et structurer une application avec l'approche standalone
Créer des composants réutilisables, maîtriser les templates et les mécanismes de data binding
Mettre en oeuvre la programmation réactive avec RxJS et les Signals natifs d'Angular
Construire des formulaires réactifs avec validation et typage fort
Configurer le routing, gérer la navigation et optimiser le chargement avec le lazy loading
Consommer des API REST avec HttpClient et gérer les erreurs
Ecrire des tests unitaires sur composants et services
Déployer une application Angular en production

Public concerné

Développeurs front-end, architectes logiciels et chefs de projet techniques amenés à concevoir ou contribuer à des applications web Angular.

Prérequis

Bonnes connaissances de JavaScript (fonctions, modules, asynchronisme).

Notions de HTML et CSS.

Une expérience de développement front-end est recommandée.

Déroulé du programme

Environnement et architecture Angular

Angular dans l'écosystème front-end : positionnement, cas d'usage, cycle de versions
Angular CLI : création de projet, structure générée, commandes essentielles (ng new, ng generate, ng serve, ng build)
Moteur de build : esbuild et Vite préconfigurés depuis Angular 17 -- impact sur les temps de compilation
Architecture moderne : approche standalone components (recommandée par défaut), différences avec l'approche NgModules
TypeScript pour Angular : typage statique, interfaces, classes, génériques, décorateurs -- ce qui est utile en pratique
Zone-less rendering : principes, activation via provideZonelessChangeDetection(), impact sur la détection des changements -- stabilisé en Angular 20

Composants et cycle de vie

Anatomie d'un composant standalone : @Component, template, styles, sélecteur
Création manuelle et via CLI (ng generate component)
Data binding : interpolation, property binding [prop], event binding (event), two-way binding [(ngModel)]
Nouveaux control flow templates : @if, @for, @switch -- syntaxe, différences avec *ngIf / *ngFor
Directives d'attributs et structurelles : principes, directives intégrées, création d'une directive personnalisée
Pipes intégrés (DatePipe, CurrencyPipe, AsyncPipe...) et création d'un pipe personnalisé
Cycle de vie des composants : ngOnInit, ngOnChanges, ngOnDestroy -- cas d'usage réels

Communication entre composants et services

Communication parent/enfant : signal inputs avec input(), function-based outputs avec output() et OutputEmitterRef -- nouvelle API Angular 17+
Injection de dépendances : principes, hiérarchie des injecteurs, fonction inject() recommandée
Création et injection d'un service : @Injectable({ providedIn: 'root' }), portée singleton, providers explicites si besoin
Injection contextuelle via app.config.ts : provideHttpClient(), provideRouter()...
@ViewChild, @ContentChild : cas d'usage pour accéder aux éléments du DOM ou aux composants enfants
Encapsulation des styles : ViewEncapsulation, Shadow DOM

Programmation réactive : RxJS et Signals

Principes de la programmation réactive : flux de données, push vs pull
RxJS : Observable, Observer, Subject, opérateurs essentiels (map, filter, switchMap, catchError, takeUntilDestroyed)
Gestion de l'asynchronisme : subscribe, async/await, AsyncPipe dans les templates
Signals (Angular Reactive Signals API) : signal(), computed(), effect() -- API réactive native introduite en Angular 16, centrale dans les versions récentes
Complémentarité RxJS / Signals : quand utiliser l'un, l'autre, ou les deux
httpResource : aperçu d'une API expérimentale Angular pour lier une requête HTTP à un Signal
Zone-less rendering : impact sur la réactivité en pratique

Formulaires réactifs avec typage fort

Template-driven forms vs Reactive forms : différences, cas d'usage respectifs
Reactive Forms avec FormBuilder, FormControl, FormGroup
FormGroup et FormControl typés (Angular 14+) : typage strict pour éliminer les any dans les formulaires
Validation synchrone et asynchrone : validators intégrés, validators personnalisés
Gestion des erreurs : affichage conditionnel, messages par type d'erreur
Désactivation et réinitialisation de formulaires, gestion des états (pristine, dirty, touched)
Envoi des données : requête POST depuis un formulaire, gestion de la réponse

Routing et navigation

Configuration du Router Angular : provideRouter(), définition des routes dans fichiers séparés
Navigation : routerLink, router.navigate(), paramètres dynamiques (:id), query params
Lazy loading avec loadComponent() : chargement différé d'un composant standalone sans module
Guards : CanActivate, CanDeactivate -- protection des routes et confirmation de navigation
Resolvers : pré-chargement de données avant affichage d'un composant
Vues imbriquées : router-outlet, routes enfants
Gestion des erreurs de routing : redirections, route wildcard

Communication HTTP et gestion des erreurs

HttpClient Angular : configuration avec provideHttpClient(), requêtes GET, POST, PUT, DELETE
Intercepteurs HTTP : cas d'usage (ajout de headers, logging, gestion globale des erreurs, authentification)
Gestion des erreurs HTTP : catchError, opérateur retry, messages utilisateur
async/await vs subscribe dans les composants : bonnes pratiques
Affichage de données asynchrones avec AsyncPipe
Aperçu de httpResource : API expérimentale Angular pour lier une requête HTTP à un Signal

Tests unitaires et E2E

Ecosystème de test Angular : Vitest (runner par défaut sur les nouveaux projets Angular CLI), Karma/Jasmine (encore supportés), Jest (alternatif)
Tester un service : TestBed, injection de dépendances, provideHttpClient() + provideHttpClientTesting()
Tester un composant standalone : ComponentFixture, détection des changements, requêtes DOM
Tester avec des Signals : vérification des valeurs réactives
Analyse de couverture : ng test --code-coverage, interprétation des rapports
Tests E2E : Playwright (préconisé, remplaçant de Protractor déprécié) -- configuration et premier script de navigation

Déploiement, performance et bonnes pratiques

Commandes de build : ng build, options (--configuration production, --base-href)
Optimisations automatiques : tree-shaking, minification, lazy chunks -- lire et interpréter le bundle report
Variables d'environnement : environment.ts, gestion par configuration (dev / staging / prod)
Publication sur serveur statique (Nginx, Apache) et hébergements cloud (Netlify, Vercel, Azure Static Web Apps) -- configuration du fallback HTML5 pour le routing Angular
Introduction au SSR (Server-Side Rendering) Angular : cas d'usage, principes, différences avec le rendu client
Bonnes pratiques de performance : OnPush change detection, lazy loading, trackBy dans @for
Bonnes pratiques de code : structure de projet, conventions de nommage, lint (ESLint Angular), organisation des modules et services
Plan d'action individuel : chaque participant identifie les trois actions prioritaires à mettre en oeuvre sur son projet