Formation Angular Front-End

Leçon 1 • Modules Angular et démarrage de l'application

Explique les NgModules, le AppModule racine et comment Angular démarre l'application. Fournit le contexte structurel nécessaire avant de construire des composants.

Leçon 2 • Fondamentaux TypeScript pour Angular

Introduit les types, interfaces et décorateurs TypeScript nécessaires pour écrire du code Angular en toute confiance. Fait le pont entre les connaissances JavaScript et l'écosystème typé d'Angular.

Leçon 3 • Introduction au framework Angular

Couvre le rôle d'Angular dans le développement front-end moderne et son architecture inspirée du MVC. Établit la base conceptuelle pour tous les sujets ultérieurs du framework.

Leçon 4 • Configuration de l'environnement de développement

Installe et configure Node.js, npm et l'Angular CLI. Garantit que chaque étudiant dispose d'un espace de travail local cohérent et reproductible.

Leçon 1 • Directives structurelles intégrées

Applique *ngIf, *ngFor et *ngSwitch pour contrôler dynamiquement la structure du DOM. Démontre comment les directives étendent l'expressivité des templates.

Leçon 2 • Liaison de propriété et d'événement

Enseigne le flux de données unidirectionnel via la liaison de propriété et la gestion d'événements utilisateur via la liaison d'événement. Relie la logique du composant aux éléments du DOM et aux interactions utilisateur.

Leçon 3 • Syntaxe des templates et expressions

Couvre le langage d'expression de template d'Angular, la navigation sécurisée et les variables de référence de template. Permet le rendu de contenu dynamique dans les vues des composants.

Leçon 4 • Hooks du cycle de vie des composants

Explore la séquence complète des hooks de cycle de vie, de ngOnInit à ngOnDestroy. Enseigne quand et pourquoi utiliser chaque hook pour l'initialisation et le nettoyage.

Leçon 1 • Requêtes ViewChild et ContentChild

Accède aux instances de composants enfants et au contenu projeté de manière programmatique via des requêtes. Permet une coordination avancée des composants au-delà de la liaison de template.

Leçon 2 • Communication parent-enfant avec @Input

Utilise @Input pour passer des données vers le bas de l'arbre de composants et valide l'entrée avec des setters. Établit le modèle principal de flux de données descendant dans Angular.

Leçon 3 • Construction de directives structurelles personnalisées

Implémente des directives structurelles en utilisant TemplateRef et ViewContainerRef pour manipuler le DOM. Étend la capacité des étudiants à créer une logique de mise en page réutilisable.

Leçon 4 • Construction de directives d'attribut personnalisées

Crée des directives qui modifient l'apparence ou le comportement de l'élément hôte sans changer la structure du DOM. Renforce le modèle de directive introduit au chapitre 2.

Leçon 1 • Création et fourniture de services Angular

Génère des services avec la CLI et les enregistre au niveau du module, du composant ou de la racine. Établit la couche de service comme le lieu de la logique partagée.

Leçon 2 • Client HTTP et intégration d'API REST

Configure HttpClientModule et effectue des requêtes GET, POST, PUT et DELETE. Relie la couche de service à des sources de données back-end réelles.

Leçon 3 • Gestion des erreurs et intercepteurs HTTP

Implémente la gestion globale des erreurs avec catchError et la transformation des requêtes/réponses avec des intercepteurs. Produit des modèles de communication HTTP prêts pour la production.

Leçon 4 • Plongée approfondie dans l'injection de dépendances

Explore la hiérarchie de la DI, les jetons d'injection et les types de fournisseurs. Permet un contrôle fin sur la façon dont les dépendances sont résolues dans l'application.

Leçon 1 • Gardes de route et contrôle d'accès

Implémente les gardes CanActivate, CanDeactivate et CanLoad pour protéger les routes. Intègre l'authentification et l'autorisation dans la couche de navigation.

Leçon 2 • Chargement différé et résolveurs de route

Divise l'application en modules de fonctionnalités chargés à la demande et pré-récupère les données avec des résolveurs. Améliore les performances de chargement initial et l'expérience utilisateur.

Leçon 3 • Routes imbriquées et emplacements nommés

Structure les routes enfants sous les routes parentes et utilise des emplacements nommés pour les vues auxiliaires. Prend en charge les exigences de mise en page complexes dans les grandes applications.

Leçon 4 • Configuration du routeur et navigation de base

Configure le RouterModule avec des définitions de route et ajoute router-outlet et routerLink. Établit la base de toutes les fonctionnalités de navigation.

Leçon 1 • Formulaires dynamiques avec FormArray

Utilise FormArray pour ajouter et supprimer des contrôles de formulaire à l'exécution pour des données de longueur variable. Gère des scénarios réels comme des lignes d'article répétées.

Leçon 2 • Validateurs et validation personnalisée

Applique des validateurs synchrones et asynchrones et crée des fonctions de validation personnalisées réutilisables. Assure l'intégrité des données avant la soumission.

Leçon 3 • Soumission de formulaire et gestion d'état

Gère la soumission, la réinitialisation et l'état dirty/touched du formulaire pour offrir une expérience utilisateur soignée. Relie les données du formulaire aux appels de service introduits au chapitre 4.

Leçon 4 • Formulaires pilotés par template

Utilise ngForm, ngModel et les validateurs intégrés pour construire des formulaires de manière déclarative dans le template. Introduit les concepts de formulaire avec un minimum de TypeScript.

Leçon 1 • NgRx Entity et DevTools

Simplifie la gestion des collections avec NgRx Entity et inspecte l'état avec Redux DevTools. Accélère le développement et le débogage des fonctionnalités lourdes en magasin.

Leçon 2 • Introduction au magasin NgRx

Installe NgRx et définit les actions, les réducteurs et le magasin pour une tranche de fonctionnalité. Établit le modèle Redux au sein de l'écosystème Angular.

Leçon 3 • État basé sur les services avec BehaviorSubject

Stocke et partage l'état entre les composants en utilisant BehaviorSubject dans un service. Fournit une solution d'état légère avant d'introduire NgRx.

Leçon 4 • Effets NgRx pour les effets secondaires

Gère les opérations asynchrones comme les appels HTTP en dehors des réducteurs en utilisant les effets NgRx. Maintient les réducteurs purs et centralise la logique des effets secondaires.

Leçon 1 • Stratégies de déploiement et intégration CI/CD

Déploie les builds Angular sur un hébergement statique et intègre des pipelines automatisés pour la livraison continue. Boucle le cycle de vie du développement du code à la production.

Leçon 2 • Tests unitaires des composants et services

Écrit des tests unitaires avec Jasmine et TestBed pour les composants, services et pipes. Valide les unités individuelles de manière isolée avant l'intégration.

Leçon 3 • Optimisation du bundle et configuration de build

Configure les builds de production, l'élimination du code mort et le chargement différentiel pour une taille de bundle optimale. Prépare l'application aux contraintes de déploiement réelles.

Leçon 4 • Tests de bout en bout avec Cypress

Automatise les tests de flux utilisateur avec Cypress pour valider le comportement complet de l'application. Complète les tests unitaires avec des scénarios réalistes basés sur le navigateur.