Formation
2 jours (14 heures)
900.00 € HT
540.00 € HT
Tarif lancement - jusqu'au 30/06/2026
Angular & TypeScript : développement web moderne
Formation pratique de 2 jours pour maîtriser TypeScript et Angular. Chaque demi-journée alterne TD guidé et TP corrigé sur des cas concrets. Les participants repartent avec un projet fil rouge fonctionnel.
Dernière mise à jour le 03/04/2026
Public visé
Cette formation s'adresse aux profils suivants :
- Développeurs web ayant suivi la formation JavaScript fondamentaux ou la formation JavaScript avancé, ou ont des bases en JavaScript souhaitant adopter Angular dans leurs projets professionnels
- Toute personne amenée à intégrer ou maintenir une application Angular en équipe
Objectifs pédagogiques
- Comprendre le système de types TypeScript et l'appliquer à des modèles de données réels
- Maîtriser l'architecture Angular : modules, composants, services et injection de dépendances
- Implémenter le data binding, les directives structurelles et les pipes dans des templates Angular
- Concevoir et utiliser des services partagés avec le système d'injection de dépendances d'Angular
- Mettre en place une navigation multi-vues avec Angular Router
- Consommer une API REST depuis Angular avec HttpClient et les bases de RxJS
- Livrer une application Angular structurée, lisible et maintenable
Prérequis
Bonne maîtrise de JavaScript ES6+ : fonctions fléchées, destructuring, modules, promesses, async/await. Notions de HTML/CSS. Savoir utiliser le terminal et VS Code. Aucune connaissance préalable d'Angular ou TypeScript requise.
Programme détaillé
Jour 1 (7h) – TypeScript et fondamentaux Angular
Module 1 – TypeScript : le socle d'Angular (3h30)
Pourquoi TypeScript ? (30min)
- Le problème que TypeScript résout : erreurs silencieuses, refactoring difficile
- TypeScript vs JavaScript : compilation, typage statique, compatibilité ES6+
- Intégration native dans Angular : pourquoi Angular l'a adopté dès le départ
Types, interfaces et union types (1h)
- Types primitifs : string, number, boolean, any, unknown, never
- Typer des objets avec des interfaces et des types
- Union types, types littéraux et type narrowing
- Tableaux, tuples et types optionnels
- TD guidé : modéliser un catalogue de formations en TypeScript
Generics et decorators (1h)
- Generics : fonctions et classes paramétrées, contraintes de type
- Decorators : principe, syntaxe et rôle dans Angular (@Component, @Injectable)
- TD guidé : créer un service générique de collection typée
TP corrigé – TypeScript (1h)
- Refactoring d'un module JavaScript existant vers TypeScript typé
- Correction collective et revue des erreurs fréquentes
Module 2 – Fondamentaux Angular (3h30)
Architecture Angular (1h)
- NgModules, composants, services : rôles et responsabilités
- Créer un projet Angular avec Angular CLI
- Structure d'un projet : src/app, modules, composants, assets
- Cycle de vie d'un composant : ngOnInit, ngOnDestroy
Templates et data binding (1h30)
- Interpolation : {{ expression }}
- Property binding : [propriété]="valeur"
- Event binding : (événement)="handler()"
- Two-way binding avec [(ngModel)]
- Directives structurelles : *ngIf, *ngFor, *ngSwitch
- Pipes natifs : date, currency, uppercase, async
- TD guidé : composant de fiche formation avec binding complet
TP corrigé – Premier composant Angular (1h)
- Créer un composant de liste dynamique avec *ngFor et *ngIf
- Communication parent/enfant via @Input et @Output
- Correction collective
Jour 2 (7h) – Services, Routing et HTTP
Module 3 – Services et injection de dépendances (3h30)
Services Angular (1h30)
- Qu'est-ce qu'un service ? Séparation des responsabilités
- Créer un service avec @Injectable
- Singleton pattern et hiérarchie des injecteurs
- Injecter un service dans un composant
- TD guidé : service catalogue de formations partagé entre composants
Angular Router (2h)
- Configurer le routing : RouterModule, Routes, RouterOutlet
- Navigation déclarative avec routerLink et routerLinkActive
- Paramètres d'URL avec ActivatedRoute
- Navigation programmatique avec Router.navigate()
- Guards : protéger une route avec CanActivate
- TD guidé : application multi-pages avec navigation fonctionnelle
- TP corrigé : routing complet avec paramètres et guard d'accès
Module 4 – RxJS et appels HTTP (3h30)
RxJS : les bases pratiques (1h30)
- Observable vs Promise : différences et cas d'usage dans Angular
- Opérateurs essentiels : map, filter, switchMap, catchError, tap
- Pipe et chaînage d'opérateurs
- Le pipe async dans les templates : éviter les fuites mémoire
- TD guidé : transformer et filtrer un flux de données
HttpClient : consommer une API REST (2h)
- Configurer HttpClientModule et injecter HttpClient
- GET, POST, PUT, DELETE avec typage générique
- Gestion des erreurs HTTP avec catchError et throwError
- Intercepteurs HTTP : headers, tokens, gestion globale des erreurs
- TP fil rouge : application Angular complète consommant une API REST publique
- Fonctionnalités : liste paginée, vue détail, formulaire de création, navigation multi-pages
- Correction collective et bilan de formation
Compétences visées
- Typer des données avec TypeScript : types primitifs, union types, interfaces, generics et decorators
- Créer, composer et organiser des composants Angular dans une arborescence cohérente
- Gérer la communication parent/enfant via @Input et @Output
- Utiliser les directives structurelles (*ngIf, *ngFor) et les directives attributs
- Concevoir des services Angular injectables et les partager entre composants
- Configurer le routing Angular : routes, paramètres d'URL, navigation programmatique
- Effectuer des appels HTTP asynchrones avec RxJS : Observable, pipe, map, catchError
Modalités et méthodes pédagogiques
Formation délivrée en présentiel ou distanciel (visioconférence). Le formateur alterne entre méthode démonstrative (live coding commenté et progressif), méthode interrogative (analyse et critique de code existant) et méthode active (TD guidés et TP corrigés). Chaque demi-journée se conclut par un exercice pratique corrigé en collectif. L'accent est mis sur la compréhension des mécanismes internes d'Angular plutôt que sur la mémorisation de l'API.
Modalités d'évaluation
- En cours de formation : TD guidés et TP corrigés à chaque module avec feedback formateur immédiat
- En fin de formation : réalisation d'une application Angular complète avec routing, services et appels HTTP
- Questionnaire d'auto-évaluation des acquis en fin de parcours
Critères d'évaluation
- Typage correct d'un modèle de données avec TypeScript : interfaces, generics, types optionnels
- Création autonome d'un composant Angular avec data binding et directives fonctionnels
- Mise en place du routing entre au moins deux vues avec paramètres d'URL
- Consommation d'une API REST avec gestion explicite des états de chargement et d'erreur
- Qualité et lisibilité du code produit lors du TP fil rouge : nommage, organisation, absence de logique dupliquée
Modalités de validation
Attestation de fin de formation délivrée à l'issue du parcours, conditionnée à une assiduité d'au moins 80 % et à la réalisation du TP fil rouge. L'attestation précise les objectifs atteints et les compétences acquises.
Moyens pédagogiques et techniques
- Support de cours numérique mis à disposition des apprenants
- Dépôt GitHub de démonstration avec squelettes de TD/TP et corrections par module
- Environnement de développement : VS Code + Node.js + Angular CLI + Angular DevTools
- Pour le distanciel : visioconférence (Zoom ou équivalent), partage d'écran, chat en direct
- Accès à la plateforme pédagogique LaPolaris (supports, ressources, émargement)
Accessibilité aux personnes en situation de handicap
- Formation accessible aux personnes en situation de handicap sous réserve d'étude préalable des besoins.
- Contacter le référent handicap de LaPolaris avant inscription : contact@lapolaris.fr
- Adaptations possibles : support en grands caractères, pauses supplémentaires, aménagement du poste de travail.
Suivi et accompagnement
- Évaluation à chaud en fin de formation (questionnaire de satisfaction)
- Évaluation à froid à 3 mois (questionnaire d'impact sur la pratique professionnelle)
- Accès au formateur par email pendant 30 jours après la formation
- Attestation de fin de formation remise à chaque participant
Conditions d'accès
Modalités d'inscription :
- Inscription possible jusqu'à 5 jours ouvrés avant le début de la formation
- Confirmation d'inscription envoyée par email avec convention de formation
- Convocation adressée 72h avant le démarrage avec lieu, horaires et prérequis techniques
Délais d'accès
Délai d'accès : 5 jours ouvrés minimum entre la demande et le démarrage de la session.
Pour les formations en intra-entreprise, délai adaptable selon disponibilités.
Pour les formations en intra-entreprise, délai adaptable selon disponibilités.
Autres formations en Développement Frontend
JavaScript avancé : async, POO et patterns modernes
Approfondir JavaScript avec la programmation orientée objet, l'asynchrone avancé, les design patterns et les bonnes pratiques professionnelles.
3 jours (21 heures)
594.00 € HT
React : développer des interfaces modernes
Créer des interfaces web dynamiques avec React. Composants, hooks, gestion d'état, appels API : devenez opérationnel sur la bibliothèque la plus demandée du marché.
4 jours (28 heures)
720.00 € HT
Next.js : construire des applications web modernes
Aller au-delà de React avec Next.js : rendu serveur, App Router, optimisation des performances, SEO et déploiement production.
5 jours (35 heures)
834.00 € HT