Se connecter
Lior Chamla : Développez vous bien !/Toujours plus loin avec Angular
Acheter maintenant

  • 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
✅ Acheter cette formation maintenant

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 😉
XYoutube

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 :

Exploiter un formulaire

🛠️ Approche template driven avec FormsModule
🚀 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

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

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 !
➡️ Je veux apprendre Angular !

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 !
✅ Acheter cette formation maintenant

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
✅ Acheter cette formation maintenant

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 😉)
Allez ! Je me lance ! 💪

👍 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 😊
👀 Montre moi les 2 premières heures !

  • 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.
👍 Tu m'as convaincu, j'achète ce cours !

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
L'environnement de travail
💻 La CLI d'Angular
Mise en place de VSCode
⚙️ VSCode : Activer Emmet pour nos fichiers TypeScript
Les pré-requis avant la formation
Créer le workspace et nos deux applications
🎨 Installer un thème CSS Bootswatch
Tirer profit au mieux de la formation
📁 GitHub : Retrouvez le code de la formation

Les formulaires Template Driven (2 heures et 5 minutes)

Introduction et limites de l'exploitation de formulaires
La directive NgForm pour exploiter un formulaire
La directive NgModel pour exploiter un champ
Les "states" du NgModel
Debugger un formulaire simplement
Comprendre la validation des champs
🎨 Ajouter du CSS pour la validation
NgModel et les erreurs de validation
NgForm et la validation du formulaire
Valider l'ensemble des champs
NgModelOptions et NgFormOptions
Entracte : ce que nous avons compris jusqu'ici
NgModelGroup : grouper des champs ensemble !
Introduction à la création de validateurs
Validation custom : le BannedEmailValidator
Validation asynchrone : le UniqueEmailValidator
Validation multiple : le ConfirmPasswordValidator
Comprendre le ValueAccessor
Créons un champ personnalisé !
Implémenter l'interface ControlValueAcessor
ngModel et DataBinding
🚀 Conclusion de la section
❔ 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
La classe FormControl
La directive FormControl
Validation en approche Réactive
Validation custom en approche réactive
Validation asynchrone en approche Réactive
💪 Exercice : mettre en place le champ Password
✅ Correction : mettre en place le champ Password
Gérer la soumission du formulaire
La classe FormGroup
La directive FormGroup
Créer une validation multiple
Regrouper des champs avec FormGroup et FormGroupName
Validations par directives livrées ou custom
Collections de champs avec FormArray
Collections de groupes avec FormArray
setValue et patchValue : donner une valeur au formulaire
Créer un champ personnalisé : color-picker
valueChanges : Réagir aux changements de valeurs
Validation dynamique : ajouter ou supprimer des validations à la volée
💪 Exercice : créer un formulaire de recette de cuisine
✅ Correction : créer un formulaire de recette de cuisine
🚀 Conclusions de la section
❔ 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
👀 Comprendre l'API TMDB
Récupérer les données avec fetch()
Test Unitaires : les limites du fetch()
Remplaçons fetch() par un espion !
✨ Le HttpClientModule !
✨ Le HttpClientTestingModule !
Typages forts et transformations
Créons un MoviesService pour centraliser les traitements
🔎 A la découverte du pipe() !
Correction des tests unitaires
Spectator ! Et nos tests deviennent magnifiques !
Tester le MoviesService
Entracte : ce que nous avons compris jusqu'ici
Récupérer les Genres de films
Tester la récupération des genres
La notion d'Intercepteurs avec Angular
Tester un Intercepteur ?
🚀 Conclusion de la section
❔ Quizz : HttpClientModule
📁 GitHub : Retrouver le code de fin de section

Les Observables RxJS (1 heure et 40 minutes)

Introduction
forkJoin & combineLatest : combiner des observables
Infinite scroll SANS RxJS
fromEvent : transformer un événement du DOM en Observable
map : transformer une valeur émise
filter : filtrer les valeurs émises
distinctUntilChanged : ne pas ré-émettre une même valeur
switchMap : remplacer un observable par un autre
Mise à jour des tests de l'application
😱 Danger : Fuites de mémoires !
Les Subject RxJS et l'opérateur takeUntil
🔥 Le pipe "async" d'Angular
MoviesComponent : gérer les souscriptions
💪 On fait du RxJS hardcore (pipe Async)
🚀 Conclusion de la section
❔ Quizz : les Observables RxJS
📁 GitHub : Retrouver le code de fin de section

Le routing dans Angular (1 heure et 20 minutes)

Introduction
🛠️ Mise en place de l'application Emails
🛠️ HTML des composants
📖 Fausses données d'emails
Le RouterModule d'Angular
La directive router-outlet : afficher le contenu correspondant à l'URL
La directive routerLink pour des liens réactifs !
La notion de routes "enfants" (children)
Routes dynamiques (paramétrables)
Donner vie à la liste des emails
Récupérer les informations de la route grâce à ActivatedRoute !
Faire la distinction entre les emails
L'écran de détails d'un Email
Utiliser le pipe "async" dans les détails d'un email
Utiliser le pipe "async" dans la liste des emails
Les liens dans la page de détails
Gestion de l'erreur dans la page d'un email
Fragments d'URL avec la directive RouterLink
Fragments d'URL avec le service Router
🚀 Conclusion de la section
❔ 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
Les Feature Modules
Lazy Loading de Feature Modules
Fragments d'URL et navigation dynamique
👀 Entracte : ce qu'on a appris jusque là
CanActivate : empêcher l'accès à une Route
Authentification réactive (RxJS)
Utiliser CanActivate avec un Observable
CanDeactivate : empêcher le départ d'une Route
Resolvers : Précharger des données
Resolvers et données asynchrones
Les événements du Router
Créer une barre de chargement
RxJS : Refactoriser la loading bar
🚀 Conclusion de la section
❔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
Créez votre compte Xano
Créer le Workspace Xano
Users : inscription
Users : authentification
Les tables Invoice et Detail
Invoices : création d'une facture
Invoices : édition d'une facture existante
Invoices : suppression d'une facture
Sécurité et préconditions
Ajouter des données dans les retours de l'API
Users : vérifier si un email est déjà pris
🚀 Conclusion : la place d'Angular dans notre projet

NgCRM : Le AuthModule (1 heure et 50 minutes)

NgCRM : AppRoutingModule ?!
Le AuthModule et ses composants
Mise en place du HTML
Mise en place du Lazy Loading
RegisterComponent : Le formulaire d'inscription
Vérifier que l'email est disponible
Vérifier la confirmation du password
Appeler l'API pour inscrire l'utilisateur
Créer un AuthService pour factoriser les appels API
LoginComponent : Le formulaire de connexion
Utiliser le FormBuilder pour alléger le code
L'Observable authStatus$
Utiliser authStatus$ dans la Navbar
Directive structurelle *authenticated
Gestion du JWT dans le localStorage
Préparer l'avenir avec l'Inversion de Dépendances
📁 GitHub : Retrouvez le code de la formation

NgCRM : Tests du AuthModule (1 heure et 30 minutes)

Tester le RegisterComponent
Tester le LoginComponent
Tester le TokenManager
Tester le AuthService #1 : le authStatus$
Tester le AuthService #2 : login et authStatus$
Tester le AuthService #3 : Login et authStatus$
Tester le AuthService #4 : Register et Exists
Tester la directive AuthenticatedDirective
Refactoring et variable d'environnement
📁 GitHub : Retrouver le code de fin de section

NgCRM : Création des factures

Mise en place du module Invoice et des composants
ReactiveFormsModule : binding du formulaire
ReactiveFormsModule : binding des détails
Binding et calculs des totaux de la facture
Utiliser le CurrencyPipe pour formater les montants
Validation des détails de la facture
Découper le formulaire en plusieurs "micro" composants
Créer un composant réutilisable pour le formulaire
Le composant InvoiceFormGeneral
Le composant InvoiceFormDetails
Le composant InvoiceFormTotals
Créer un type InvoiceFormType
Soumission du formulaire
Le type Invoice
Le service InvoiceService
Gestion du authToken
Créer un AuthInterceptor
Redirection après soumission
🚀 Conclusion de la section
📁 GitHub : Retrouver le code de fin de section

NgCRM : Tests de la création de factures

Tests du InvoiceFormTotalsComponent
Tests du InvoiceFormGeneralComponent
Tests du InvoiceFormDetailsComponent
Tests du InvoiceFormComponent #1
Tests du InvoiceFormComponent #2
Tests du InvoiceFormComponent #3
Refactoring des tests unitaires
Tests du InvoiceCreationComponent
Tests du InvoiceService
Tests du AuthInterceptor
📁 GitHub : Retrouver le code de fin de section

NgCRM : Edition et liste des factures

Récupérer la facture à modifier
patchValue : pré-remplir le formulaire
RxJS : Utiliser le AsyncPipe pour gérer la facture
Gestion de la soumission et redirection
Mise en place de la liste des factures
Utiliser les pipes dans nos templates
Gérer le statut d'une facture
Gérer la suppression d'une facture
Unsubscribe de nos Observables
Modifier le routerLink pour utiliser un fragment
Convertir les montants dans le InvoiceService
📁 GitHub : Retrouver le code de fin de section

NgCRM : Tests de l'édition et la liste des factures

Réparation des tests "cassés"
Mise à jour des tests du InvoiceService
Tests du composant InvoiceStatus
Tests de la liste des factures
Test de la suppression au sein de la liste
Refactoring des tests unitaires
Tests du composant InvoiceEditionComponent
Tests du remplissage du formulaire
📁 GitHub : Retrouver le code de fin de section