Plan du cours
Introduction
- Qu'est-ce qu'Angular ?
- Angular vs React vs Vue
- Aperçu des fonctionnalités et de l'architecture d'Angular 17
- Configuration de l'environnement de développement
Premiers pas
- Création d'un nouveau projet Angular 17 à l'aide d'Angular CLI
- Exploration de la structure du projet et des fichiers
- Exécution et mise en service de l'application
- Affichage des données à l'aide de l'interpolation et des expressions
Composants
- Compréhension du rôle des composants dans Angular 17
- Création et utilisation des composants
- Transfert de données entre les composants à l'aide des entrées (inputs) et des sorties (outputs)
- Utilisation des hooks de cycle de vie des composants
Directives
- Compréhension de la différence entre les directives structurelles et les directives d'attribut
- Création et utilisation des directives intégrées telles que ngIf, ngFor, ngSwitch, etc.
- Création et utilisation de directives personnalisées
Pipes
- Compréhension de l'utilité des pipes dans Angular 17
- Création et utilisation des pipes intégrés tels que date, currency, json, etc.
- Création et utilisation de pipes personnalisés
Services
- Compréhension du rôle des services dans Angular 17
- Création et utilisation des services
- Injection de dépendances à l'aide des fournisseurs (providers)
Modules
- Compréhension du rôle des modules dans Angular 17
- Création et utilisation des modules
- Importation et exportation de modules
Liaison de données
- Compréhension de la différence entre la liaison de données à sens unique et la liaison de données à double sens
- Création et utilisation de la liaison de propriété, de la liaison d'événement et de la syntaxe « banana-in-a-box »
- Utilisation des variables de référence de modèle
Routage
- Compréhension du rôle du routage dans Angular 17
- Création et configuration des routes
- Naviguer entre les routes à l'aide de routerLink et router.navigate()
- Utilisation des paramètres de route, des paramètres de requête et des fragments
Formulaires
- Compréhension de la différence entre les formulaires pilotés par modèle et les formulaires réactifs
- Création et validation des formulaires à l'aide des contrôles de formulaire, des groupes de formulaires, des tableaux de formulaires, etc.
- Utilisation des validateurs intégrés tels que required, minLength, maxLength, etc.
- Création et utilisation de validateurs personnalisés
Client HTTP
- Compréhension du rôle du client HTTP dans Angular 17
- Création et utilisation des requêtes HTTP pour communiquer avec des services back-end
- Utilisation des observables pour gérer les flux de données asynchrones
- Utilisation des intercepteurs pour modifier ou gérer les requêtes ou réponses HTTP
Flux de contrôle déclaratif et nouveau
- Explication de la nouvelle syntaxe des blocs de contrôle de modèle et de la manière dont elle simplifie des tâches courantes telles que le rendu conditionnel, les boucles et la gestion des collections vides
- Donner des exemples d'utilisation des nouveaux blocs, tels que @if, @else, @switch, @case, @default, @for et @empty
- Comparer la nouvelle syntaxe avec l'ancienne, telle que *ngIf, *ngSwitch et *ngFor
- Signaler comment les nouveaux blocs de contrôle prennent en charge les applications sans zones (zoneless) avec les signaux
Blocs de chargement différé
- Explication du concept de chargement différé et de la manière dont il peut améliorer les performances et l'expérience utilisateur des applications web
- Présentation du nouveau bloc de contrôle @defer qui permet le chargement différé du contenu du bloc et de ses dépendances
- Donner des exemples d'utilisation du bloc @defer pour différents scénarios, tels que le chargement de composants, de directives, de pipes, d'animations et de styles
- Signaler comment le bloc @defer fonctionne avec la nouvelle API de transitions de vue
API de transitions de vue
- Explication de l'objectif et des avantages de l'API de transitions de vue, qui permet aux développeurs de personnaliser les animations et les transitions entre les vues
- Présentation de la nouvelle directive withViewTransitions qui permet l'utilisation de l'API de transitions de vue
- Donner des exemples d'utilisation de la directive withViewTransitions avec différents types de transitions, tels que fondu (fade), glissement (slide), zoom et retournement (flip)
- Signaler comment l'API de transitions de vue fonctionne avec le routeur Angular et l'historique du navigateur
Autres fonctionnalités et améliorations
- Bref résumé de certaines des autres fonctionnalités et améliorations qu'offre Angular 17, telles que :
- Prise en charge du passage de @Component.styles sous forme de chaîne
- Le code d'animations d'Angular peut être chargé de manière différée
- Prise en charge de TypeScript 5.2
- L'API de signal de base est désormais stable
- La prise en charge de Node.js v16 a été supprimée et la version minimale prise en charge est la v18.13.0
- Esbuild sera le générateur par défaut et le serveur de développement par défaut utilisera Vite
Conclusion et prochaines étapes
Pré requis
- Une compréhension du HTML, du CSS et de JavaScript
- De l'expérience avec TypeScript et RxJS
- De l'expérience en développement web
Audience cible
- Développeurs souhaitant apprendre à utiliser Angular 17 pour créer des applications web dynamiques et réactives
- Développeurs souhaitant améliorer leurs compétences par rapport aux versions précédentes d'Angular
- Programmateurs souhaitant explorer les nouvelles fonctionnalités et améliorations d'Angular 17
Nos clients témoignent (2)
J'ai principalement apprécié le déroulement de la formation ; elle a abordé le sujet et, à la fin de chaque chapitre, nous avait préparé des sessions pratiques bien définies. Elle a su nous guider rapidement pour résoudre les problèmes que nous avons rencontrés lors de ces sessions pratiques.
Rabin Byanjankar - Lument
Formation - Angular 17
Traduction automatique
C'était très interactif et informatif. Le formateur a été très patient avec nous lorsque nous ne comprenions pas quelque chose et s'est assuré que personne ne soit laissé pour compte tout au long de la formation.
Daniel - INIT Innovations in Transportation Ltd.
Formation - Angular 17
Traduction automatique