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

• 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

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

Cette formation est accessible aux personnes en situation de handicap. Merci de nous contacter en amont afin d'étudier les aménagements nécessaires.