Angular | Développer des applications web Mixte : présentiel / à distance

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, création de composants réactifs et styles responsables 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 pipeline CI / CD automatisé pour publier une application fiable et rapide.

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
• Connaitre les bonnes pratiques de développement

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

Jour 1 – Prise en main & composants fondamentaux

Objectifs :

• 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

Contenu :

• 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
  • Responsible (Flex-layout, CSS grid, media-queries)

• Atelier pratique fil rouge :
  • 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

Objectifs :

• 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

Contenu :

• 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 async (regex, cross-field, asyn)
  • Messages d'erreur automatisés
• Sécurité rapide API :
  • Guards d'authentification
  • Stockage token
  • Bonnes pratiques appel REST (HttpClient, CORS)

• Atelier pratique fil rouge :
  • 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

Objectifs :

• 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

Contenu :

• 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 fil rouge :
  • 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.

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

• Apports des connaissances communes.
• Mises en situation sur le thème de la formation et des cas concrets.
• Méthodologie d'apprentissage attractive, interactive et participative.
• Equilibre théorie / pratique : 60 % / 40 %.
• Supports de cours fournis au format papier et/ou numérique.
• Ressources documentaires en ligne et références mises à disposition par le formateur.
• Pour les formations en présentiel dans les locaux mis à disposition, les apprenants sont accueillis dans une salle de cours équipée d'un réseau Wi-Fi, d'un tableau blanc ou paperboard. Un ordinateur avec les logiciels appropriés est mis à disposition (le cas échéant).

En amont de la formation :

• Recueil des besoins des apprenants afin de disposer des informations essentielles au bon déroulé de la formation (profil, niveau, attentes particulières...).
• Auto-positionnement des apprenants afin de mesurer le niveau de départ.

Tout au long de la formation : 

• Évaluation continue des acquis avec des questions orales, des exercices, des QCM, des cas pratiques ou mises en situation...

A la fin de la formation : 

• Auto-positionnement des apprenants afin de mesurer l'acquisition des compétences.
• Evaluation par le formateur des compétences acquises par les apprenants.
• Questionnaire de satisfaction à chaud afin de recueillir la satisfaction des apprenants à l'issue de la formation.
• Questionnaire de satisfaction à froid afin d'évaluer les apports ancrés de la formation et leurs mises en application au quotidien.

• Admission sans disposition particulière