Dans la fenêtre d’impression, choisissez « Enregistrer en PDF » comme destination.
Réf. ANG-WEB
Angular - Développer des applications Web
Langages & Développement Logiciel
Durée
21 à 28 heures (3 à 4 jours) selon le format
Modalités
Présentiel, Classe à distance
Reconnaissance
Formation non certifiante (attestation de fin de formation)
Format de vente
Inter-entreprise ou Intra-entreprise
Délai d’accès
Inter : jusqu’à 5 jours ouvrés avant la session ; intra : en moyenne 15 jours ouvrés après l’acceptation du devis
Tarif intra
Sur devis
Pourquoi suivre cette formation
Les applications web modernes demandent une architecture front-end dynamique et réactive. Cette formation vous apprend à maîtriser Angular, à concevoir des composants réutilisables, à gérer l'état de l'application et à utiliser des API REST.
À l’issue de cette formation, les participants seront capables de
Organiser une application Angular en modules, durable et facile à faire évoluer
Gérer efficacement les flux de données asynchrones et l'injection de dépendances
Gérer une navigation complexe et le découpage des routes
Sécuriser les échanges et fiabiliser la consommation d'API REST externes
Améliorer les performances et la maintenabilité du code
Maîtriser le développement JavaScript (ES6+), posséder des notions de base sur TypeScript et être à l'aise avec l'usage d'une console de commande (CLI).
Prérequis techniques à distance
La classe virtuelle se tient sur Microsoft Teams : AMBIA fournit à chaque participant un compte pour la durée de la formation. En intra-entreprise, elle peut aussi se tenir sur l’outil que l’entreprise utilise déjà, par exemple Zoom ou Google Meet.
Le participant se connecte depuis un ordinateur équipé d’une caméra, d’un micro, d’un accès à internet et d’un navigateur à jour, dans un lieu calme. Si la formation le demande, le formateur donne accès à un poste de travail à distance, depuis le navigateur.
Pendant la formation, l’assistance technique répond à support@ambia-skills.fr.
Objectifs pédagogiques
Identifier les composants clés de l'architecture d'une application Angular.
Expliquer le cycle de vie d'un composant et le fonctionnement du mécanisme de détection des changements.
Concevoir et structurer une interface utilisateur dynamique à partir de maquettes fonctionnelles.
Choisir la stratégie d'injection de dépendances et les opérateurs RxJS optimaux pour traiter les flux de données.
Auditer la conformité du code produit vis-à-vis des guides de style officiels du framework.
Générer, compiler et livrer un build de production optimisé et sécurisé.
Programme détaillé
Jour 1ACTION
Matin
Architecture et initialisation du projet
Comprendre le rôle de la CLI Angular, concevoir une architecture par composants autonomes (standalone) et appréhender le cycle de vie d'un composant.
Installation et configuration de l'environnement de développement Angular CLI.
Structure et rôle des principaux fichiers d'un projet (angular.json, package.json, configuration TypeScript).
Concepts fondamentaux : composants autonomes (standalone), configuration de l'application (fournisseurs), décorateurs, signaux (signals) et arborescence applicative. Les NgModules, encore présents dans le code existant, sont présentés pour en faciliter la lecture.
Cycle de vie des composants : hook d'initialisation (OnInit) et de destruction (OnDestroy).
Atelier pratique
Initialisation complète d'une application d'entreprise multi-composants à l'aide de l'outil en ligne de commande.
Cas métier
Création du squelette architectural du portail de contrôle opérationnel pour un parc de machines industrielles connectées.
Compétence acquise
Savoir configurer et initialiser un projet Angular évolutif en respectant les standards de l'art.
Livrable
Squelette de projet propre, structuré et prêt à recevoir la logique d'entreprise.
Après-midi
Liaison des données (data binding) et directives
Maîtriser le flux d'échange de données entre le modèle logique et le template graphique d'un composant.
Les différentes syntaxes de liaison : interpolation {{}}, liaison de propriété [], et liaison d'événement ().
Mise en œuvre du double-sens de données ([(ngModel)]) pour les formulaires.
Utilisation du contrôle de flux intégré au template (@if, @for avec track, @switch, @defer) et des directives d'attributs ; lecture des anciennes directives structurelles (*ngIf, *ngFor) rencontrées dans le code existant.
Transformation de données à l'affichage à l'aide des filtres (Pipes) natifs et personnalisés.
Atelier pratique
Dynamisation et mise en forme d'un ensemble de données brutes via l'utilisation de boucles et de filtres conditionnels.
Cas métier
Développement d'une interface de visualisation d'alertes en temps réel, triées et colorées selon leur niveau de gravité (Critique, Warning, Info).
Compétence acquise
Être capable d'animer et de structurer une vue HTML en fonction de modèles de données dynamiques.
Livrable
Interface d'affichage interactive, filtrable et sensible aux changements de données de la logique métier.
Jour 2ACTION
Matin
Architecture de communication (Services et Injection)
Centraliser les données de l'application et organiser la communication transversale entre composants isolés.
Création et déclaration de services Angular à l'aide du décorateur @Injectable et injection avec la fonction inject().
Compréhension du mécanisme d'injection de dépendances (Dependency Injection) et scope des instances.
Flux d'échange de données hiérarchique : entrées et sorties de composants avec les fonctions input() et output() (décorateurs @Input et @Output et EventEmitter dans le code existant).
Atelier pratique
Établissement d'un service de partage de données interconnectant plusieurs composants visuellement indépendants.
Cas métier
Conception du gestionnaire de panier de configuration technique partagé entre le catalogue de composants et le récapitulatif de commande.
Compétence acquise
Maîtriser le cycle d'injection de dépendances et le partage d'état horizontal au sein d'une SPA.
Livrable
Module de services de données centralisé permettant une communication fluide et réutilisable entre vos pages.
Après-midi
Programmation asynchrone (RxJS et requêtage HTTP)
Manipuler des flux de données asynchrones et lier l'application Angular à des services tiers à l'aide d'appels réseau.
Introduction à la programmation réactive et découverte des Observables d'RxJS.
Manipulation des flux à l'aide des opérateurs de base (map, filter, switchMap, catchError).
Consommation de ressources via le client HttpClient (configuré par provideHttpClient) pour effectuer des requêtes REST (GET, POST, PUT, DELETE).
Atelier pratique
Configuration d'un client HTTP connecté à un serveur d'essai pour récupérer et mettre à jour des bases de données distantes.
Cas métier
Connexion de l'application au serveur de reporting central de l'entreprise avec affichage dynamique de l'état de l'infrastructure réseau.
Compétence acquise
Savoir récupérer, manipuler et sécuriser les échanges asynchrones avec des API externes.
Livrable
Module asynchrone hautement réactif gérant les requêtes serveurs et la gestion robuste des exceptions de connexion.
Jour 3ACTION
Matin
Formulaires complexes et validation (Reactive Forms)
Recueillir, structurer et valider des données saisies par l'utilisateur à travers des mécanismes d'analyse dynamique de formulaires.
Différences et choix techniques entre formulaires pilotés par le template et formulaires réactifs.
Mise en œuvre de l'approche réactive : FormControl, FormGroup et instanciation simplifiée via le FormBuilder.
Gestion de la validation synchrone (champs requis, formats de saisie, regex) et personnalisation des retours visuels d'erreur.
Atelier pratique
Création d'une interface de configuration interactive intégrant un ensemble de contrôles de saisie stricts et contextuels.
Cas métier
Formulaire technique d'enregistrement de nouveaux équipements connectés nécessitant un contrôle automatique des adresses IP et des numéros de série.
Compétence acquise
Savoir développer des formulaires hautement dynamiques, conviviaux et rigoureusement encadrés sur le plan de la saisie.
Livrable
Module de saisie et de soumission de données entièrement contrôlé, réactif et visuellement didactique pour l'utilisateur.
Après-midi
Routage avancé, sécurité (Guards) et compilation finale
Gérer la navigation interne à l'application, sécuriser l'accès aux différentes rubriques et compiler le projet pour la production.
Configuration du routage (fournisseur de routes et tableau de routes) et gestion des paramètres de routes.
Mise en place de la stratégie de Lazy Loading pour accélérer le chargement initial des pages de l'application.
Protection des accès aux routes en fonction des droits utilisateurs via l'utilisation de guards fonctionnels d'activation (CanActivateFn).
Processus de build et d'optimisation des fichiers finaux via les options de compilation de la CLI.
Atelier pratique
Structuration de routes sécurisées par token, blocage d'accès aux utilisateurs non connectés et compilation finale optimisée du projet de l'atelier.
Cas métier
Finalisation du portail avec création d'une zone « Administration système » réservée aux techniciens habilités et génération des livrables statiques prêts à être hébergés.
Compétence acquise
Maîtriser l'intégralité du cycle de routage, de sécurité d'accès client et de livraison optimisée pour les serveurs Web de production.
Livrable
Application web interactive complète, sécurisée, découpée en Lazy Loading et compilée en code statique de production de taille minimale.
Jour 4 · en décaléIMPACT
Matin
Diagnostic de l'architecture des composants, des services et des abonnements RxJS
Analyser l'organisation des composants standalone, les services injectés et la gestion des abonnements RxJS de l'application réelle.
Analyse du code Angular de l'entreprise (composants, services, templates) : découpage en composants standalone réutilisables, déplacement de la logique métier vers des services, passage aux Signals et à la détection de changements OnPush, fermeture des abonnements RxJS (async pipe, takeUntilDestroyed).
Après-midi
Chargement différé des routes, Guards et intercepteurs HTTP
Mettre en œuvre le chargement différé des routes (loadComponent / loadChildren) et sécuriser les accès par Guards fonctionnels et intercepteur d'authentification (JWT).
Réduction du temps de chargement initial : chargement différé des routes (lazy loading), Guards fonctionnels (CanActivateFn), intercepteur HTTP (HttpInterceptorFn) pour le jeton JWT et analyse de la taille du bundle de production (ng build).
Les ateliers et cas métier de ce programme pourront être adaptés par le consultant-formateur selon les besoins, le niveau et les prérequis des participants, pour favoriser l’atteinte des objectifs pédagogiques.
Méthodes et moyens pédagogiques
Méthodes mobilisées
Pédagogie active et immersive basée sur des simulations de projets réels. Utilisation de démos techniques ciblées, d'exercices de peer-programming et de revues de code collectives pour valider la robustesse et la propreté du code produit.
Moyens techniques
Un poste informatique par apprenant, un environnement de développement configuré (VS Code, Node.js, Angular CLI, Git). Accès aux espaces de travail virtuels AMBIA et mise à disposition de référentiels d'API REST pour émuler les liaisons serveurs.
Moyens humains
Formation animée par un consultant-formateur expert senior, développeur Angular actif sur des projets d'envergure industrielle et habitué aux exigences de production.
Modalités d’évaluation
Évaluation diagnostique
Questionnaire d'auto-évaluation et de validation des prérequis envoyé aux participants 15 jours avant la session (JavaScript moderne, syntaxe typée).
Évaluation formative
Évaluation technique continue lors des ateliers pratiques tout au long de la formation (revues de code, validation des livrables partiels par le formateur).
Évaluation sommative
Cas technique d'intégration final évalué selon une grille de bonnes pratiques Angular, complété par un questionnaire de validation des acquis sous forme de QCM.
Suivi
Feuilles de présence signées par demi-journée, en présentiel comme à distance.
Attestation de fin de formation remise à chaque stagiaire, mentionnant les objectifs, la nature, la durée et les résultats de l’évaluation.
Certificat de réalisation adressé au client ou au financeur.
Questionnaire de satisfaction remis à l’issue de la formation.
Délai d’accès
Inter-entreprises : L’inscription est possible jusqu’à 5 jours ouvrés avant le début de la session, sous réserve des places disponibles.
Intra-entreprise : La formation débute en moyenne 15 jours ouvrés après l’acceptation du devis.
Ce délai peut être adapté selon la disponibilité des sessions, le positionnement du stagiaire et, le cas échéant, l’instruction du dossier de prise en charge par le financeur.
Accessibilité handicap
Nos parcours sont adaptables aux personnes en situation de handicap. Veuillez contacter notre référent pour étudier les aménagements nécessaires.
Référent handicap : accessibilite@ambia-skills.fr. Aucune reconnaissance de la qualité de travailleur handicapé ni aucun justificatif médical n’est exigé.
Indicateurs de résultats
Indicateurs publiés à partir de 3 avis.
Mode de calcul : www.ambia-skills.fr/notre-approche#notes
