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.
