Cours de développement Angular

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

Utilisez le CLI Angular pour générer un projet, explorer sa structure de fichiers et lancer le serveur de développement. Développez la familiarité 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

Installez Node.js, npm et le CLI Angular pour préparer un espace de travail local. Permet directement la création de projet couverte dans la section suivante.

Leçon 3 • L'essentiel de TypeScript pour Angular

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

Leçon 1 • Anatomie d'un composant Angular

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

Leçon 2 • Directives d'attribut et pipes

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

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

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

Leçon 4 • Syntaxe des templates et liaison de données

Enseignez l'interpolation, la liaison de propriété, la liaison d'événement et la liaison bidirectionnelle avec ngModel. Connecte la logique du composant au DOM pour des interfaces utilisateur interactives.

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

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

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

Générez des services avec le CLI, encapsulez la logique métier et les injectez dans les composants. Démontre le principe de responsabilité unique dans l'architecture Angular.

Leçon 3 • Compréhension des NgModules

Expliquez les déclarations, imports, exports 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égez les routes avec les gardes CanActivate et CanDeactivate et pré-chargez 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 outlets nommés

Imbriquez les routes enfants dans les modules de fonctionnalité et utilisez des outlets nommés pour les vues auxiliaires. Prend en charge les mises en page complexes comme les tableaux de bord avec des panneaux latéraux.

Leçon 3 • Chargement différé des modules de fonctionnalité

Divisez l'application en modules de fonctionnalité chargés à la demande pour réduire la taille initiale du bundle. Améliore directement les métriques de performance couvertes dans les chapitres avancés.

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

Lisez les segments de route dynamiques et les paramètres de requête facultatifs à 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 le template

S'abonne aux observables directement dans les templates à l'aide de la pipe async, éliminant la gestion manuelle des abonnements. Réduit le code passe-partout et prévient les fuites 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 modèles d'état partagé utilisés dans la gestion d'état basée sur les services.

Leçon 3 • Opérateurs RxJS de base

Applique map, filter, switchMap, mergeMap et catchError pour transformer et combiner les flux. Équipe les étudiants pour répondre aux exigences de transformation de données du monde réel.

Leçon 1 • Mockage HTTP en développement

Utilise HttpClientTestingModule et une API web en mémoire pour simuler les réponses back-end pendant le développement. Découple la progression du front-end de la disponibilité du back-end.

Leçon 2 • Stratégies de gestion des erreurs et 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 un retour d'erreur convivial.

Leçon 3 • Intercepteurs HTTP

Crée des intercepteurs pour attacher 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 de toutes les communications back-end 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 des scénarios de formulaires dynamiques. Prend en charge des 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 à l'aide de 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 des formulaires. Garantit que les formulaires répondent aux 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 inter-champs et côté serveur. Étend le système de validation d'Angular pour répondre à des 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 présente les concepts de store 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ées pures et impures. Étend les capacités des templates Angular pour des besoins spécifiques au domaine.

Leçon 3 • Projection de contenu et composants dynamiques

Utilise ng-content pour la projection à emplacement unique et multiple et crée des composants dynamiquement à 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 les stratégies de détection de changements Default et OnPush et applique OnPush avec des données immuables et des observables. Réduit considérablement les re-rendus inutiles dans les grands arbres de composants.