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

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

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

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