Objectifs de la formation
- Organiser, modulariser et tester ses développements JavaScript
- Maîtriser les fondamentaux du Framework Angular
- Créer rapidement des applications Web complexes
- Savoir intégrer les tests unitaires au développement
- Connaître les bonnes pratiques de développement et de mise en production
- Mettre en œuvre la programmation réactive (RxJS et Signals)
Programme de la formation
Développement JavaScript : rappels
- Évolutions majeures d’ECMAScript (ES6 à aujourd’hui).
- Classes, modules, fonctions fléchées, promesses, async/await.
- Introduction à TypeScript : typage statique, interfaces, décorateurs.
- Les décorateurs avec TypeScript 5.x.
Travaux pratiques
Installation et configuration de l’environnement (Node.js, Angular CLI, VS Code).
Les fondamentaux d'Angular
- Architecture et cycle de développement d’une application Angular.
- Utilisation de l’Angular CLI (basé sur esbuild / Vite).
- Composants, templates, data binding et event binding.
- Les control flow @if, @for…
- Directives et pipes. Composition de directives.
- Gestion du style et encapsulation.
- Standalone Components : organisation des projets avec composants autonomes
Travaux pratiques
Création d’une mini-application interactive.
La programmation réactive
- Principes de la programmation réactive.
- Observables et opérateurs RxJS.
- Souscriptions et gestion de l’asynchronisme.
- Le mode Zoneless.
- Découverte des Signals, nouvelle API réactive native.
- Complémentarité entre RxJS et Signals.
Travaux pratiques
Flux de données réactifs dans l’application.
Composants avancés et services
- Communication Input Signal / Output Signal.
- Cycle de vie des composants.
- Utilisations des annotations.
- Décorateurs avancés (@ViewChild, @ContentChild, @Host…).
- Equivalences fonctionnelles basées sur les Signals.
- Les formulaires : Reactive Forms, FormControl et FormGroup.
- La validation des formulaires.
- Hiérarchie des injecteurs.
- Intégration optimisée des services avec les Standalone Components.
Travaux pratiques
Structurer une application multi-composants.
"Routing" et requête HTTP
- Configuration et gestion du Router Module.
- Navigation, liens dynamiques, paramètres et guards.
- Requêtes HTTP (GET, POST, PUT, DELETE).
- Intercepteurs, gestion d’erreurs, authentification.
- Simplifications du router (Inputs/Outputs de route).
- Support renforcé du SSR et de l’hydration progressive.
- Nouvelle classe HTTPClient / API Resource.
Travaux pratiques
Communication avec une API REST.
Tests et qualité du code
- Présentation de l’écosystème de test Angular CLI (Karma + Jasmine).
- Structuration des tests unitaires et d’intégration.
- Analyse de couverture et intégration CI/CD.
- Présentation de Vitest.
Travaux pratiques
Mise en place de tests unitaires sur composants et services.
Déploiement et bonnes pratiques
- Commandes de build et optimisation (esbuild, tree-shaking, minification).
- Variables d’environnement et gestion de configuration.
- Publication d’une application Angular sur serveur ou hébergement statique.
- Introduction au SSR (Server-Side Rendering) et à l’hydration progressive.
- Bonnes pratiques de performance et accessibilité (A11y).
- Introduction de l’IA intégrée depuis Angular 20.2
Travaux pratiques
Build et mise en production de l’application fil rouge.