- ACN_ATLAS
- Cours pratique
- Informatique
Formation Angular : Développer une application web

- Durée
- 3 jours
- Niveau
- Intermédiaire
- Modalités
- Présentiel / Distanciel
Description de la formation Angular
Angular est un framework Javascript/Typescript permettant de construire des interfaces Web modernes adaptées à la mobilité. Il utilise tous les standards du Web et favorise la réutilisation via son approche composant. Apprécié des entreprises pour ses bonnes performances, sa maintenabilité et sa productivité, c’est aussi le framework JavaScript de référence de Google.
Cette formation Angular couvrant tous les aspects principaux du développement avec Angular permettra à des développeurs front-end d’être opérationnel sur le framework. Après des revues des langages Javascript et TypeScript, les participants développeront pas-à-pas une petite interface web discutant avec un back-end RestFULL.

Objectifs pédagogiques
Concrètement, à l'issue de cette formation Angular, vous aurez acquis les connaissances et compétences nécessaires pour :
- 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
- Être capable de déployer une application Angular en production
Objectifs opérationnels
Savoir développer des applications web évolutives avec Angular.
Programme
Contenu du cours, module par module
11 modules
- Objectifs du framework et Points forts d’Angular, comparaison avec ReactJS, VueJS
- Bien comprendre les implications de la politique de versionning
- Les dernières versions et ce qu’elles apportent
- Voir ou revoir les bases de la syntaxe JavaScript : Variables, tableaux, fonctions
- Les améliorations d’ES6 avec les notions de classes et de modules, : Instanciation d’objet, les Arrow functions, l’interpolation de String
- TypeScript avec les Types et les annotations : Transpilation, configuration de la transpilation
- Inférence de type, interfaces, Classes, Visibilité
- Décorateurs
Atelier 1
Description : Manipulation de tableaux, boucles et fonction de call-back en JavaScript
Déclaration de classe et d’interface, instanciation d’objet
- Les prérequis d’installation, rappels npm et nodejs
- L’outil de développement Angular-CLI : ng et ses principales commandes
- Modules et composants Angular
- Configuration des règles LLM Driven Development
Atelier 2
Description : Installation nodejs, npm, TypeScript, Mise en place IDE + Claude
Installation Angular CLI
Création de projet, démarrage du serveur
Constatation du LiveReload, Debugger Chrome
- Principes généraux d'Angular, l’arbre de composants, Shadow Dom et templates
- Comment déclarer un composant, les différentes syntaxes possibles, création via ng : les fichiers générés
- Les éléments de syntaxe des templates : Interpolation, Pipes, Utilisation de composant
- Interactions entrée/sortie avec les composants : Binding et événements
- Le cycle de vie des composants et les interfaces de call-back proposés par Angular
- Comment gérer le style des composants, le sélecteur CSS :host
- Comparaison directive / composant. Créer ses propres directives
Atelier 3
Prendre en main la syntaxe de templating
Description : Création d’un composant menu et d’un composant liste
Développent Typescript des modèles
Gestion du onClick
Application de style via le sélecteur:host
- Le principe d’injection, son mécanisme dans Angular
- Annotations concernés par l’injection
- Les injecteurs hiérarchiques, Choisir son injecteur dans les composants
- Écrire sa classe service, cycle de vie et cas d’usage
Atelier 4
Description : Création de deux composants service
Mock d’un appel HTTP
Service stateful encapsulant les données partagées
- Programmation réactive : OK, on vous rappellera
- Le standard ReactiveX, son implémentation avec RxJS
- Le type Observable et la méthode subscribe()
- Les principaux opérateurs disponibles, leurs importations
- Les cas d’usage de le programmation réactive dans les application front-end
- Exemple incontournable : Le service HTTP fourni par Angular
- Les bonnes pratiques pour interagir avec le back-end : Mapping Objet, Intercepteurs, Gestion du CORS
Atelier 5
Description : Appel d'une API Rest offrant des fonctionnalités CRUD dans le composant service
- Comment gérer la navigation avec Angular ? Déclarer ses routes
- Gérer les redirections, récupération les paramètres de navigation
- Routage hiérarchique : comment s’organiser, les bonnes pratiques
- Guards et resolver : Comment protéger l’accès à une route
- S’abonner aux évènements de routage
Atelier 6
Description : Création d’un composant détail
Gestion de la navigation liste→detail
Protection de routes
- Template-driven ou Model-driven ?
- La directive ngModel
- Les types FormGroup et FormControl. Comment gérer la réutilisation ?
- Le support pour la validation de données, écrire ses propres validateurs, validation dynamique
- Gestion des libellés d’erreurs
Atelier 7
Description : Modification du composant détail
Définition du formulaire et de ses validateurs
Gestion des erreurs et de la soumission
- Support pour la localisation d’Angular, Comment la locale est déterminée ?
- Développer une application multi-lingue : Processus et outillage
- Syntaxe du templating
Atelier 8
Description : Utiliser les fichiers de libellés (Français/Anglais) fournis
- Le moteur de tests Karma et le framework Jasmine proposés
- Écrire un test de composants, de service, isolation du code à tester
- Les tests End to End avec Cypress
- Exécuter les tests
Atelier 9
Description : Écriture des tests unitaires pour tous les composants précédents
- Profiling d’application, identifier les goulots d’étranglement
- Polyfill et chargement différenciée en fonction des navigateurs
- Gérer les différents environnement (dev et prod)
- Assembler pour la production,
- Comment déployer, Configuration du serveur et gestion du reload
Atelier 10
Description : Assemblage pour la production
Configuration nodeJs
Déploiement
Travaux pratiques
Un projet fil rouge sert de base aux ateliers.
Programme mis à jour le 10/12/2025
Public concerné
Ce cours s’adresse aux développeurs (principalement front-end) souhaitant prendre en main le framework Angular pour créer des interfaces web modernes, performantes et faciles à maintenir. Les développeurs concernés ont déjà eu l’occasion de travailler sur un projet JavaScript ou TypeScript et possèdent a minima les bases de la programmation orientée objet.
Les architectes et chefs de projet trouveront également un intérêt à suivre ce cours, tant pour dimensionner les spécificités techniques propres à Angular que pour identifier les modes d’interactions entre applications front-end et back-end.

Prérequis
Les participants à cette formation possèdent des connaissances pratiques sur les technologies du web (HTML, CSS, JavaScript...) ainsi que sur les outils actuels de développement front-end. Ils maîtrisent les concepts fondamentaux de la programmation orientée objet (classe, objet, méthodes) et ont déjà participé à un ou plusieurs projets de développement web. Ces expériences préalables permettront d’aborder plus rapidement les spécificités et les atouts du framework Angular dans le cadre d’un développement.
J’évalue mes connaissances pour vérifier que je dispose des prérequis nécessaires pour profiter pleinement de cette formation en faisant le test de prérequis.
Faire le testFinancement
Cette formation peut être prise en charge par votre entreprise, seule ou avec l’appui de son opérateur de compétences. Nous fournissons le devis et les pièces attendues par l’OPCO.
4,7/5
128 avis
« Mon avis sur le contenu du stage : "novice sur la stack front, mais dév Java expert, je n'ai pas été déstabilisé par la conception d'Angular, mais ai parfois été débordé par la quantité d'informations nouvelles et parfois complexes. Dans mon cas, ce n'est pas anormal, je m'attendais à être submergé, tout s'est bien passé" Mon avis sur le formateur : "Matthieu a un très bon bagage technique sur Angular et de manière générale. Il est toujours à l'écoute des participants et disponible pour des questions, et n'hésite pas à emprunter des solutions de code parfois hypothétiques, quitte à se mettre en difficulté et à éprouver ses capacités, qui sont excellentes puisqu'il retombe sur ses pattes, en toute honnêteté et transparence sur les éventuelles difficultés qu'il pourrait rencontrer, ce qui en fait un très bon formateur." Ce que j'ai le moins apprécié : "le serveur guacamole, fourni par PLB pour chaque participant, est difficilement exploitable, en cause l'émulation du terminal qui rend pénible l'accès à certaines touches, et impossibles d'autres touches (il faut alors taper le code dans un éditeur en local, puis le copier/coller sur guacamole, ce qui est très pénible). de plus ces serveurs se sont trouvés indisponibles pendant la formation du fait de l'expiration du certificat. Heureusement, entre-temps, j'avais eu les droits d'admin sur mon poste local et j'ai pu installer les composants qui m'ont permis de poursuivre sereinement la formation, sur mon poste, dans de très bonnes conditions." »
PG « Mon avis sur le contenu du stage : "Formateur excellent, son support était parfait et son tp aussi." Mon avis sur le formateur : "Parfait. Le formateur est l'un de mes formateurs préférés, voir mon préféré. Ses TP sont parfaitement pensés pour que l'on applique ce qu'on vient d'apprendre au fur et à mesure que l'on voit le cours, mais en reliant chaque partie du cours. De cette manière il nous fait apprendre les choses en les mettant en contexte (ce qui est loin d'être le cas de beaucoup de formateurs). Il est également très disponible, il s'adapte à notre rythme etc. Rien à redire, il est parfait." Ce que j'ai le plus apprécié : "Le formateur et son tp." »
GA « Mon avis sur le contenu du stage : "Travaux très complet qui permet de bien solidier les bases sur Angular." Mon avis sur le formateur : "Intervenant compétent et très agréable." Mon avis sur la salle de formation : "Formation réalisée à distance et j'ai été très agréablement surpris de la qualité sonore et vidéo" Ce que j'ai le plus apprécié : "Les moyens pour réaliser la formation à distance dans de bonnes conditions" Ce que j'ai le moins apprécié : "salle de formation proche de la machine à café donc un peu bruyant de temps en temps" »
CR
Les avis figurant ci-dessus sont issus des fiches d’évaluation que remplissent les participants à la fin de la formation. Ils sont ensuite publiés automatiquement si les personnes ont explicitement accepté que nous les diffusions.
Formations liées
- AngularJS V1 : maîtriser le framework JavaScript de GoogleRéf. IAJS3 joursIntermédiaire
- Angular AvancéRéf. AGAV3 joursIntermédiaireProchaine session : 12 oct.2 090 €
- Applications FullJavascript avec Angular, NodeJS, et ExpressJSRéf. IEAN4 joursIntermédiaire
- Astro JS : Développez des sites web modernes, rapides et ultra-optimisésRéf. ASTR3 joursIntermédiaireProchaine session : 23 nov.2 090 €