Chargement en cours
Shop 
Panier 
Commande 
-
Mise en route
Cette section introduit Angular, son fonctionnement, les différentes installations à effectuer. Nous allons également démarrer le cours en tant que tel en détaillant comment tirer le meilleur de ce cours.
-
Les Bases
Comme son nom l'indique, cette section présente les bases d'Angular. À la fin de cette partie, vous serez en mesure de comprendre comment une application Angular fonctionne.
- Main.ts – comment Angular se charge et démarre
- Fonctionnement des composants
- Créer un composant
- Comprendre le rôle d’AppModule
- Ajouter un composant sans CLI
- Ajouter un composant avec CLI
- Comprendre les templates de Composants
- Personnaliser le style d’un composant
- Comprendre le “selector” d’un composant
- [Exercice] Composants
- [Correction] Composants
- Qu’est-ce que le DataBinding ?
- String Interpolation
- Property Binding
- Différences String Interpolation / Property Binding
- Event Binding
- En savoir plus sur les Event
- Passer des données via Event Binding
- 2-Way-Databinding
- [Exercice] DataBinding
- [Correction] Databinding
- Introduction Directives
- ngIf et affichage conditionnel de données
- ngIf else
- Modifier le style d’un élément avec ngStyle
- Appliquer une classe CSS de manière dynamique
- Parcourir des éléments grâce à ngFor
- [Exercice] Directives
- [Correction] Directives
-
[Projet] Les bases
Cette section permet d'appliquer les notions acquises dans le chapitre précédent pour débuter notre projet.
-
Débugger une application Angular
Cette section présente quelques méthodes utilisable pour débugger une application Angular
-
Composants et DataBinding
Cette section aborde en profondeur les composants et le DataBinding.
- Introduction et structuration
- Property & Event Binding
- Property Binding personnalisé
- Alias de Property Binding
- Event Emitter
- Alias @Output
- Précision Input / Output
- View Encapsulation
- Références Locales
- ViewChild
- NgContent
- LifeCycle Hook
- Utilisation de LifeCycle Hooks
- LifeCycle Hook ViewChild
- LifeCycle Hook ContentChild
- [Exercice] DataBinding et Composants
- [Correction] DataBinding et Composants
-
[Projet] Composants et Databinding
Dans cette section, vous allez mettre en oeuvre ce qui a été vu dans la section précédente.
-
Directives
Dans cette section, nous allons découvrir les directives de A à Z
-
[Projet] Directives
Dans cette section, nous allons mettre en oeuvre les directives dans notre projet.
-
Services et Injection de dépendances
Dans cette section, nous allons voir en détail ce qu'est un service et une injection de dépendance.
- Introduction
- Quand un service est-il utile ?
- Créer un service
- Injection de service
- Hiérarchie d’une injection de service
- Instances de service
- Utiliser un service dans un service
- Faire communiquer des composants grâce aux services
- providedIn
- [Exercice] Services pour une liste d’utilisateurs
- [Correction] Services pour une liste d’utilisateurs
-
[Projet] Services et Injection de dépendances
Dans cette partie, nous allons mettre en place les différents services utiles au projet
-
Routing
Dans cette section, vous allez apprendre à mettre en place une navigation complexe et sécurisée
- Introduction
- Présentation de l’exercice
- Mettre en place un routing
- RouterLink
- Navigation Path
- RouterLinkActive
- Navigation absolue
- Navigation relative
- Passer des paramètres
- Récupérer des paramètres de manière dynamique
- queryParams Fragment
- [Exercice] Rapatriement dynamique de données
- [Correction] Rapatriement dynamique de données
- Child Routes
- Passer des données
- Route wildcard
- Précision sur les redirections
- Externalisation des routes
- CanActivate Guard
- CanActivateChild Guard
- Mise en place d’un service (factice) d’authentification
- CanDeActivate
- Routes Data
- Resolve Guard
- useHash
-
[Projet] Routing
Dans cette section, nous allons appliquer ce qui a été vu lors du chapitre précédent à notre projet
- Introduction du Routing
- Mise en place des routes
- Création des liens RouterLink
- RouterLinkActive
- Correction rafraichissement de page
- Introduction child routes
- Child Routes
- Configuration des paramètres de route
- RouterLink / RouterLinkActive
- Recipe Edit Route
- Détection du mode Modification / Création
- Mise en place de la navigation
- Nettoyage du code
-
Comprendre les Observables
Dans cette section, nous allons aborder mieux en profondeur ce qu'est un Observable, comment en construire un et comment l'exploiter au mieux
-
[Projet] Observables
Dans cette section, nous appliquons une partie de ce qui a été vu dans la partie précédente.
-
Gestion des formulaires
Dans cette partie, nous abordons les 2 approches que propose Angular pour gérer les formulaires.
- Introduction
- Deux approches : Template Driven | Réactive
- Présentation de l’exercice
- Enregistrer les contrôles
- [Template Driven] Soumettre un formulaire
- [Template Driven] Parcourir les différents états
- [Template Driven] Utiliser @ViewChild
- [Template Driven] Les Validators
- [Template Driven] Les différents états
- [Template Driven] Message d’erreur
- [Template Driven] Property Binding NgModel
- [Template Driven] Two-Way Binding NgModel
- [Template Driven] Grouper des FormControls
- [Template Driven] Précisions sur les boutons radio
- [Template Driven] setValue / patchValue
- [Template Driven] Récupérer les valeurs d’un formulaire
- [Template Driven] Réinitialiser un formulaire
- [Template Driven] Exercice
- [Template Driven] Correction
- [Reactive] Mise en place
- [Reactive] Initialisation FormGroup / FormControl
- [Reactive] Synchroniser TS et Template
- [Reactive] Soumettre un formulaire
- [Reactive] Validators
- [Reactive] Accéder aux FormControls
- [Reactive] Grouper les FormControls
- [Reactive] Remplir un FormArray dynamiquement
- [Reactive] Validators personnalisés
- [Reactive] Codes d’erreur
- [Reactive] Validateurs asynchrones
- [Reactive] Observer un changement de valeur / de statut
- [Reactive] setValue, patchValue, Reset
- [Reactive] Exercice
- [Reactive] Correction
-
[Projet] Formulaires
Dans cette partie, nous mettons en oeuvre ce qui a été vu dans la partie précédente concernant les formulaires
- Introduction
- Modifier la liste d’achat grâce à une approche Template Driven
- Mettre en place des validateurs
- Charger un ingrédient
- Modifier un ingrédient
- Réinitialiser le formulaire après ajout/modification
- Réinitialiser le formulaire manuellement
- Supprimer un ingrédient
- Créer le template de formulaire
- Initialiser le formulaire réactif
- Synchroniser le template et le fichier TS
- FormArray Ingredients
- Ajouter un ingrédient
- Validators Recipe Edit
- Ajouter / Modifier une recette
- Annuler / supprimer une recette
- Charger dynamiquement une image
- Correction Provider
- Supprimer un ingrédient (ou tous)
- Améliorer RecipeList
-
Utiliser les Pipes pour modifier l'affichage
Dans cette partie, nous abordons les Pipes, comment les configurer et comment créer ses propres Pipes personnalisés
-
Requêtes HTTP
Dans cette partie, nous abordons l'interaction avec un back-end via des requêtes HTTP
- Requêtes HTTP – Introduction
- ADN d’une requête HTTP
- Mettre en place un backend avec Firebase
- HTTP Post
- HTTP Get
- Les opérateurs Observables
- Précision et amélioration sur le typage
- Afficher les publications
- Indiquer le chargement en cours
- Sous-traiter HTTP dans un service
- HTTP Delete
- Gérer les erreurs
- Gérer les erreurs (alternative Subject)
- Intercepter et manipuler les erreurs (catchError)
- Améliorer l’interaction avec un message d’erreur (dismiss)
- Http Headers
- QueryParams
- Observer les types de réponse
- responseType
- Interceptor
- Manipuler les requêtes
- Intercepter une réponse
- Mettre en place plusieurs Intercepteurs
-
[Projet] Requêtes HTTP
Dans cette partie, nous appliquons les concepts abordés à notre projet
-
[Projet] Identification et chemins protégés
Dans cette partie, nous allons apprendre à mettre en place un système d'authentification, appliqué au projet
- Introduction et fonctionnement de l’authentification
- Créer une page d’authentification
- Basculer du mode création de compte au mode connexion
- Soumettre le formulaire
- Préparer le backend (Firebase) d’authentification
- Mettre en place la requête HTTP d’inscription
- Inscrire un utilisateur
- Gérer les erreurs d’inscription
- Implémenter un indicateur de chargement
- Se connecter
- Gérer les erreurs de connexion
- Créer et stocker les données utilisateur
- Considérer l’état de connexion
- Passer le Token d’identification au Backend
- Interceptor pour charger et sauvegarder les données
- Se déconnecter
- Connexion automatique
- Déconnexion automatique
- CanActivate Guard
-
Composants dynamiques
Dans cette section, nous allons apprendre à mettre en place un composant de manière dynamique et intégralement programmatique
-
Modules et optimisation d'applications Angular
Dans cette partie, nous allons aborder comment optimiser une application Angular; en comprenant comment les modules fonctionnent et comment les services doivent être déclarés pour une optimisation maximale.
- Définition des Modules
- Parcours et analyse d’AppModule
- Diviser une application en plusieurs modules
- Créer le module “RecipeModule”
- Mettre en place un routing spécifique à une fonctionnalité
- Adapter la déclaration des composants
- Créer le module “ShoppingListModule”
- Shared Module
- Créer et comprendre un module partagé
- Core Module
- Créer et comprendre un Core Module
- Créer le module “AuthModule”
- Expliquer le “Lazy Loading”
- Mettre en place le “Lazy Loading” pour Recipes
- Mettre en place le “Lazy Loading” pour Auth et ShoppingList
- PreloadingStrategy
- Comment les Services intéragissent avec les différents modules ?
- Tester les différents moyens de charger un service
-
Déploiement d'application
Dans cette partie, nous allons préparer notre application au déploiement en la compilant après avoir effectuer les dernières optimisation; puis nous allons la déployer sur une serveur Firebase.
[Exercice] Composants
Énoncé
1. Créer un composant warning-alert manuellement
2. Créer un composant success-alert grâce au CLI
3. Afficher ces composants dans AppComponent
4. Mettre en forme les composants avec une couleur appropriée en utilisant un style intégré et une feuille de style externe
Bonne chance !