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] DataBinding
Énoncé
- Créer une application Angular
- Créer un composant input-perso
- Dans ce composant, créer un champs texte “username” en Two Ways Databinding
- Dupliquer le contenu du champs texte dans un paragraphe en dessous, en temps réel à chaque fois qu’une touche est appuyée
- Ajouter un bouton qui pourra être cliquable uniquement lorsque le champs de texte ne sera pas vide
- Au clic sur le bouton, le champs de texte sera réinitialisé
Bonne chance 🙂