Formation Angular, Développer des applications web (Avancé)
Apprendre à concevoir des applications Angular avancées, pensées pour durer, avec un code plus maîtrisé et une base solide pour aller plus loin.
- Référence formation :
- MOD_20251568
- Durée :
- 21 heures
- Satisfaction :
- Prix :
- 2120 € HT
Présentation de la formation
Cette formation de 3 jours (21 h) élève les équipes Angular au niveau expert, de l’architecture Ivy modulable aux composants & directives avancés. Elle couvre la gestion d’état réactive (NgRx / Signals), les stratégies de sécurité front et les tests unitaires poussés. Un focus est mis sur l’optimisation des performances : réduction de bundle, suivi Web Vitals et pipeline CI/CD automatisé (possiblement généré ou assisté par LLM).
Chaque bloc théorique se termine par un atelier guidé où les stagiaires refactorisent, sécurisent et déploient une application complète.
Objectifs pédagogiques
A l’issue de la formation, le stagiaire sera capable d’utiliser les fonctionnalités avancées d’Angular pour développer des applications web évolutives.
- Connaître l’architecture et les fonctionnalités avancées d’Angular
- Maîtriser les grands principes de la programmation réactive
- Développer une application web dynamique et performante
- Réaliser des tests unitaires
Public visé
- Architectes, développeurs, chefs de projets
Prérequis
- Avoir de bonnes connaissances d’Angular, des technologies du web et des outils de développement front-end.
Jour 1 – Architecture modulaire & composants avancés
- Structurer une app scalable et performante
- Maîtriser la détection de changement, Ivy, les décorateurs avancés
Structure modulaire avancée
- Partage de services vs isolation
- Chargement différé lazy loading
- Guards sur modules
Composants et décorateurs spécifiques
- @HostBinding (styles dynamiques)
- @ContentChild (projection)
- @Directive créant un attribut réutilisable
- Composants dynamiques avec ComponentActionResolver
Détection de changement
- Stratégie OnPush
- Marquage manuel avec ChangeDetectorRef
- Différences Zone.js vs Angular signal
Moteur Ivy
- Compilation juste-à-temps vs AOT
- Diagnostics avancés
Pipes & directives personnalisées
- Création
- Pureté
- Branchement à l’injection hiérarchique
Atelier pratique fil rouge
- Refactoriser une app existante en modules lazy + pipe custom.
Jour 2 – State, RxJS & sécurité
- Gérer des flux complexes avec NgRx ou Signals
- Protéger l’application par des stratégies de sécurité et des tests automatisés
Gestion d’état
- Comparaison NgRx vs Signals
- Store : cycle action, reducer, selector, devtools et side-effect
RxJS expert
- Opérateurs “higher-order”
- Gestion de flux annulables, Subject, Scheduler
Sécurité front-end
- Guards de route, interceptor rafraîchissement JWT, contextes rôle
- Content Security Policy, sanitization DOM, configuration Angular strict-XSS
Tests avancés Angular
- TestBed with Harnesses, mocks HttpClient, spies sur store
- Introduction à Cypress ou Playwright pour les tests end-to-end
- Seuil de couverture supérieur à 80 %
Atelier pratique fil rouge
- Implémenter store panier avec NgRx et guard rôle
- Écrire 2 tests Jest et 1 test end-to-end
Jour 3 – Optimisation des performances & Pipeline CI/CD
- Optimiser le bundle : taille et rapidité d’exécution
- Automatiser le pipeline
Optimisation build
- Lazy loading avancé, tree shaking, ESBuild, budgets
- Élargissement pré-rendu SSR / SSG
- Pré-chargement critique
Web Vitals
- Suivi LCP, TBT, INP avec API performance + Lighthouse
- Détection des memory leaks
Bundling ressources
- Compression Brotli, images AVIF/WebP, service-worker offline cache
CI GitHub
- GitHub Actions
- Workflow étapes distinctes
- Artefacts versionnés, rollback automatique
LLM pratique
- Prompt pour générer script YAML ou test Jest
- Checklist RGPD
- Retrait des secrets avant push
Atelier pratique fil rouge
- Réduire le bundle de 10 %
- Générer via LLM un workflow CI, l’ajuster puis déployer automatiquement
- Présenter le code, l’audit RGPD
Dernière mise à jour le 24 septembre 2026
Cette session n’a pas de date programmée, veuillez nous contacter pour en planifier une.
Modalités pratiques et pédagogiques
Docaposte Institute propose plusieurs dispositifs pédagogiques adaptés aux apprenants :
- Formation en présentiel
- En groupe (inter-entreprises ou intra-entreprise)
- En individuel (monitorat)
- En journée ou en cours du soir (sur demande spécifique)
- Formation en distanciel
- Distanciel synchrone
- Distanciel asynchrone
- Alternance d’apports théoriques et de mises en pratique contextualisées.
- Progression pédagogique structurée, de la compréhension à la mise en œuvre opérationnelle.
- Pédagogie immersive favorisant une mise en application immédiate des compétences.
- Formation interactive et participative s’appuyant sur des ateliers pratiques, études de cas et échanges collectifs (+ 60 % du temps de formation.)
- Séquences pédagogiques rythmées et évaluations formatives régulières pour renforcer l’ancrage des apprentissages.
- Supports de cours, ressources documentaires et références mis à disposition par le formateur
En amont de la formation (évaluation en ligne dans l’extranet apprenant)
- Recueil des besoins et des attentes des participants.
- Auto-positionnement permettant d’évaluer le niveau initial des apprenants.
Tout au long de la formation
- Évaluations continues réalisées par le formateur à travers des questions orales, exercices, QCM, études de cas et mises en situation pratiques.
À l’issue de la formation (évaluations en ligne dans l’extranet apprenant)
- Auto-positionnement afin de mesurer l’acquisition des compétences visées.
- Validation de l’acquisition des compétences par le formateur
- Questionnaire de satisfaction « à chaud » à l’issue de la formation
- Questionnaire de satisfaction « à froid », 45 jours après la formation afin d’évaluer l’ancrage des acquis et leur mise en application en situation professionnelle.
Nous consulter.
Nos formations peuvent être adaptées à certaines conditions de handicap. Nous contacter pour toute information et demande spécifique.