Accueil›Programmes›Angular moderne : signals, composants et formulaires
Développement web front-end

Angular moderne : signals, composants et formulaires

Développer avec les versions récentes d’Angular : signals, composants autonomes, services, formulaires et tests.

Demander ce programme
Durée
21 h · 3 jours
Niveau
Intermédiaire
Format
Présentiel · Distanciel · Mixte
Effectif max.
12 participants

Présentation

Ce programme présente la façon actuelle de développer avec Angular : architecture d’un projet, signals pour la réactivité, composants autonomes, services et requêtes HTTP, formulaires réactifs, routage et tests. Il montre aussi comment les assistants d’IA peuvent accélérer le travail sans dégrader la qualité du code.

À qui s’adresse ce programme

  • Développeurs web front-end
  • Développeurs Java ou .NET qui découvrent Angular
  • Équipes qui modernisent une application Angular existante

Prérequis

  • Bonne maîtrise de HTML, CSS et JavaScript
  • Notions de TypeScript appréciées

Objectifs pédagogiques

  • Créer un projet Angular et comprendre son architecture
  • Utiliser les signals pour gérer la réactivité
  • Écrire des composants autonomes et gérer leur communication
  • Créer des services et appeler un backend
  • Construire des formulaires réactifs
  • Mettre en place le routage
  • Tester l’application et s’aider d’outils d’IA

Programme détaillé

6 modules · 21 h · 3 jours

Jour 1
Architecture et premier projet3,5 h
50 % théorie · 50 % pratique
  • Outil en ligne de commande et structure du projet
  • Composants, templates et liaison de données
  • Fonctionnement sans Zone.js
  • Configuration et build
  • Bonnes pratiques de nommage
Signals et réactivité3,5 h🛠 1 atelier
30 % théorie · 70 % pratique
  • Principe des signals
  • signal, computed et effect
  • Entrées et sorties basées sur les signals
  • Comparaison avec les approches précédentes
  • Pièges courants
🛠 Ateliers pratiques
Compteurs et listes réactives1,5 h

Construire une petite application entièrement réactive avec les signals.

✅ Livrable : Une application réactive
Jour 2
Composants autonomes et templates3,5 h🛠 1 atelier
30 % théorie · 70 % pratique
  • Composants autonomes et imports
  • Nouvelle syntaxe de contrôle de flux
  • Communication parent-enfant
  • Projection de contenu
  • Styles et encapsulation
🛠 Ateliers pratiques
Bibliothèque de composants1,5 h

Créer plusieurs composants réutilisables.

✅ Livrable : Un lot de composants documentés
Services, HTTP et accès au backend3,5 h🛠 1 atelier
30 % théorie · 70 % pratique
  • Injection de dépendances
  • Créer et utiliser des services
  • Requêtes HTTP et intercepteurs
  • Gestion des erreurs et du chargement
  • Typer les réponses de l’API
🛠 Ateliers pratiques
Client d’API1,5 h

Brancher l’application sur une API de démonstration.

✅ Livrable : Une application alimentée par une API
Jour 3
Formulaires3,5 h🛠 1 atelier
30 % théorie · 70 % pratique
  • Formulaires réactifs : groupes, contrôles, validateurs
  • Validateurs personnalisés et messages
  • Introduction aux formulaires basés sur les signals
  • Formulaires dynamiques
  • Accessibilité des formulaires
🛠 Ateliers pratiques
Formulaire d’inscription1,5 h

Créer un formulaire complet avec validations.

✅ Livrable : Un formulaire validé et accessible
Routage, tests et développement assisté par IA3,5 h🛠 1 atelier
30 % théorie · 70 % pratique
  • Routes, paramètres et chargement différé
  • Gardes et résolveurs
  • Tests unitaires avec Vitest
  • Outils d’IA pour Angular : cadrage et limites
  • Check-list avant mise en production
🛠 Ateliers pratiques
Application finale2 h

Finaliser l’application avec routes, tests et revue.

✅ Livrable : Une application testée

Outils et technologies

AngularNode.jsTypeScriptVisual Studio Code

Méthodes pédagogiques

  • Alternance d’exposés courts et de travaux pratiques
  • Démonstrations en direct par le formateur
  • Projet fil rouge construit au fil des modules
  • Corrections collectives et échanges sur les bonnes pratiques

Évaluation

  • Exercices pratiques corrigés à chaque module
  • Mini-projet réalisé en fin de formation
  • Quiz de validation des acquis

Matériel requis

  • Un ordinateur avec une connexion internet
  • Un éditeur de code et Node.js installés

Ressources fournies

  • Support de cours et dépôt d’exercices corrigés

Débouchés

  • Une application Angular complète
  • Une compréhension claire des évolutions récentes du framework
  • Les bonnes pratiques de structure et de tests
Demander ce programme← Tous les programmes