Autre

Angular : Apprenez à utiliser efficacement Angular pour créer des applications web modernes

5 jour(s) • 35h

Description

Cette formation permet d’apprendre à concevoir une application web moderne avec Angular en suivant une progression structurée, concrète et directement exploitable en contexte professionnel. Les participants prennent en main l’environnement Angular, développent une interface dynamique à base de composants, organisent la logique métier avec des services, mettent en place la navigation, les formulaires, la communication avec une API REST et découvrent les bases du test. La pédagogie repose sur un fil rouge applicatif développé tout au long des 5 jours afin de favoriser une montée en compétence opérationnelle.

Objectifs pédagogiques

Comprendre l’architecture générale d’une application Angular moderne
Utiliser TypeScript dans un projet Angular
Créer et structurer une application avec Angular CLI
Développer des composants réutilisables
Exploiter le data binding, les directives et les pipes
Organiser la communication entre composants
Mettre en place des services et l’injection de dépendances
Créer des formulaires réactifs avec validation
Configurer la navigation avec le routeur Angular
Consommer une API REST avec HttpClient
Utiliser les bases de RxJS dans un contexte Angular
Appliquer de premières bonnes pratiques de test, de qualité et d’organisation du code

Public concerné

Développeurs web, développeurs front-end, intégrateurs avancés, concepteurs d’applications web ou toute personne disposant de bases solides en développement web et souhaitant monter en compétence sur Angular.

Prérequis

Bonne maîtrise de HTML, CSS et JavaScript

Une première familiarité avec TypeScript constitue un plus

Déroulé du programme

Jour 1 – Environnement Angular, architecture moderne et bases TypeScript

Présenter Angular et son positionnement dans l’écosystème des frameworks front-end
Comprendre les différences entre Angular moderne et AngularJS
Identifier les principes d’architecture d’une application Angular
Revoir les fondamentaux utiles de TypeScript : types, interfaces, classes, modules, decorator
Comprendre le rôle d’Angular CLI
Installer et configurer l’environnement de développement
Créer un premier projet Angular
Introduire une approche moderne fondée sur les composants standalone
Lire la structure générale d’un projet et organiser les premiers dossiers
TP 1 : Installation de l’environnement de développement (Node.js, Angular CLI, IDE, extensions utiles)
TP 2 : Création d’un premier projet Angular en mode standalone
TP 3 : Analyse de l’arborescence du projet, identification des fichiers clés et première personnalisation de l’application
TP 4 : Mise en place du socle du fil rouge applicatif

Jour 2 – Composants, templates et dynamisation de l’interface

Comprendre le rôle des composants dans Angular
Identifier la structure d’un composant et son cycle de vie
Exploiter les templates Angular
Mettre en œuvre l’interpolation
Utiliser le property binding et l’event binding
Comprendre le two-way binding selon les cas d’usage
Utiliser les directives structurelles et d’attribut
Exploiter le nouveau control flow Angular (@if, @for)
Utiliser les pipes pour transformer les données affichées
Organiser une interface réactive et lisible
TP 5 : Création de composants réutilisables pour le fil rouge
TP 6 : Mise en place d’une interface dynamique pilotée par des données
TP 7 : Construction de listes dynamiques avec affichage conditionnel
TP 8 : Utilisation de pipes pour le formatage et l’enrichissement visuel des données

Jour 3 – Communication entre composants, services, injection de dépendances et bases RxJS

Organiser une application Angular par composants, services et fonctionnalités
Comprendre la communication entre composants parent et enfant
Utiliser les entrées et sorties de composants
Introduire les services comme support de logique métier et de partage de données
Comprendre les mécanismes de l’injection de dépendances
Distinguer responsabilités des composants et responsabilités des services
Introduire RxJS dans Angular
Comprendre les notions d’Observable, de souscription et d’opérateurs simples
Préparer la mise en œuvre de flux de données réactifs sans complexifier excessivement l’architecture
TP 9 : Mise en place de la communication entre composants via entrées et sorties
TP 10 : Création de services partagés pour centraliser les données de l’application
TP 11 : Utilisation d’observables simples dans un service Angular
TP 12 : Mise en œuvre d’un premier scénario réactif lié au fil rouge applicatif

Jour 4 – Formulaires réactifs, API REST et routage

Comprendre les principes des formulaires dans Angular
Construire un formulaire réactif
Utiliser FormBuilder
Définir des validations et gérer les messages d’erreur
Préparer les données pour un traitement métier ou un envoi backend
Comprendre le rôle de HttpClient
Réaliser des requêtes HTTP vers une API REST
Gérer les retours asynchrones avec RxJS dans un contexte concret
Configurer le routeur Angular
Définir des routes simples et paramétrées
Organiser la navigation entre les vues de l’application
TP 13 : Création d’un formulaire de saisie métier avec validation
TP 14 : Gestion des erreurs de saisie et amélioration de l’expérience utilisateur
TP 15 : Connexion de l’application à une API distante ou simulée
TP 16 : Mise en place du routage entre les pages liste, détail et formulaire
TP 17 : Intégration complète du formulaire, de l’API et de la navigation dans le fil rouge

Jour 5 – Tests, qualité de code et finalisation de l’application

Comprendre les objectifs des tests dans un projet Angular
Identifier les éléments à tester en priorité
Introduire les tests unitaires de composants et de services
Comprendre la logique des tests fonctionnels de bout en bout
Découvrir l’usage de Cypress dans une démarche qualité front-end
Appliquer les bonnes pratiques de structuration, de nommage et de lisibilité du code
Consolider les principes de maintenance et d’évolutivité d’un projet Angular
Réaliser une revue finale d’architecture et de qualité sur l’application produite
TP 18 : Écriture de tests unitaires simples sur un composant
TP 19 : Écriture d’un test sur un service métier
TP 20 : Mise en place d’un premier scénario de test fonctionnel avec Cypress
TP final : Finalisation de l’application fil rouge, revue de code et amélioration de la structure globale du projet