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

Last updated : 24/09/2026

Pré-inscription

Add to cart

Présentation

Cette formation de trois jours (21 h) conduit les développeurs de la mise en route d’un projet Angular à son déploiement en production.
La formation comprend la prise en main du framework, la création de composants réactifs et styles responsives, puis le routage multi-vues, les services injectables, les formulaires validés et le dialogue avec une API sécurisée. Enfin, elle permet d’améliorer l’optimisation des performances, de réaliser des tests unitaires/e2e et un pipeline CI/CD automatisé pour publier une application fiable et rapide.

Objectifs

A l'issue de la formation, le stagiaire sera capable de développer des applications web évolutives avec Angular

  • Comprendre les concepts clés d'Angular et ses dernières évolutions
  • Développer une application web Angular avec JavaScript et TypeScript
  • Tester et sécuriser son développement
  • Créer des composants réutilisables et modulaires
  • Connaître les bonnes pratiques de développement

Intended audience

Architectes, développeurs, chefs de projets…

Prerequisites

Avoir des connaissances pratiques sur les technologies du Web, les outils actuels de développement Front-End et JavaScript.

Programme

visuel

Jour 1 – Prise en main & composants fondamentaux

  • Générer un premier projet Angular
  • Comprendre la structure d'une application et le rôle des composants
  • Maîtriser liaisons de données et styles responsives

 

Environnement Angular

  • Installation et vérification de l'environnement
  • Structure modulaire d'Angular : dossiers, tests auto-créés, commandes utiles
  • Hot-reload et serveur de développement intégré

 

Langage TypeScript requis

  • Décorateurs, classes, interfaces
  • Types optionnels, modules ES

 

Composants & template HTML

  • Liaisons données / vue (interpolation, one-way, two-way)
  • Directives structurelles et attributs (*ngIf, *ngFor, [ngClass])
  • Bonne pratique : séparation logique composants/container

 

Styles & responsive

  • Encapsulation CSS
  • Responsive (Flex-layout, CSS grid, media-queries)

 

Atelier pratique Jour 1

  • Créer une mini-application « Carte de visite » (photo, contact, thème clair/sombre)
  • Intégrer un changement de thème (fiche produit, profil employé…) et des liens de navigation dynamique

 

Jour 2 – Navigation, services & formulaires réactifs

  • Mettre en place le routage et passer des paramètres entre vues
  • Centraliser la logique métier via les services injectables
  • Concevoir des formulaires validés en temps réel et consommer une API REST

 

Routage Angular avec RouterModule

  • Fichier routes, liens, paramètres
  • Paramètres, lazy-loading de modules

 

Services & injection de dépendances 

  • Création service CLI
  • Portée (root / module), observables RxJS

 

Formulaires réactifs

  • Création de groupe FormGroup, FormControl
  • Validation avancée : validateurs synchrones et asynchrones (regex, cross-field, async)
  • Messages d'erreur automatisés

 

Sécurité rapide API

  • Guards d'authentification
  • Stockage token
  • Bonnes pratiques appel REST (HttpClient, CORS)

 

Atelier pratique Jour 2

  • Proposer un écran « Catalogue produit »
  • Appeler une API, afficher la liste, naviguer vers « Détail »
  • Ajouter la protection avec un guard

 

Jour 3 – Performance, tests, CI/CD & déploiement continu

  • Optimiser taille et rapidité de l'application pour production
  • Automatiser les tests unitaires / end-to-end
  • Déployer automatiquement via CI/CD
  • Découvrir l'apport d'un LLM pour générer des scripts ou des tests

 

Optimisation Angular & build prod

  • Activer la compilation anticipée (AOT)
  • Supprimer / fusionner le code mort (tree-shaking)
  • Définir un budget de taille pour chaque bundle
  • Ajouter un service worker pour le mode hors-ligne (PWA)

 

Tests intégrés

  • Tests unitaires : framework (Karma + Jasmine ou Jest)
  • Tests de parcours utilisateur end-to-end : Playwright ou Cypress (scénarios simples)
  • Rapport de couverture généré automatiquement (nyc ou Karma-coverage)
  • Exercices pratiques de génération de test

 

Pipeline CI/CD avec GitHub Actions ou Gitlab CI

  • Étape 1 : lint (ESLint) → arrêter si erreurs
  • Étape 2 : exécuter tous les tests
  • Étape 3 : construire la version production
  • Étape 4 : publier les fichiers sur Netlify ou un bucket S3

 

IA & RGPD

  • Prompt engineering d'un outil LLM pour générer un spec de test, un test de composant ou un job CI
  • Analyse critique sous le prisme des risques et limites (RGPD)

 

Observabilité

  • Activer logs structurés côté navigateur
  • Mesurer le score Lighthouse et identifier les gains

 

Atelier pratique Jour 3

  • Créer un build production optimisé
  • Mesurer le score Lighthouse
  • Générer un test end-to-end simple (navigation + assertion), l'adapter puis intégrer au pipeline CI

Teaching methodology

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

Equipment and educational materials

  • 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

Evaluation and monitoring process

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.

Admissions process

Nous consulter.

Admission procedure

  • Admission sans disposition particulière

Accessibilité

Nos formations peuvent être adaptées à certaines conditions de handicap. Nous contacter pour toute information et demande spécifique.

Selected training session

  • 16/11/26 9:00 → 18/11/26 17:30 12 places remaining
  • Details:

    16/11/26 : 9:00 → 12:30
    14:00 → 17:30
    17/11/26 : 9:00 → 12:30
    14:00 → 17:30
    18/11/26 : 9:00 → 12:30
    14:00 → 17:30

Upcoming Training Sessions

  • Cette formation n'est pas programmée pour le moment.

    Contactez-nous pour planifier une session ensemble !

Catalogue de formation propulsé par Dendreo,
Plateforme dédiée pour les OF