Formation Angular, Développer des applications web (Avancé) Mixed: In person / distance learning

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.

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

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

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.

• Admission sans disposition particulière