Cours de développement Angular

Leçon 1 • Génération de ton premier projet Angular

Utilise l'interface en ligne de commande Angular pour générer un projet, explorer sa structure de fichiers et lancer le serveur de développement. Familiarise-toi avec la disposition de l'espace de travail utilisée tout au long du cours.

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

Installe Node.js, npm et l'interface en ligne de commande Angular pour préparer un espace de travail local. Cela permet directement la création de projet abordée dans la section suivante.

Leçon 3 • Essentiels de TypeScript pour Angular

Présente les types, interfaces, décorateurs et modules TypeScript tels qu'utilisés dans Angular. Assure que les étudiants peuvent lire et écrire du code Angular en toute confiance à partir du chapitre deux.

Leçon 1 • Anatomie d'un composant Angular

Décompose le décorateur de composant, la classe, le modèle et les styles en leurs rôles respectifs. Établit le modèle mental pour chaque élément d'interface utilisateur construit dans ce cours.

Leçon 2 • Directives d'attribut et pipes

Applique les directives d'attribut intégrées comme ngClass et ngStyle, et transforme les données avec des pipes intégrés. Complète les capacités des modèles avant de passer aux services.

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

Couvre ngIf, ngFor et ngSwitch pour le rendu conditionnel et de listes dans les modèles. Permet l'affichage de contenu dynamique essentiel pour les interfaces utilisateur réelles.

Leçon 4 • Syntaxe des modèles et liaison de données

Enseigne l'interpolation, la liaison de propriétés, la liaison d'événements et la liaison bidirectionnelle avec ngModel. Connecte la logique des composants au DOM pour des interfaces utilisateur interactives.

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

Explore la hiérarchie de l'injecteur Angular, les jetons de fournisseur et la portée de l'injection. Permet un contrôle précis sur l'instanciation des services et leur partage entre les modules.

Leçon 2 • Création et utilisation des services

Génère des services avec l'interface en ligne de commande, encapsule la logique métier et les injecte dans les composants. Démontre le principe de responsabilité unique dans l'architecture système Angular.

Leçon 3 • Compréhension des NgModules

Explique les déclarations, importations, exportations et fournisseurs dans les métadonnées NgModule. Établit le système de modules qui organise chaque application Angular.

Leçon 1 • Gardes de route et résolveurs

Protège les routes avec les gardes CanActivate et CanDeactivate et précharge les données avec Resolve. Assure une navigation sécurisée et des données préchargées avant le rendu du composant.

Leçon 2 • Routes enfants et sorties nommées

Imbrique les routes enfants dans les modules de fonctionnalités et utilise les sorties nommées pour les vues auxiliaires. Prend en charge les dispositions complexes comme les tableaux de bord avec panneaux latéraux.

Leçon 3 • Chargement paresseux des modules de fonctionnalités

Divise l'application en modules de fonctionnalités chargés paresseusement pour réduire la taille initiale du paquet. Améliore directement les mesures de performance abordées dans les chapitres avancés.

Leçon 4 • Paramètres de route et chaînes de requête

Lit les segments de route dynamiques et les paramètres de requête optionnels à l'aide d'ActivatedRoute. Permet les vues de détail et les listes filtrées pilotées par l'état de l'URL.

Leçon 1 • Pipe async et intégration dans les modèles

S'abonne aux observables directement dans les modèles à l'aide du pipe async, éliminant la gestion manuelle des abonnements. Réduit le code passe-partout et prévient les fuites de mémoire dans les composants.

Leçon 2 • Sujets et multidiffusion

Utilise Subject, BehaviorSubject et ReplaySubject pour multidiffuser des valeurs à plusieurs abonnés. Permet les patrons d'état partagé utilisés dans la gestion d'état basée sur les services.

Leçon 3 • Opérateurs RxJS fondamentaux

Applique map, filter, switchMap, mergeMap et catchError pour transformer et combiner les flux. Équipe les étudiants pour gérer les besoins de transformation de données réelles.

Leçon 1 • Simulation de HTTP en développement

Utilise HttpClientTestingModule et une API Web en mémoire pour simuler les réponses du backend pendant le développement. Découple l'avancement du frontend de la disponibilité du backend.

Leçon 2 • Gestion des erreurs et stratégies de nouvelle tentative

Gère les erreurs HTTP avec les opérateurs catchError, retry et retryWhen pour des appels API résilients. Assure une dégradation gracieuse et une rétroaction d'erreur conviviale pour l'utilisateur.

Leçon 3 • Intercepteurs HTTP

Crée des intercepteurs pour joindre des jetons d'authentification, journaliser les requêtes et transformer les réponses globalement. Centralise les préoccupations HTTP transversales sans modifier les appels de service individuels.

Leçon 4 • Configuration de HttpClient et requêtes GET

Importe HttpClientModule, injecte HttpClient et effectue des requêtes GET typées. Établit la base pour toute communication avec le backend dans l'application.

Leçon 1 • Formulaires dynamiques avec FormArray

Gère des listes de contrôles de longueur variable à l'aide de FormArray pour les scénarios de formulaires dynamiques. Prend en charge les cas d'utilisation comme l'ajout de plusieurs adresses ou lignes d'articles.

Leçon 2 • Fondamentaux des formulaires réactifs

Construit des formulaires par programmation en utilisant FormControl, FormGroup et FormBuilder. Permet une logique de formulaire évolutive et testable, entièrement pilotée depuis la classe du composant.

Leçon 3 • Expérience utilisateur et accessibilité des formulaires

Applique les états touched, dirty et pristine pour contrôler la visibilité des erreurs et améliorer l'expérience utilisateur du formulaire. Assure que les formulaires respectent les normes d'accessibilité avec des attributs ARIA appropriés.

Leçon 4 • Validateurs personnalisés et validation asynchrone

Écrit des validateurs personnalisés synchrones et asynchrones pour les vérifications entre champs et côté serveur. Étend le système de validation d'Angular pour répondre aux règles métier complexes.

Leçon 1 • Fondamentaux de la gestion d'état

Implémente un état basé sur les services avec BehaviorSubject et introduit les concepts du magasin NgRx pour un état évolutif. Prépare les étudiants à choisir la bonne stratégie d'état en fonction de la complexité de l'application.

Leçon 2 • Directives et pipes personnalisés

Construit des directives d'attribut réutilisables avec HostListener et HostBinding, et crée des pipes personnalisés purs et impurs. Étend les capacités des modèles Angular pour des besoins spécifiques au domaine.

Leçon 3 • Projection de contenu et composants dynamiques

Utilise ng-content pour la projection à fente unique et multiple et crée des composants dynamiquement au moment de l'exécution. Permet des composants de bibliothèque d'interface utilisateur hautement flexibles et réutilisables.

Leçon 4 • Stratégies de détection de changements

Compare la détection de changements par défaut et OnPush et applique OnPush avec des données immuables et des observables. Réduit considérablement les rendus inutiles dans les grands arbres de composants.