- 79 € ou 3 paiements mensuels de 29 €
Toujours plus loin avec Angular
- Cours
- 229 Leçons
🚀 Créez une application CRM fullstack avec un front Angular !
🔎 Apprenez à gérer les formulaires
✨ Découvrez le HttpClient et les Observables
🗺️ Naviguez avec le Router
💉 Consolidez votre connaissance de l'Injection de Dépendances
🔎 Apprenez à gérer les formulaires
✨ Découvrez le HttpClient et les Observables
🗺️ Naviguez avec le Router
💉 Consolidez votre connaissance de l'Injection de Dépendances
A propos de Lior Chamla
Développeur web et formateur depuis plus de 13 ans, je forme les salariés et les étudiants sur des technologies telles que Symfony, React ou encore Angular !
▶ J'ai une chaîne YouTube qui connaît un certain succès et que tu peux consulter pour mieux connaître les contenus que je produis 😉
▶ J'ai une chaîne YouTube qui connaît un certain succès et que tu peux consulter pour mieux connaître les contenus que je produis 😉
Faisons de vous des expert(e)s du framework Angular 🚀✨
Ce que vous allez apprendre avec moi dans cette formation 😊
➡️ Notre but final : créer une application de CRM fullstack avec inscription / authentification et gestion des factures !
Pour ça, il faudra passer avant par des étapes d'apprentissage essentielles :
Pour ça, il faudra passer avant par des étapes d'apprentissage essentielles :
Exploiter un formulaire
🛠️ Approche template driven avec FormsModule
🚀 Approche réactive avec ReactiveFormsModule
✨ Créer ses propres validateurs et types de champs
🚀 Approche réactive avec ReactiveFormsModule
✨ Créer ses propres validateurs et types de champs
Naviguer dans l'application
🗺️ Créer une application multipages avec le RouterModule
🛡️ Protéger l'accès à des URLs selon condition
⌛ Optimiser le chargement du javascript grâce au Lazy Loading
🛡️ Protéger l'accès à des URLs selon condition
⌛ Optimiser le chargement du javascript grâce au Lazy Loading
Requêtes HTTP et Observables RxJS
🚀 Envoyer une requête HTTP avec le HttpClient
🔎 Comprendre et manipuler les Observables RxJS
🛡️ Créer des intercepteurs pour manipuler les requêtes HTTP
🔎 Comprendre et manipuler les Observables RxJS
🛡️ Créer des intercepteurs pour manipuler les requêtes HTTP
Les formulaires Template Driven
Venez découvrir l'approche dite "Template Driven" des formulaires basée en grande partie sur votre unique template HTML et les éléments du formulaire, une façon logique et simple d'exploiter un formulaire et sa validation !
Grâce au FormsModule d'Angular, vous apprendrez à manipuler les champs et validateurs natifs HTML mais aussi à créer vos propres types de champs et vos propres validateurs !
Grâce au FormsModule d'Angular, vous apprendrez à manipuler les champs et validateurs natifs HTML mais aussi à créer vos propres types de champs et vos propres validateurs !
Les Formulaires Réactifs
Si vous avez besoin de plus de facilité à tester et de plus de précisions dans la gestion et l'exploitation de votre formulaire, optez pour l'approche Réactive !
Grâce au module ReactiveFormsModule d'Angular, vous pourrez gérer de main de maître votre formulaire ! Apprenez à gérer ce type de formulaires, à créer des champs et des validations dynamiques et complexes de façon intuitive !
Grâce au module ReactiveFormsModule d'Angular, vous pourrez gérer de main de maître votre formulaire ! Apprenez à gérer ce type de formulaires, à créer des champs et des validations dynamiques et complexes de façon intuitive !
Navigation et RouterModule
Dans cette formation, vous verrez tout ce qu'il y a à savoir sur le Router et la navigation dans une application Angular :
🗺️ Navigation classique et routes paramétrées
✨ Chargement différé et optimisation du poids de l'application grâce au Lazy Loading
🛡️ Protection des URLs grâce aux Gardes
⌛ Pré chargement des ressources grâce aux Resolvers
🗺️ Navigation classique et routes paramétrées
✨ Chargement différé et optimisation du poids de l'application grâce au Lazy Loading
🛡️ Protection des URLs grâce aux Gardes
⌛ Pré chargement des ressources grâce aux Resolvers
HttpClient et Observables n'auront plus de secrets
Les Observables RxJS sont un point bloquant pour beaucoup d'étudiantes et étudiants lorsqu'il s'agit d'apprendre Angular : plus maintenant !
Bénéficiez d'une pédagogie qui a fait ses preuves et domptez les Observables tout en découvrant le HttpClient d'Angular (et comment faire des tests unitaires avec 😉)
Bénéficiez d'une pédagogie qui a fait ses preuves et domptez les Observables tout en découvrant le HttpClient d'Angular (et comment faire des tests unitaires avec 😉)
👍 Testez avant d'acheter !
Les deux premières heures de ce cours sont entièrement gratuites afin que vous vous fassiez une idée de ma pédagogie et de la façon dont j'aborde les différents sujets !
N'hésitez plus ! Testez ce cours avant de l'acheter 😊
N'hésitez plus ! Testez ce cours avant de l'acheter 😊
- 79 € ou 3 paiements mensuels de 29 €
100% satisfaits ou remboursés !
Si à la fin d'une de mes formations, tu ne trouve pas que l'investissement valait le coup, la seule chose que tu as à faire est de me le faire savoir au plus tard 15 jours après la commande et je te rembourse 100% de ton achat 👍
Pas besoin d'explication ou de justification.
Clair et simple : si ça n'a pas été à la hauteur selon toi, je ne veux pas garder ton argent. Tu peux regarder la totalité de la formation et en tirer tous les bénéfices, et si à la fin tu n'es pas satisfait, tu récupères 100% du montant.
Pas besoin d'explication ou de justification.
Clair et simple : si ça n'a pas été à la hauteur selon toi, je ne veux pas garder ton argent. Tu peux regarder la totalité de la formation et en tirer tous les bénéfices, et si à la fin tu n'es pas satisfait, tu récupères 100% du montant.
Sommaire de la formation
Cette formation sera disponible à partir de mi-janvier !
EN COURS DE MONTAGE
Introduction à la formation (environ 20 minutes)
Introduction de la formation
- 2 mins
- 19,4 Mo
L'environnement de travail
- 2 mins
- 17,7 Mo
💻 La CLI d'Angular
- 3 mins
- 42 Mo
Mise en place de VSCode
- 2 mins
- 35,3 Mo
⚙️ VSCode : Activer Emmet pour nos fichiers TypeScript
Les pré-requis avant la formation
- 2 mins
- 102 Mo
Créer le workspace et nos deux applications
- 4 mins
- 94,6 Mo
🎨 Installer un thème CSS Bootswatch
- 5 mins
- 155 Mo
Tirer profit au mieux de la formation
- 2 mins
- 79,5 Mo
📁 GitHub : Retrouvez le code de la formation
Les formulaires Template Driven (2 heures et 5 minutes)
Introduction et limites de l'exploitation de formulaires
- 8 mins
- 215 Mo
La directive NgForm pour exploiter un formulaire
- 6 mins
- 122 Mo
La directive NgModel pour exploiter un champ
- 4 mins
- 80,8 Mo
Les "states" du NgModel
- 3 mins
- 69,8 Mo
Debugger un formulaire simplement
- 2 mins
- 32,4 Mo
Comprendre la validation des champs
- 6 mins
- 160 Mo
🎨 Ajouter du CSS pour la validation
- 4 mins
- 107 Mo
NgModel et les erreurs de validation
- 5 mins
- 117 Mo
NgForm et la validation du formulaire
- 3 mins
- 68,5 Mo
Valider l'ensemble des champs
- 4 mins
- 125 Mo
NgModelOptions et NgFormOptions
- 6 mins
- 191 Mo
Entracte : ce que nous avons compris jusqu'ici
- 3 mins
- 80,4 Mo
NgModelGroup : grouper des champs ensemble !
- 3 mins
- 72,4 Mo
Introduction à la création de validateurs
- 4 mins
- 114 Mo
Validation custom : le BannedEmailValidator
- 12 mins
- 334 Mo
Validation asynchrone : le UniqueEmailValidator
- 15 mins
- 375 Mo
Validation multiple : le ConfirmPasswordValidator
- 11 mins
- 349 Mo
Comprendre le ValueAccessor
- 5 mins
- 109 Mo
Créons un champ personnalisé !
- 10 mins
- 292 Mo
Implémenter l'interface ControlValueAcessor
- 10 mins
- 340 Mo
ngModel et DataBinding
- 10 mins
- 385 Mo
🚀 Conclusion de la section
- 5 mins
- 41,3 Mo
❔ Quizz : template driven forms avec Angular
📁 GitHub : Retrouver le code de fin de section
Les formulaires Réactifs (1 heure et 45 minutes)
Introduction : l'approche Réactive des formulaires
- 4 mins
- 124 Mo
La classe FormControl
- 6 mins
- 129 Mo
La directive FormControl
- 2 mins
- 72,4 Mo
Validation en approche Réactive
- 5 mins
- 137 Mo
Validation custom en approche réactive
- 5 mins
- 137 Mo
Validation asynchrone en approche Réactive
- 7 mins
- 218 Mo
💪 Exercice : mettre en place le champ Password
- 1 min
- 11,6 Mo
✅ Correction : mettre en place le champ Password
- 3 mins
- 107 Mo
Gérer la soumission du formulaire
- 2 mins
- 44,2 Mo
La classe FormGroup
- 8 mins
- 325 Mo
La directive FormGroup
- 4 mins
- 139 Mo
Créer une validation multiple
- 6 mins
- 241 Mo
Regrouper des champs avec FormGroup et FormGroupName
- 5 mins
- 206 Mo
Validations par directives livrées ou custom
- 4 mins
- 148 Mo
Collections de champs avec FormArray
- 11 mins
- 343 Mo
Collections de groupes avec FormArray
- 5 mins
- 145 Mo
setValue et patchValue : donner une valeur au formulaire
- 5 mins
- 142 Mo
Créer un champ personnalisé : color-picker
- 3 mins
- 96,3 Mo
valueChanges : Réagir aux changements de valeurs
- 3 mins
- 80,5 Mo
Validation dynamique : ajouter ou supprimer des validations à la volée
- 8 mins
- 297 Mo
💪 Exercice : créer un formulaire de recette de cuisine
- 4 mins
- 80,7 Mo
✅ Correction : créer un formulaire de recette de cuisine
- 12 mins
- 414 Mo
🚀 Conclusions de la section
- 3 mins
- 21,1 Mo
❔ Quizz : approche réactive des formulaires
📁 GitHub : Retrouver le code de fin de section
Le HttpClient d'Angular (2 heures et 10 minutes)
Introduction : le HttpClientModule
- 3 mins
- 73,3 Mo
👀 Comprendre l'API TMDB
- 4 mins
- 128 Mo
Récupérer les données avec fetch()
- 9 mins
- 312 Mo
Test Unitaires : les limites du fetch()
- 12 mins
- 330 Mo
Remplaçons fetch() par un espion !
- 8 mins
- 238 Mo
✨ Le HttpClientModule !
- 6 mins
- 194 Mo
✨ Le HttpClientTestingModule !
- 7 mins
- 235 Mo
Typages forts et transformations
- 12 mins
- 418 Mo
Créons un MoviesService pour centraliser les traitements
- 4 mins
- 127 Mo
🔎 A la découverte du pipe() !
- 8 mins
- 241 Mo
Correction des tests unitaires
- 4 mins
- 148 Mo
Spectator ! Et nos tests deviennent magnifiques !
- 8 mins
- 337 Mo
Tester le MoviesService
- 12 mins
- 491 Mo
Entracte : ce que nous avons compris jusqu'ici
- 3 mins
- 23,9 Mo
Récupérer les Genres de films
- 6 mins
- 198 Mo
Tester la récupération des genres
- 6 mins
- 278 Mo
La notion d'Intercepteurs avec Angular
- 11 mins
- 300 Mo
Tester un Intercepteur ?
- 14 mins
- 529 Mo
🚀 Conclusion de la section
- 3 mins
- 26,9 Mo
❔ Quizz : HttpClientModule
📁 GitHub : Retrouver le code de fin de section
Les Observables RxJS (1 heure et 40 minutes)
Introduction
- 6 mins
- 61,5 Mo
forkJoin & combineLatest : combiner des observables
- 7 mins
- 207 Mo
Infinite scroll SANS RxJS
- 9 mins
- 382 Mo
fromEvent : transformer un événement du DOM en Observable
- 3 mins
- 155 Mo
map : transformer une valeur émise
- 3 mins
- 109 Mo
filter : filtrer les valeurs émises
- 6 mins
- 245 Mo
distinctUntilChanged : ne pas ré-émettre une même valeur
- 4 mins
- 164 Mo
switchMap : remplacer un observable par un autre
- 7 mins
- 310 Mo
Mise à jour des tests de l'application
- 13 mins
- 583 Mo
😱 Danger : Fuites de mémoires !
- 12 mins
- 331 Mo
Les Subject RxJS et l'opérateur takeUntil
- 5 mins
- 112 Mo
🔥 Le pipe "async" d'Angular
- 4 mins
- 119 Mo
MoviesComponent : gérer les souscriptions
- 4 mins
- 161 Mo
💪 On fait du RxJS hardcore (pipe Async)
- 16 mins
- 769 Mo
🚀 Conclusion de la section
- 5 mins
- 62,3 Mo
❔ Quizz : les Observables RxJS
📁 GitHub : Retrouver le code de fin de section
Le routing dans Angular (1 heure et 20 minutes)
Introduction
- 2 mins
- 18,5 Mo
🛠️ Mise en place de l'application Emails
- 6 mins
- 167 Mo
🛠️ HTML des composants
- 3 mins
- 78,7 Mo
📖 Fausses données d'emails
- 2 mins
- 59,5 Mo
Le RouterModule d'Angular
- 5 mins
- 102 Mo
La directive router-outlet : afficher le contenu correspondant à l'URL
- 3 mins
- 73,6 Mo
La directive routerLink pour des liens réactifs !
- 3 mins
- 73,9 Mo
La notion de routes "enfants" (children)
- 4 mins
- 79,7 Mo
Routes dynamiques (paramétrables)
- 4 mins
- 88,5 Mo
Donner vie à la liste des emails
- 6 mins
- 168 Mo
Récupérer les informations de la route grâce à ActivatedRoute !
- 8 mins
- 217 Mo
Faire la distinction entre les emails
- 4 mins
- 147 Mo
L'écran de détails d'un Email
- 10 mins
- 356 Mo
Utiliser le pipe "async" dans les détails d'un email
- 7 mins
- 250 Mo
Utiliser le pipe "async" dans la liste des emails
- 5 mins
- 205 Mo
Les liens dans la page de détails
- 3 mins
- 93,6 Mo
Gestion de l'erreur dans la page d'un email
- 3 mins
- 94 Mo
Fragments d'URL avec la directive RouterLink
- 5 mins
- 177 Mo
Fragments d'URL avec le service Router
- 2 mins
- 66,6 Mo
🚀 Conclusion de la section
- 3 mins
- 35,9 Mo
❔ Quizz : le Routing dans Angular
📁 GitHub : Retrouver le code de fin de section
Routing avancé : Lazy Loading, Guards et Resolvers (1 heure et 40 minutes)
Introduction
- 2 mins
- 15,1 Mo
Les Feature Modules
- 7 mins
- 174 Mo
Lazy Loading de Feature Modules
- 6 mins
- 130 Mo
Fragments d'URL et navigation dynamique
- 9 mins
- 332 Mo
👀 Entracte : ce qu'on a appris jusque là
- 2 mins
- 16,4 Mo
CanActivate : empêcher l'accès à une Route
- 14 mins
- 335 Mo
Authentification réactive (RxJS)
- 9 mins
- 278 Mo
Utiliser CanActivate avec un Observable
- 4 mins
- 114 Mo
CanDeactivate : empêcher le départ d'une Route
- 9 mins
- 241 Mo
Resolvers : Précharger des données
- 15 mins
- 457 Mo
Resolvers et données asynchrones
- 3 mins
- 67,2 Mo
Les événements du Router
- 5 mins
- 185 Mo
Créer une barre de chargement
- 9 mins
- 287 Mo
RxJS : Refactoriser la loading bar
- 11 mins
- 332 Mo
🚀 Conclusion de la section
- 3 mins
- 38,7 Mo
❔Quizz : Routing avancé
📁 GitHub : Retrouvez le code de la formation
NgCRM : Un backend no-code avec Xano (1 heure et 10 minutes)
Introduction et cahier des charges
- 3 mins
- 27,3 Mo
Créez votre compte Xano
- 2 mins
- 26,2 Mo
Créer le Workspace Xano
- 5 mins
- 73,4 Mo
Users : inscription
- 6 mins
- 82,8 Mo
Users : authentification
- 3 mins
- 39,8 Mo
Les tables Invoice et Detail
- 6 mins
- 54 Mo
Invoices : création d'une facture
- 14 mins
- 229 Mo
Invoices : édition d'une facture existante
- 11 mins
- 201 Mo
Invoices : suppression d'une facture
- 4 mins
- 51,2 Mo
Sécurité et préconditions
- 9 mins
- 182 Mo
Ajouter des données dans les retours de l'API
- 6 mins
- 128 Mo
Users : vérifier si un email est déjà pris
- 6 mins
- 80,5 Mo
🚀 Conclusion : la place d'Angular dans notre projet
- 4 mins
- 52,6 Mo
NgCRM : Le AuthModule (1 heure et 50 minutes)
NgCRM : AppRoutingModule ?!
- 3 mins
- 41,7 Mo
Le AuthModule et ses composants
- 6 mins
- 103 Mo
Mise en place du HTML
- 3 mins
- 126 Mo
Mise en place du Lazy Loading
- 5 mins
- 126 Mo
RegisterComponent : Le formulaire d'inscription
- 9 mins
- 350 Mo
Vérifier que l'email est disponible
- 10 mins
- 323 Mo
Vérifier la confirmation du password
- 6 mins
- 167 Mo
Appeler l'API pour inscrire l'utilisateur
- 7 mins
- 220 Mo
Créer un AuthService pour factoriser les appels API
- 11 mins
- 393 Mo
LoginComponent : Le formulaire de connexion
- 11 mins
- 368 Mo
Utiliser le FormBuilder pour alléger le code
- 4 mins
- 131 Mo
L'Observable authStatus$
- 7 mins
- 203 Mo
Utiliser authStatus$ dans la Navbar
- 8 mins
- 239 Mo
Directive structurelle *authenticated
- 11 mins
- 255 Mo
Gestion du JWT dans le localStorage
- 10 mins
- 285 Mo
Préparer l'avenir avec l'Inversion de Dépendances
- 13 mins
- 341 Mo
📁 GitHub : Retrouvez le code de la formation
NgCRM : Tests du AuthModule (1 heure et 30 minutes)
Tester le RegisterComponent
- 22 mins
- 866 Mo
Tester le LoginComponent
- 13 mins
- 474 Mo
Tester le TokenManager
- 12 mins
- 433 Mo
Tester le AuthService #1 : le authStatus$
- 12 mins
- 374 Mo
Tester le AuthService #2 : login et authStatus$
- 11 mins
- 373 Mo
Tester le AuthService #3 : Login et authStatus$
- 9 mins
- 294 Mo
Tester le AuthService #4 : Register et Exists
- 7 mins
- 220 Mo
Tester la directive AuthenticatedDirective
- 6 mins
- 160 Mo
Refactoring et variable d'environnement
- 5 mins
- 212 Mo
📁 GitHub : Retrouver le code de fin de section
NgCRM : Création des factures
Mise en place du module Invoice et des composants
- 6 mins
- 159 Mo
ReactiveFormsModule : binding du formulaire
- 10 mins
- 385 Mo
ReactiveFormsModule : binding des détails
- 11 mins
- 442 Mo
Binding et calculs des totaux de la facture
- 5 mins
- 153 Mo
Utiliser le CurrencyPipe pour formater les montants
- 5 mins
- 177 Mo
Validation des détails de la facture
- 4 mins
- 104 Mo
Découper le formulaire en plusieurs "micro" composants
- 3 mins
- 75,3 Mo
Créer un composant réutilisable pour le formulaire
- 5 mins
- 181 Mo
Le composant InvoiceFormGeneral
- 8 mins
- 349 Mo
Le composant InvoiceFormDetails
- 10 mins
- 430 Mo
Le composant InvoiceFormTotals
- 6 mins
- 244 Mo
Créer un type InvoiceFormType
- 4 mins
- 85,5 Mo
Soumission du formulaire
- 5 mins
- 175 Mo
Le type Invoice
- 7 mins
- 219 Mo
Le service InvoiceService
- 7 mins
- 198 Mo
Gestion du authToken
- 10 mins
- 319 Mo
Créer un AuthInterceptor
- 13 mins
- 402 Mo
Redirection après soumission
- 6 mins
- 159 Mo
🚀 Conclusion de la section
- 3 mins
- 80,8 Mo
📁 GitHub : Retrouver le code de fin de section
NgCRM : Tests de la création de factures
Tests du InvoiceFormTotalsComponent
- 10 mins
- 336 Mo
Tests du InvoiceFormGeneralComponent
- 8 mins
- 263 Mo
Tests du InvoiceFormDetailsComponent
- 20 mins
- 779 Mo
Tests du InvoiceFormComponent #1
- 13 mins
- 511 Mo
Tests du InvoiceFormComponent #2
- 10 mins
- 404 Mo
Tests du InvoiceFormComponent #3
- 12 mins
- 476 Mo
Refactoring des tests unitaires
- 7 mins
- 274 Mo
Tests du InvoiceCreationComponent
- 11 mins
- 393 Mo
Tests du InvoiceService
- 5 mins
- 148 Mo
Tests du AuthInterceptor
- 14 mins
- 449 Mo
📁 GitHub : Retrouver le code de fin de section
NgCRM : Edition et liste des factures
Récupérer la facture à modifier
- 7 mins
- 212 Mo
patchValue : pré-remplir le formulaire
- 3 mins
- 92,7 Mo
RxJS : Utiliser le AsyncPipe pour gérer la facture
- 3 mins
- 71,3 Mo
Gestion de la soumission et redirection
- 7 mins
- 210 Mo
Mise en place de la liste des factures
- 5 mins
- 153 Mo
Utiliser les pipes dans nos templates
- 3 mins
- 81,3 Mo
Gérer le statut d'une facture
- 6 mins
- 147 Mo
Gérer la suppression d'une facture
- 6 mins
- 154 Mo
Unsubscribe de nos Observables
- 2 mins
- 65,3 Mo
Modifier le routerLink pour utiliser un fragment
- 2 mins
- 48,2 Mo
Convertir les montants dans le InvoiceService
- 11 mins
- 316 Mo
📁 GitHub : Retrouver le code de fin de section
NgCRM : Tests de l'édition et la liste des factures
Réparation des tests "cassés"
- 2 mins
- 64,9 Mo
Mise à jour des tests du InvoiceService
- 8 mins
- 270 Mo
Tests du composant InvoiceStatus
- 4 mins
- 162 Mo
Tests de la liste des factures
- 11 mins
- 389 Mo
Test de la suppression au sein de la liste
- 5 mins
- 169 Mo
Refactoring des tests unitaires
- 4 mins
- 176 Mo
Tests du composant InvoiceEditionComponent
- 11 mins
- 409 Mo
Tests du remplissage du formulaire
- 5 mins
- 203 Mo
📁 GitHub : Retrouver le code de fin de section