Développement front-end avec Angular
Cours Pratique de 3 jours
Tarif par participant :
1590 € HT
Objectifs
- 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
Prérequis
- Connaissance de base du langage JS
- Accès à un environnement de développement (IDE, outils de build).
Le programme
Jour 1:
1. Introduction à Angular
- Qu’est ce qu’une single page application ?
- Installation de Vscode et Node.js
- Installation d’Angular CLI et création de notre première application
- Comprendre la structure
- TypeScript
2.Angular, mise en œuvre des bonnes pratiques
- Injection de dépendances.
- Types applicatifs partagés.
- PWA : les services workers.
- Requêtes HTTP avancées.
- Lazy loading.
- Automatiser la documentation.
- L’internationalisation.
- Travaux pratiques
- Analyser et optimiser une application.
3. Fonctionnement interne d’Angular
- ZoneJS : le concept.
- Optimisation des cycles de rendu, exécution hors ZoneJS.
- Choisir RxJS.
- Angular 9 Ivy Engine : configuration et migration.
- Utilisation des observables.
- Création, combinaison, opérateurs clés.
- Compilation ahead of time.
- Webpack bundle analyzer.
Travaux pratiques
Créer une application utilisant RxJS.
Jour 2:
4. Création de composants distribuables
- Les web components.
- Méthodologie : Interactive component sheet.
- Les décorateurs.
- Le change détection mode.
- Composants neutres versus à état. Communication entre composants, optimisation ES6.
- Projection de contenu, pilotage de composants enfants.
- Préparer les composants pour la distribution.
- Documentation : génération dynamique.
Travaux pratiques
Développer et packager des composants distribuables.
5. Composants riches et librairies externes
- Gestion des développements multi-projet.
- Découverte de l’écosystème Angular pour la gestion des données, AngularFire, NgRx.
- Les bibliothèques UI : Angular Material, Prime NG…
- Les animations.
Travaux pratiques
Réutilisation de composants, intégration de librairies externes.
Jour 3:
6. 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.
7. 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.
