Angular - Développer des applications Web

Objectif : 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.

Objectif : 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.

Objectif : 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.

Objectif : 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.

Objectif : 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.

Objectif : 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.