Formation Angular 17

Introduction à Angular 17

• 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

Prise en main

• 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 service de l'application
• Affichage de données à l'aide de l'interpolation et des expressions

Composants

• Comprendre le rôle des composants dans Angular 17
• Créer et utiliser des composants
• Transfert de données entre composants à l'aide des entrées (inputs) et des sorties (outputs)
• Utilisation des hooks de cycle de vie des composants

Directives

• Comprendre la différence entre les directives structurelles et les directives d'attribut
• Créer et utiliser des directives intégrées telles que ngIf, ngFor, ngSwitch, etc.
• Créer et utiliser des directives personnalisées

Pipes

• Comprendre le rôle des pipes dans Angular 17
• Créer et utiliser des pipes intégrés tels que date, currency, json, etc.
• Créer et utiliser des pipes personnalisés

Services

• Comprendre le rôle des services dans Angular 17
• Créer et utiliser des services
• Injection de dépendances à l'aide des fournisseurs (providers)

Modules

• Comprendre le rôle des modules dans Angular 17
• Créer et utiliser des modules
• Importation et exportation de modules

Association de données (Data Binding)

• Comprendre la différence entre l'association unidirectionnelle et bidirectionnelle des données
• Créer et utiliser l'association de propriétés, l'association d'événements et la syntaxe banana-in-a-box
• Utilisation des variables de référence de template

Routage

• Comprendre le rôle du routage dans Angular 17
• Créer et configurer 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

• Comprendre la différence entre les formulaires basés sur les templates et les formulaires réactifs
• Créer et valider des formulaires à l'aide des contrôles de formulaire, des groupes de formulaires, des tableaux de formulaires, etc.
• Utilisation de validateurs intégrés tels que required, minLength, maxLength, etc.
• Créer et utiliser des validateurs personnalisés

Client HTTP

• Comprendre le rôle du client HTTP dans Angular 17
• Créer et utiliser des requêtes HTTP pour communiquer avec les services backend
• Utilisation des observables pour gérer les flux de données asynchrones
• Utilisation d'intercepteurs pour modifier ou gérer les requêtes ou réponses HTTP

Nouveau contrôle de flux déclaratif

• Explication de la nouvelle syntaxe de blocs de contrôle de template et de la manière dont elle simplifie les tâches courantes comme le rendu conditionnel, la boucle et la gestion des collections vides
• Exemples d'utilisation des nouveaux blocs, tels que @if, @else, @switch, @case, @default, @for et @empty
• Comparaison de la nouvelle syntaxe avec l'ancienne, telle que *ngIf, *ngSwitch et *ngFor
• Mention de la manière dont les nouveaux blocs de contrôle prennent en charge les applications sans zone avec des signaux (signals)

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 paresseux du contenu du bloc et de ses dépendances
• 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
• Mention de la manière dont 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
• Exemples d'utilisation de la directive withViewTransitions avec différents types de transitions, tels que fondu, glissement, zoom et bascule
• Mention de la manière dont l'API de transitions de vue fonctionne avec le routeur Angular et l'historique du navigateur

Autres fonctionnalités et améliorations

• Résumé bref de certaines autres fonctionnalités et améliorations offertes par Angular 17, telles que :
• Prise en charge du passage de @Component.styles comme une chaîne de caractères
• Le code d'animations d'Angular peut être chargé paresseusement
• Prise en charge de TypeScript 5.2
• L'API de signaux (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 v18.13.0
• Esbuild deviendra le builder par défaut et le serveur de développement par défaut utilisera Vite