Formation développement front-end Angular

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 • Essentiels TypeScript pour Angular

Présente 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 cadre applicatif Angular

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

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

Installe et configure Node.js, npm et l'interface en ligne de commande Angular. Assure que chaque étudiant dispose d'un espace de travail local reproductible et cohérent.

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

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

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 des composants aux éléments du DOM et aux interactions utilisateur.

Leçon 3 • Syntaxe de modèle et expressions

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

Leçon 4 • Crochets de cycle de vie des composants

Explore la séquence complète des crochets de cycle de vie, de ngOnInit à ngOnDestroy. Enseigne quand et pourquoi utiliser chaque crochet 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 modèle.

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

Utilise @Input pour passer des données dans l'arborescence des composants et valide l'entrée avec des accesseurs. É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 à l'aide de 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 l'interface en ligne de commande et les enregistre au niveau du module, du composant ou de la portée racine. Établit la couche de service comme l'emplacement 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 réelles côté serveur.

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 dans l'injection de dépendances

Explore la hiérarchie de l'injection de dépendances, 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 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écharge 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 zones nommées

Structure les routes enfants sous les routes parentes et utilise les 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 des 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. Assure 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 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 modèle

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

Leçon 1 • Entité NgRx et outils de développement

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 à fort état.

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 les services avec BehaviorSubject

Stocke et partage l'état entre les composants à l'aide de BehaviorSubject dans un service. Fournit une solution légère de gestion d'état 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 à l'aide de NgRx Effects. 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 versions Angular sur un hébergement statique et intègre des pipelines automatisés pour la livraison continue. Ferme le cycle de vie du développement, du code à la production.

Leçon 2 • Tests unitaires des composants et des services

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

Leçon 3 • Optimisation du bundle et configuration de la version

Configure les versions de production, l'élagage d'arbre 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 un navigateur.