Objectifs de la formation
- Savoir utiliser les décorateurs Angular
- Architecturer les applications web complexes
- Intégrer les outils de documentation et les tests unitaires
- Développer et intégrer des librairies de composants
Programme de la formation
Rappel sur Angular
- Introduction au cli Nx
- Architecture applicative
- Component-level Lazy Loading
- Automatiser la documentation
- Data Binding, mode manuel : ChangeDetectorRef
Travaux pratiques
Analyser et optimiser une application.
Fonctionnement interne d'Angular
- ZoneJS : le concept.
- Optimisation des cycles de rendu, exécution hors ZoneJS.
- Choisir RxJS.
- Utilisation des observables.
- Route guards et Resolve
- CanActivate, CanActivateChild : protéger une route
- Pre-fetching avec resolve
Travaux pratiques
Créer une application utilisant RxJS.
Les Signaux
- Présentation de l'API des signaux, définition, lecture et écriture
- Les signaux en lecture seule.
- Lien avec le monde des observables.
- Les signaux calculés.
- Les effets.
Travaux pratiques
Réécrire un composant utilisant des observables en remplaçant ces derniers par des signaux et dérivés.
Angular Standalone
- Pourquoi cette nouveauté ?
- Mise en place d’un component standalone
- Une nouvelle architecture sans module
- Passage d’une architecture modulaire à un 100% standalone
Travaux pratiques
Exemple d’utilisation des composants standalone
Internationalisation
- Internationalisation : i18n marker
- Gestion des textes à traduire
- Gestion du pluriel
Formulaire dynamique : le FormBuilder
- Création de formulaire dynamique : ReactiveFormsModule.
- FormControl et FormGroup, AbstractControl, FormArray.
- Validation et gestion d'erreur personnalisée.
- Création de modèles de données.
- Utilisation du FormBuilder.
- Création dynamique de template.
- Abstraction de composant métier de formulaire.
Travaux pratiques
Mise en œuvre de la génération et les cycles de validation avancée de formulaire.
Tests unitaires. Bonnes pratiques et outils
- Karma et Jasmine.
- Tests d'intégration avec Protractor.
- Le Code-Coverage.
- Behaviour driven development, Test driven development.
- Cas de test : pipe, component, service, etc.
Travaux pratiques
TDD : développer une application à partir de tests unitaires.
Server Side rendering : Angular Universal
- ServerModule
- Moteur back-end (Node.js et autres) : @nguniversal/express-engine
Travaux pratiques
Exemple d’application Angular côté serveur