Description
En passe de devenir la référence des frameworks front-end dans le développement d’applications web, Angular apporte, au-delà du support ECMAScript et du typescript, un véritable écosystème qui permet d’améliorer les performances des applications mais aussi la productivité des équipes de développement. Nouvelle approche de conception, capacités d’industrialisation et réutilisation accrues, intégration des standards du développement web et outillage spécialisé rendent cette plateforme plus attractive et l’impose comme la solution de prédilection pour les projets applicatifs web.
A l’issue de la formation, le stagiaire sera capable de développer des applications web évolutives avec Angular.
Objectifs
- Connaître l’architecture et les fonctionnalités avancées d’Angular
- Maîtriser les grands principes de la programmation réactive
- Tester et sécuriser son développement
- Développer une application web dynamique et performante
- Réaliser des tests unitaires
Récapitulatif
Public
Développeurs JavaScript et Angular
Prérequis
De bonnes connaissances en JS et concepts MVC
Un premier contact avec AngularJS ou Angular peut permettre une prise en main des concepts avancées
Méthodes et modalités pédagogiques
Formation réalisée en Présentiel, Distanciel ou Dual-Learning selon la formule retenue.
Moyens et supports pédagogiques
Mise à disposition d’un poste de travail sur nos formations en Présentiel.
Mise à disposition de nos environnements de visio sur nos formations en Distanciel
Remise d’une documentation pédagogique numérique pendant la formation
La formation est constituée d’apports théoriques, d’exercices pratiques et de réflexions
Dans le cas d’une formation sur site Entreprise, le client s’engage à avoir toutes les ressources pédagogiques nécessaires (salle, équipements, accès internet, TV ou Paperboard…) au bon déroulement de l’action de formation conformément aux prérequis indiqués dans le programme de formation
Modalités de suivi et d'évaluations
Auto-positionnement des stagiaires avant la formation
Émargement des stagiaires et formateur par 1/2 journée
Exercices de mise en pratique ou quiz de connaissances tout au long de la formation permettant de mesurer la progression des stagiaires
Auto-évaluation des acquis de la formation par les stagiaires
Questionnaire de satisfaction à chaud et à froid à l’issue de la formation
Programme détaillé
Connaître l’architecture et les fonctionnalités avancées d’Angular
- Comprendre entre application modulaire et composants standalone
- Configurer l’application avec des standalone components
- Créer un premier composant standalone
- Exemples de travaux pratiques : Le participant crée une application Angular simple configurée avec un composant standalone, et développe ce composant pour afficher un message personnalisé dans l’interface utilisateur.
Maîtriser les grands principes de la programmation réactive
- Comprendre la difficulté de la gestion des états
- Comment Signal fonctionne
- Créer un composant utilisant Signal
- Signal et les effets de bord
- Tester un composant avec Signal
- Exemples de travaux pratiques : Le participant développe un composant Angular utilisant Signal pour gérer dynamiquement l’état d’un élément affiché, puis réalise des tests unitaires pour valider le comportement réactif du composant.
Développer une application web dynamique et performante
- Utiliser la CLI pour ajouter une librairie
- Créer un module spécifique pour l’intégration de Material
- Customiser une feuille de style pour Material
- Ajouter le support PWA à une application Angular
- Exemples de travaux pratiques : Le participant intègre Angular Material via la CLI, crée un module dédié pour ce framework, personnalise son thème graphique, puis active les fonctionnalités PWA dans une application Angular existante.
Créer une librairie Angular
- Retour sur la richesse et la puissance des Directive Angular
- Utiliser la CLI Angular pour créer la structure d’une librairie
- Comprendre l’API publique
- Ajouter une directive à la librairie et la déployer
- Ajouter la librairie à un développement existant
- Exemples de travaux pratiques : Le participant crée une librairie Angular via la CLI, y développe une directive personnalisée, déploie la librairie, puis l’ajoute et l’utilise dans une application Angular existante.
Tester et sécuriser son développement
- Le principe des Token Angular
- Intercepter les requêtes http avec HTTP_INTERCEPTOR
- Agir avant le chargement du premier composant avec APP_INITIALIZER
- Comprendre et bien utiliser les interfaces onInit, OnDestroy, …
- Exemples de travaux pratiques : Le participant crée un intercepteur HTTP pour gérer l’authentification, configure une initialisation préalable à l’application, et implémente des méthodes liées au cycle de vie des composants pour gérer les ressources.
Réaliser des tests unitaires
- Comprendre le pattern Observer
- Utiliser les opérateurs from, of pour générer des Observables
- Souscrire efficacement à un Observable
- Comprendre les Subject
- Exemples de travaux pratiques : Le participant écrit des tests unitaires vérifiant le comportement d’un service basé sur RxJS, crée et teste un composant Angular réactif utilisant des Observables, et simule différentes sources de données à l’aide de Subject.
Utiliser le pipeline d’opérateurs RxJS
- Comprendre les opérateurs RxJS : map, switchMap, mergeMap,
- Choisir le bon opérateur en fonction du contexte d’exécution
- Envoyer plusieurs requêtes HTTP en parallèle ou enchaînées
- Agréger les résultats de plusieurs flux de manière cohérente
- Exemples de travaux pratiques : Le participant implémente un service Angular qui interroge plusieurs endpoints via HttpClient, combine les réponses à l’aide des opérateurs RxJS, et affiche le résultat final dans un composant Angular.