- 79 € ou 3 paiements mensuels de 30 €
Introduction à Angular
🔎 Plongez en profondeur dans le Framework Angular
🚀 Découvrez ses concepts les plus importants
💪 Consolidez votre pratique du TypeScript
✨ Construisez une application de A à Z
🚀 Découvrez ses concepts les plus importants
💪 Consolidez votre pratique du TypeScript
✨ Construisez une application de A à Z
Achète cette formation dans son pack !
Obtiens des contenus additionnels en plus de l'introduction à Angular :
🛠️ Recréer Angular pour mieux le comprendre
✨ Introduction au framework Angular
🚀 Toujours plus loin avec Angular
🛠️ Recréer Angular pour mieux le comprendre
✨ Introduction au framework Angular
🚀 Toujours plus loin avec Angular
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 😉
🚀 Partir du bon pied sur Angular
Ce que vous allez apprendre avec moi 😊
Notre objectif est de construire et déployer une application Angular de génération de mots de passe forts !
➡️ Pour cela, il faudra passer par différents apprentissages :
➡️ Pour cela, il faudra passer par différents apprentissages :
📖 Comprendre les basiques du framework Angular
🤖 Utiliser la CLI d'Angular pour mettre en place et développer des applications
✂️ Comprendre comment découper votre application
🤖 Utiliser la CLI d'Angular pour mettre en place et développer des applications
✂️ Comprendre comment découper votre application
🚀 Découvrir les directives d'attributs et structurelles
🖼️ Découvrir les Composants et leur puissance
💉 Comprendre la notion de services et l'Injection de Dépendances
🖼️ Découvrir les Composants et leur puissance
💉 Comprendre la notion de services et l'Injection de Dépendances
🛠️ Construire une application front-end réactive
🧪 Créer des tests unitaires et maintenir la qualité du code
🚀 Déployer manuellement ou automatiquement votre application
🧪 Créer des tests unitaires et maintenir la qualité du code
🚀 Déployer manuellement ou automatiquement votre application
Rendre simple ce qui semble complexe ✨
Angular est connu pour être une technologie extrêmement puissante mais dont la courbe d'apprentissage est assez raide ! J'ai donné des centaines d'heures de cours à tout type de profils (juniors, séniors, bootcamps ...) et j'en ai tiré une méthode d'apprentissage qui a fait ses preuves !
Dans cette formation, vous avancerez à votre rythme sur plus de 200 vidéos et ressources tout en évaluant votre évolution grâce à des exercices pratiques et des quizzs !
Dans cette formation, vous avancerez à votre rythme sur plus de 200 vidéos et ressources tout en évaluant votre évolution grâce à des exercices pratiques et des quizzs !
Créez votre première application Angular
On n'apprend jamais mieux que par la pratique ! Vous voulez en savoir plus sur Angular sans vous noyer dans la complexité et la raideur de la courbe d'apprentissage ?
Créez étape après étape une application Angular tout en comprenant en profondeur les concepts les plus importants.
Obtenez des bases solides : Directives, Composants, Services et Injection de Dépendances. Même les tests unitaires y passeront, vous pourrez alors vous assurer de la qualité de votre code !
Créez étape après étape une application Angular tout en comprenant en profondeur les concepts les plus importants.
Obtenez des bases solides : Directives, Composants, Services et Injection de Dépendances. Même les tests unitaires y passeront, vous pourrez alors vous assurer de la qualité de votre code !
- 79 € ou 3 paiements mensuels de 30 €
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.
👍 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 30 €
🚀 10 heures de cours en 210 vidéos et ressources !
N'attendez plus et passez à l'action : des centaines de vidéos et de ressources pour avancer à votre rythme et valider votre compréhension grâce à des exercices et des quizz !
Questions fréquemment posées
Quel niveau dois-je avoir pour me lancer dans cette formation ?
Pour pouvoir suivre cette formation, un bon niveau est nécessaire en HTML et en Javascript. Des connaissances en Programmation Orientée Objets sont aussi nécessaires.
Comment savoir si j'évolue correctement dans cette formation ?
Pour que vous puissiez tous savoir où vous en êtes, vous aurez accès à des exercices corrigés (évaluation par la pratique) ainsi que des quizz composés de questions/réponses (évaluation par la théorie).
Est-il nécessaire de payer certains outils pour suivre cette formation ?
Absolument pas, tous les outils utilisés au sein de ce cours sont entièrement gratuits afin que tout le monde puisse la suivre sans rien débourser de plus !
Détail des cours et exercices
Sommaire de la formation
Introduction à la formation (10 minutes)
Le déroulé de la formation
Aperçu- 3 mins
- 88,2 Mo
L'environnement de travail
Aperçu- 2 mins
- 17,7 Mo
💻 La CLI d'Angular
Aperçu- 3 mins
- 42 Mo
Mise en place de VSCode
Aperçu- 2 mins
- 35,3 Mo
⚙️ VSCode : Activer Emmet pour nos fichiers TypeScript
AperçuTirer profit au mieux de la formation
Aperçu- 2 mins
- 79,5 Mo
Les pré-requis avant la formation
Aperçu- 2 mins
- 15,5 Mo
📣 Mes conférences sur Angular
Aperçu- 1 min
- 30,5 Mo
📁 GitHub : Retrouvez le code de la formation
Aperçu🔎 CheatSheet : La CLI d'Angular
AperçuMise en place (20 minutes)
💻 ng new : la notion de Workspace Angular
Aperçu- 4 mins
- 74,7 Mo
💻 ng generate application : Créer une application Angular
Aperçu- 4 mins
- 90,9 Mo
💻 ng serve : lancer l'application dans le navigateur
Aperçu- 3 mins
- 42,7 Mo
Comment se lance notre application ?
Aperçu- 4 mins
- 103 Mo
🎨 CSS local vs CSS global
Aperçu- 3 mins
- 34,6 Mo
🎨 Importer du CSS dans une application Angular
Aperçu- 8 mins
- 245 Mo
Les Directives d'Attribut (50 minutes)
Introduction aux directives d'attributs
Aperçu- 3 mins
- 40,8 Mo
Créer une directive Highlight
Aperçu- 5 mins
- 55,6 Mo
Déclarer la directive dans le AppModule
Aperçu- 2 mins
- 36,6 Mo
ElementRef : travailler sur l'élément HTML
Aperçu- 5 mins
- 92,1 Mo
@HostListener : écouter un événement de l'élément HTML
Aperçu- 7 mins
- 157 Mo
Changer la backgroundColor de l'élément HTML
Aperçu- 4 mins
- 85,1 Mo
@HostBinding : se lier à une propriété de l'élément HTML
Aperçu- 4 mins
- 92,1 Mo
@Input : récupérer une info dans un attribut de l'élément HTML
Aperçu- 5 mins
- 127 Mo
Cycle de vie : ngOnInit
Aperçu- 5 mins
- 130 Mo
💪 Exercice : créer une Directive NoOpen
Aperçu- 2 mins
- 28,2 Mo
✅ Correction : créer une Directive NoOpen
Aperçu- 5 mins
- 101 Mo
💪 Exercice : créer une Directive Confirm
Aperçu- 2 mins
- 39,3 Mo
✅ Correction : créer une Directive Confirm
Aperçu- 6 mins
- 133 Mo
🚀 Conclusions de la section
Aperçu- 3 mins
- 38 Mo
❔Quizz : Introduction aux directives d'attributs
📁 GitHub : Retrouver le code de fin de section
AperçuLes Composants (1 heure et 20 minutes)
Introduction aux Composants
Aperçu- 3 mins
- 29 Mo
Mise en place
Aperçu- 3 mins
- 51,5 Mo
Créer une directive UserProfile
Aperçu- 4 mins
- 85,4 Mo
Le décorateur @Component et son template
Aperçu- 3 mins
- 64,2 Mo
L'interpolation : projeter des valeurs dans le template HTML
Aperçu- 5 mins
- 125 Mo
Les pipes : formater des valeurs dans vos interpolations
Aperçu- 5 mins
- 131 Mo
Property Binding : lier une valeur à une propriété d'un élément HTML
Aperçu- 5 mins
- 104 Mo
CSS et scope
Aperçu- 3 mins
- 67,3 Mo
Class Binding : faire apparaitre ou pas une classe CSS
Aperçu- 4 mins
- 89,6 Mo
Event Binding : écouter un événement sur un élément HTML
Aperçu- 5 mins
- 123 Mo
La variable spéciale $event
Aperçu- 2 mins
- 51,6 Mo
Event Filtering : filtrer les événements du clavier !
Aperçu- 6 mins
- 228 Mo
Découverte de Zone.js et son rôle
Aperçu- 6 mins
- 138 Mo
Le sélecteur d'éléments
Aperçu- 2 mins
- 47,6 Mo
💪 Exercice : créer un Compteur
Aperçu- 3 mins
- 34,1 Mo
✅ Correction : créer un Compteur
Aperçu- 7 mins
- 172 Mo
Coding style et hiérarchie de composants
- 5 mins
- 103 Mo
Les variables de Template
- 4 mins
- 136 Mo
@ViewChild : atteindre une variable dans le template
- 4 mins
- 142 Mo
Cycle de vie : ngAfterViewInit
- 4 mins
- 96,3 Mo
🚀 Conclusion de la section
- 5 mins
- 61,5 Mo
Refactoring du playground
- 3 mins
- 108 Mo
❔ Quizz : introduction aux Composants Angular
📁 GitHub : Retrouver le code de fin de section
Projet PasswordGenerator : Mise en place (30 minutes)
Création de l'application password-generator
- 3 mins
- 80,8 Mo
Refactoring du AppComponent et ng serve !
- 3 mins
- 49,8 Mo
🎨 Mise en place de la structure HTML/CSS
- 7 mins
- 139 Mo
🧠 Comment réfléchir et penser notre future application ?
- 3 mins
- 34,9 Mo
Etat de l'application et bindings
- 3 mins
- 61,6 Mo
Event Binding : écouter l'<input> length
- 6 mins
- 146 Mo
Event Binding : écouter les checkboxes
- 4 mins
- 140 Mo
Refactoring : mieux gérer nos checkboxes
- 6 mins
- 164 Mo
📁 GitHub : Retrouver le code de fin de section
Introduction aux Tests Unitaires dans Angular (50 minutes)
Introduction aux tests unitaires dans Angular
- 2 mins
- 21,7 Mo
Notions de base : la Fixture et le TestBed
- 3 mins
- 29,4 Mo
💻 ng test : lancer les tests unitaires
- 2 mins
- 15 Mo
Notre première spécification
- 7 mins
- 132 Mo
TestBed : configurer le framework Angular depuis nos tests
- 5 mins
- 84,8 Mo
La Fixture : notre navigateur virtuel
- 4 mins
- 92 Mo
Lancer la détection de changements avec detectChanges()
- 3 mins
- 96,6 Mo
Tester le click sur un bouton
- 5 mins
- 177 Mo
Automatiser la détection du changement grâce autoDetectChanges()
- 2 mins
- 26,7 Mo
Tester nos checkboxes
- 5 mins
- 130 Mo
Tester notre <input> length
- 4 mins
- 100 Mo
Refactoriser nos tests avec beforeEach()
- 3 mins
- 124 Mo
Installer Spectator pour écrire des tests plus facilement
- 2 mins
- 72,7 Mo
Utiliser Spectator pour écrire des tests plus simples
- 9 mins
- 374 Mo
🚀 Conclusion de la section
- 2 mins
- 17,6 Mo
❔ Quizz : introduction aux tests unitaires
📁 GitHub : Retrouver le code de fin de section
Les Directives d'Attribut (1 heure)
Introduction
- 2 mins
- 38,4 Mo
La propriété exportAs d'une Directive
- 4 mins
- 89,8 Mo
@Output & EventEmitter : créer des événements customs !
- 5 mins
- 142 Mo
$event : faire passer des données dans un @Output
- 3 mins
- 105 Mo
Créer une Directive Model pour écouter facilement les <input>
- 9 mins
- 191 Mo
Donner une valeur par défaut à la Directive Model
- 5 mins
- 116 Mo
Découverte du Two Way Databinding avec Angular
- 4 mins
- 63,6 Mo
Le FormsModule et la directive NgModel
- 3 mins
- 58,2 Mo
Créer une Directive SetClasses
- 10 mins
- 255 Mo
Cycle de vie : ngOnChanges
- 7 mins
- 247 Mo
Les Directives déjà livrées : NgStyle et NgClass
- 4 mins
- 89 Mo
💪 Exercice : créer une Directive ForceLower
- 2 mins
- 36,9 Mo
✅ Correction : créer une Directive ForceLower
- 5 mins
- 114 Mo
🚀 Conclusion de la section
- 3 mins
- 41 Mo
❔ Quizz : les directives d'attribut (avancé)
📁 GitHub : Retrouver le code de fin de section
Tester les Directives d'Attribut (15 minutes)
Mise en place de nos tests unitaires
- 5 mins
- 120 Mo
Mise en place du TestBed
- 5 mins
- 160 Mo
Ecrire plus facilement avec Spectator
- 5 mins
- 213 Mo
Utiliser SpectatorDirective pour des tests encore plus simples
- 3 mins
- 129 Mo
📁 GitHub : Retrouver le code de fin de section
Projet PasswordGenerator : Utiliser les Directives (6 minutes)
Passage en revue du PasswordGenerator
- 2 mins
- 60,9 Mo
Utiliser ngModel pour mieux écouter les <input>
- 4 mins
- 157 Mo
📁 GitHub : Retrouver le code de fin de section
Communication entre Composants (20 minutes)
Mise en place : un composant Newsletter
- 4 mins
- 92,3 Mo
Rappel : le décorateur @Input
- 4 mins
- 92,4 Mo
Rappel : le décorateur @Output
- 4 mins
- 102 Mo
Projeter du contenu dans un Composant avec <ng-content>
- 6 mins
- 155 Mo
💪 Exercice : créer un Composant Card
- 2 mins
- 40,5 Mo
✅ Correction : créer un Composant Card
- 3 mins
- 56 Mo
🚀 Conclusion de la section
- 3 mins
- 36,8 Mo
❔ Quizz : la communication entre les composants
📁 GitHub : Retrouver le code de fin de section
Projet PasswordGenerator : Découper l'application en Composants (1 heure et 40 minutes)
Comment décider de créer des composants ou pas ?
- 4 mins
- 102 Mo
💻 ng generate component : la CLI peut nous aider à développer
- 4 mins
- 45,2 Mo
Le composant PasswordDisplayComponent
- 4 mins
- 128 Mo
Le composant PasswordControlsComponent
- 5 mins
- 130 Mo
Le composant PasswordSettingsComponent
- 7 mins
- 213 Mo
Améliorer la DX avec un type Settings
- 2 mins
- 35,6 Mo
Le problème des @Input et des objets (immutabilité)
- 9 mins
- 367 Mo
Mise à jour des tests de l'application
- 3 mins
- 95,6 Mo
Entracte : les avantages de notre découpage
- 2 mins
- 36,7 Mo
Test unitaire du PasswordControlsComponent
- 8 mins
- 252 Mo
Test d'intégration du PasswordControlsComponent
- 5 mins
- 177 Mo
La notion de Spy dans les tests unitaires
- 3 mins
- 103 Mo
Test d'intégration du PasswordDisplayComponent
- 8 mins
- 276 Mo
Faciliter les tests d'intégration avec SpectatorHost
- 3 mins
- 111 Mo
Mise en place des tests du PasswordSettingsComponent
- 8 mins
- 230 Mo
Test d'intégration du PasswordSettingsComponent sans @Input
- 9 mins
- 353 Mo
Test d'intégration du PasswordSettingsComponent avec @Input
- 4 mins
- 147 Mo
Test de l'@Output du PasswordSettingsComponent
- 9 mins
- 396 Mo
Tests du PasswordSettingsComponent avec Spectator
- 10 mins
- 431 Mo
🚀 Conclusion de la section
- 3 mins
- 22,9 Mo
📁 GitHub : Retrouver le code de fin de section
Les Directives Structurelles (1 heure et 10 minutes)
Introduction aux directives structurelles
- 2 mins
- 18,5 Mo
Les éléments <ng-template> et <ng-container>
- 2 mins
- 31,6 Mo
Récupérer un <ng-container> en tant que ViewContainerRef
- 4 mins
- 98,8 Mo
createEmbeddedView() : Projeter un TemplateRef dans un ViewContainerRef
- 4 mins
- 135 Mo
createComponent() : Projeter un composant dynamiquement dans un ViewContainerRef
- 3 mins
- 82,6 Mo
Context et attributs let-* : projeter des données dans une vue imbriquée
- 4 mins
- 122 Mo
Créer une Directive Structurelle If
- 6 mins
- 118 Mo
Projeter le TemplateRef dans le ViewContainerRef si la condition est vraie
- 3 mins
- 54,1 Mo
Cycle de vie : ngOnChanges
- 3 mins
- 57,2 Mo
Utiliser l'astérisque (*) pour un code plus clair
- 3 mins
- 40,6 Mo
Donner la possibilité de faire un "Else" avec notre Directive If
- 3 mins
- 69,7 Mo
La microsyntaxe (ou "short hand syntax")
- 6 mins
- 134 Mo
Créer une Directive Structurelle Loop
- 9 mins
- 219 Mo
La notion d' $implicit dans le Context
- 2 mins
- 44,4 Mo
Modifier l'@Input "loop" en "loopOf"
- 4 mins
- 87,7 Mo
Cycle de vie : ngDoCheck
- 8 mins
- 201 Mo
Les Directives déjà livrées : NgFor et ngIf
- 2 mins
- 65,5 Mo
💪 Exercice : créer une Directive Structurelle Repeat
- 3 mins
- 74,5 Mo
✅ Correction : créer une Directive Structurelle Repeat
- 5 mins
- 91,1 Mo
🚀 Conclusion de la section
- 4 mins
- 47,2 Mo
❔ Quizz : les directives structurelles
📁 GitHub : Retrouver le code de fin de section
Projet PasswordGenerator : Utiliser les Directives Structurelles (8 minutes)
Utiliser la Directive NgIf dans notre projet
- 4 mins
- 136 Mo
Mettre à jour les tests unitaires
- 5 mins
- 213 Mo
📁 GitHub : Retrouver le code de fin de section
Services et Injection de Dépendances (1 heure et 10 minutes)
Introduction à l'Injection de Dépendances dans Angular
- 3 mins
- 32,9 Mo
Mise en place du cours
- 5 mins
- 101 Mo
Création de notre premier service : le TaxesService
- 3 mins
- 51,1 Mo
🛑 L'impossibilité de tester notre service
- 5 mins
- 109 Mo
L'injection de dépendances
- 5 mins
- 89,2 Mo
Providers : instruire les injecteurs de dépendances
- 4 mins
- 89,7 Mo
Utiliser le TestBed pour injecter un AUTRE service
- 4 mins
- 127 Mo
La notion de Spy dans les tests unitaires
- 3 mins
- 108 Mo
La notion de Mock dans les tests unitaires
- 4 mins
- 121 Mo
Les différents types de Provider
- 4 mins
- 105 Mo
La question des instances de service
- 5 mins
- 136 Mo
Les injecteurs hiérarchiques d'Angular
- 5 mins
- 96,1 Mo
Entracte : ce que nous avons compris jusqu'ici
- 4 mins
- 43,9 Mo
@Injectable et Root Injector
- 4 mins
- 69,8 Mo
@Inject : injecter autre chose qu'un objet !
- 6 mins
- 125 Mo
Mettre à jour les tests unitaires
- 5 mins
- 183 Mo
Tester plus facilement avec Spectator
- 6 mins
- 236 Mo
🚀 Conclusion de la section
- 3 mins
- 45,1 Mo
❔ Quizz : les injecteurs de dépendances d'Angular
📁 GitHub : Retrouver le code de fin de section
Projet PasswordGenerator : Service de génération de mot de passe (17 minutes)
Installer une librairie de génération de mots de passe
- 4 mins
- 88,7 Mo
Les limites de l'utilisation du Generator
- 4 mins
- 130 Mo
Service et Injection de dépendances
- 9 mins
- 373 Mo
Renforcer le contrôle et la DX avec le type Settings
- 2 mins
- 37,8 Mo
📁 GitHub : Retrouver le code de fin de section
Les Modules (15 minutes)
Introduction aux Modules Angular
- 1 min
- 13,9 Mo
Créer un module PasswordGeneratorModule
- 4 mins
- 104 Mo
Le tableau des exports
- 3 mins
- 72,6 Mo
Un module doit être indépendant !
- 3 mins
- 78,4 Mo
Fournir le service directement dans le module
- 2 mins
- 53,6 Mo
Mettre à jour les tests unitaires
- 2 mins
- 77,6 Mo
🚀 Conclusion de la section
- 3 mins
- 26,7 Mo
❔ Quizz : les modules Angular
📁 GitHub : Retrouver le code de fin de section
Introduction au Test Driven Development dans Angular (35 minutes)
Introduction au TDD dans Angular
- 3 mins
- 43,4 Mo
Implémenter un nouveau bouton "Copier"
- 12 mins
- 519 Mo
Implémenter la copie du mot de passe
- 7 mins
- 264 Mo
💪 Exercice : Faire apparaître un message lors de la copie du mot de passe
- 2 mins
- 36,1 Mo
✅ Correction : Faire apparaître un message lors de la copie du mot de passe
- 4 mins
- 130 Mo
💪 Exercice : Faire disparaitre le message lorsqu'un nouveau mot de passe est généré
- 3 mins
- 62,4 Mo
✅ Correction : Faire disparaitre le message lorsqu'un nouveau mot de passe est généré
- 9 mins
- 352 Mo
🚀 Conclusion de la section
- 2 mins
- 15,7 Mo
❔ Quizz : Test Driven Development dans Angular
📁 GitHub : Retrouver le code de fin de section
Déploiement d'une application Angular sur Netlify (15 minutes)
Introduction au déploiement avec Angular
- 2 mins
- 19 Mo
💻 ng build : construire l'application finale
- 3 mins
- 75,9 Mo
Présentation du service Netlify
- 4 mins
- 85,8 Mo
💻 ng deploy : la CLI nous aide à déployer !
- 6 mins
- 225 Mo
🚀 Conclusion de la section
- 2 mins
- 91,9 Mo