Formation Angular Front-End

Leçon 1 • Modules Angular et Bootstrap d'Application

Explique les NgModules, le AppModule racine et comment Angular bootstrap l'application. Fournit le contexte structurel nécessaire avant la construction des composants.

Leçon 2 • TypeScript Essentiel pour Angular

Présente les types, interfaces et décorateurs TypeScript nécessaires pour écrire du code Angular avec confiance. Fait le pont entre la connaissance 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 apprenant 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 des événements utilisateur via la liaison d'événement. Relie la logique du composant aux éléments DOM et aux interactions utilisateur.

Leçon 3 • Syntaxe de Template 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 de 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é par programme 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 des composants et valide les entrées avec des setters. Établit le modèle de flux de données descendant principal 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 apprenants à 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 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 service aux 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 DI, les jetons d'injection et les types de fournisseurs. Permet un contrôle précis sur la façon dont les dépendances sont résolues dans toute 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é-importe les données avec des résolveurs. Améliore la performance de chargement initial et l'expérience utilisateur.

Leçon 3 • Routes Imbriquées et Zones Nommées

Structure les routes enfants sous les routes parentes et utilise des zones nommées 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 les lignes d'article répétitives.

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. Garantit l'intégrité des données avant la soumission.

Leçon 3 • Soumission de Formulaire et Gestion d'État

Gère la soumission du formulaire, la réinitialisation et l'état dirty/touched pour offrir une UX 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 surcharge 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 dans l'écosystème Angular.

Leçon 3 • État Basé sur un Service 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 vers 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'élagage des arbres et le chargement différentiel pour une taille de bundle optimale. Prépare l'application pour les 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 un navigateur.