🎙 Formations
💌 Newsletter
👨💻 Qui suis-je ?
Se connecter
🎙 Formations
💌 Newsletter
👨💻 Qui suis-je ?
Se connecter
Introduction au Framework Angular
Acheter maintenant
En savoir plus
Introduction à la formation (10 minutes)
Le déroulé de la formation
L'environnement de travail
💻 La CLI d'Angular
Mise en place de VSCode
⚙️ VSCode : Activer Emmet pour nos fichiers TypeScript
Tirer profit au mieux de la formation
Les pré-requis avant la formation
📣 Mes conférences sur Angular
📁 GitHub : Retrouvez le code de la formation
🔎 CheatSheet : La CLI d'Angular
Mise en place (20 minutes)
💻 ng new : la notion de Workspace Angular
💻 ng generate application : Créer une application Angular
💻 ng serve : lancer l'application dans le navigateur
Comment se lance notre application ?
🎨 CSS local vs CSS global
🎨 Importer du CSS dans une application Angular
Les Directives d'Attribut (50 minutes)
Introduction aux directives d'attributs
Créer une directive Highlight
Déclarer la directive dans le AppModule
ElementRef : travailler sur l'élément HTML
@HostListener : écouter un événement de l'élément HTML
Changer la backgroundColor de l'élément HTML
@HostBinding : se lier à une propriété de l'élément HTML
@Input : récupérer une info dans un attribut de l'élément HTML
Cycle de vie : ngOnInit
💪 Exercice : créer une Directive NoOpen
✅ Correction : créer une Directive NoOpen
💪 Exercice : créer une Directive Confirm
✅ Correction : créer une Directive Confirm
🚀 Conclusions de la section
❔Quizz : Introduction aux directives d'attributs
📁 GitHub : Retrouver le code de fin de section
Les Composants (1 heure et 20 minutes)
Introduction aux Composants
Mise en place
Créer une directive UserProfile
Le décorateur @Component et son template
L'interpolation : projeter des valeurs dans le template HTML
Les pipes : formater des valeurs dans vos interpolations
Property Binding : lier une valeur à une propriété d'un élément HTML
CSS et scope
Class Binding : faire apparaitre ou pas une classe CSS
Event Binding : écouter un événement sur un élément HTML
La variable spéciale $event
Event Filtering : filtrer les événements du clavier !
Découverte de Zone.js et son rôle
Le sélecteur d'éléments
💪 Exercice : créer un Compteur
✅ Correction : créer un Compteur
Coding style et hiérarchie de composants
Les variables de Template
@ViewChild : atteindre une variable dans le template
Cycle de vie : ngAfterViewInit
🚀 Conclusion de la section
Refactoring du playground
❔ 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
Refactoring du AppComponent et ng serve !
🎨 Mise en place de la structure HTML/CSS
🧠 Comment réfléchir et penser notre future application ?
Etat de l'application et bindings
Event Binding : écouter l'<input> length
Event Binding : écouter les checkboxes
Refactoring : mieux gérer nos checkboxes
📁 GitHub : Retrouver le code de fin de section
Introduction aux Tests Unitaires dans Angular (50 minutes)
Introduction aux tests unitaires dans Angular
Notions de base : la Fixture et le TestBed
💻 ng test : lancer les tests unitaires
Notre première spécification
TestBed : configurer le framework Angular depuis nos tests
La Fixture : notre navigateur virtuel
Lancer la détection de changements avec detectChanges()
Tester le click sur un bouton
Automatiser la détection du changement grâce autoDetectChanges()
Tester nos checkboxes
Tester notre <input> length
Refactoriser nos tests avec beforeEach()
Installer Spectator pour écrire des tests plus facilement
Utiliser Spectator pour écrire des tests plus simples
🚀 Conclusion de la section
❔ Quizz : introduction aux tests unitaires
📁 GitHub : Retrouver le code de fin de section
Les Directives d'Attribut (1 heure)
Introduction
La propriété exportAs d'une Directive
@Output & EventEmitter : créer des événements customs !
$event : faire passer des données dans un @Output
Créer une Directive Model pour écouter facilement les <input>
Donner une valeur par défaut à la Directive Model
Découverte du Two Way Databinding avec Angular
Le FormsModule et la directive NgModel
Créer une Directive SetClasses
Cycle de vie : ngOnChanges
Les Directives déjà livrées : NgStyle et NgClass
💪 Exercice : créer une Directive ForceLower
✅ Correction : créer une Directive ForceLower
🚀 Conclusion de la section
❔ 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
Mise en place du TestBed
Ecrire plus facilement avec Spectator
Utiliser SpectatorDirective pour des tests encore plus simples
📁 GitHub : Retrouver le code de fin de section
Projet PasswordGenerator : Utiliser les Directives (6 minutes)
Passage en revue du PasswordGenerator
Utiliser ngModel pour mieux écouter les <input>
📁 GitHub : Retrouver le code de fin de section
Communication entre Composants (20 minutes)
Mise en place : un composant Newsletter
Rappel : le décorateur @Input
Rappel : le décorateur @Output
Projeter du contenu dans un Composant avec <ng-content>
💪 Exercice : créer un Composant Card
✅ Correction : créer un Composant Card
🚀 Conclusion de la section
❔ 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 ?
💻 ng generate component : la CLI peut nous aider à développer
Le composant PasswordDisplayComponent
Le composant PasswordControlsComponent
Le composant PasswordSettingsComponent
Améliorer la DX avec un type Settings
Le problème des @Input et des objets (immutabilité)
Mise à jour des tests de l'application
Entracte : les avantages de notre découpage
Test unitaire du PasswordControlsComponent
Test d'intégration du PasswordControlsComponent
La notion de Spy dans les tests unitaires
Test d'intégration du PasswordDisplayComponent
Faciliter les tests d'intégration avec SpectatorHost
Mise en place des tests du PasswordSettingsComponent
Test d'intégration du PasswordSettingsComponent sans @Input
Test d'intégration du PasswordSettingsComponent avec @Input
Test de l'@Output du PasswordSettingsComponent
Tests du PasswordSettingsComponent avec Spectator
🚀 Conclusion de la section
📁 GitHub : Retrouver le code de fin de section
Les Directives Structurelles (1 heure et 10 minutes)
Introduction aux directives structurelles
Les éléments <ng-template> et <ng-container>
Récupérer un <ng-container> en tant que ViewContainerRef
createEmbeddedView() : Projeter un TemplateRef dans un ViewContainerRef
createComponent() : Projeter un composant dynamiquement dans un ViewContainerRef
Context et attributs let-* : projeter des données dans une vue imbriquée
Créer une Directive Structurelle If
Projeter le TemplateRef dans le ViewContainerRef si la condition est vraie
Cycle de vie : ngOnChanges
Utiliser l'astérisque (*) pour un code plus clair
Donner la possibilité de faire un "Else" avec notre Directive If
La microsyntaxe (ou "short hand syntax")
Créer une Directive Structurelle Loop
La notion d' $implicit dans le Context
Modifier l'@Input "loop" en "loopOf"
Cycle de vie : ngDoCheck
Les Directives déjà livrées : NgFor et ngIf
💪 Exercice : créer une Directive Structurelle Repeat
✅ Correction : créer une Directive Structurelle Repeat
🚀 Conclusion de la section
❔ 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
Mettre à jour les tests unitaires
📁 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
Mise en place du cours
Création de notre premier service : le TaxesService
🛑 L'impossibilité de tester notre service
L'injection de dépendances
Providers : instruire les injecteurs de dépendances
Utiliser le TestBed pour injecter un AUTRE service
La notion de Spy dans les tests unitaires
La notion de Mock dans les tests unitaires
Les différents types de Provider
La question des instances de service
Les injecteurs hiérarchiques d'Angular
Entracte : ce que nous avons compris jusqu'ici
@Injectable et Root Injector
@Inject : injecter autre chose qu'un objet !
Mettre à jour les tests unitaires
Tester plus facilement avec Spectator
🚀 Conclusion de la section
❔ 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
Les limites de l'utilisation du Generator
Service et Injection de dépendances
Renforcer le contrôle et la DX avec le type Settings
📁 GitHub : Retrouver le code de fin de section
Les Modules (15 minutes)
Introduction aux Modules Angular
Créer un module PasswordGeneratorModule
Le tableau des exports
Un module doit être indépendant !
Fournir le service directement dans le module
Mettre à jour les tests unitaires
🚀 Conclusion de la section
❔ 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
Implémenter un nouveau bouton "Copier"
Implémenter la copie du mot de passe
💪 Exercice : Faire apparaître un message lors de la copie du mot de passe
✅ Correction : Faire apparaître un message lors de la copie du mot de passe
💪 Exercice : Faire disparaitre le message lorsqu'un nouveau mot de passe est généré
✅ Correction : Faire disparaitre le message lorsqu'un nouveau mot de passe est généré
🚀 Conclusion de la section
❔ 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
💻 ng build : construire l'application finale
Présentation du service Netlify
💻 ng deploy : la CLI nous aide à déployer !
🚀 Conclusion de la section
Programmes
Cours
Section
Cours
Déclarer la directive dans le AppModule
Déclarer la directive dans le AppModule
Introduction au Framework Angular
Acheter maintenant
En savoir plus
Introduction à la formation (10 minutes)
Le déroulé de la formation
L'environnement de travail
💻 La CLI d'Angular
Mise en place de VSCode
⚙️ VSCode : Activer Emmet pour nos fichiers TypeScript
Tirer profit au mieux de la formation
Les pré-requis avant la formation
📣 Mes conférences sur Angular
📁 GitHub : Retrouvez le code de la formation
🔎 CheatSheet : La CLI d'Angular
Mise en place (20 minutes)
💻 ng new : la notion de Workspace Angular
💻 ng generate application : Créer une application Angular
💻 ng serve : lancer l'application dans le navigateur
Comment se lance notre application ?
🎨 CSS local vs CSS global
🎨 Importer du CSS dans une application Angular
Les Directives d'Attribut (50 minutes)
Introduction aux directives d'attributs
Créer une directive Highlight
Déclarer la directive dans le AppModule
ElementRef : travailler sur l'élément HTML
@HostListener : écouter un événement de l'élément HTML
Changer la backgroundColor de l'élément HTML
@HostBinding : se lier à une propriété de l'élément HTML
@Input : récupérer une info dans un attribut de l'élément HTML
Cycle de vie : ngOnInit
💪 Exercice : créer une Directive NoOpen
✅ Correction : créer une Directive NoOpen
💪 Exercice : créer une Directive Confirm
✅ Correction : créer une Directive Confirm
🚀 Conclusions de la section
❔Quizz : Introduction aux directives d'attributs
📁 GitHub : Retrouver le code de fin de section
Les Composants (1 heure et 20 minutes)
Introduction aux Composants
Mise en place
Créer une directive UserProfile
Le décorateur @Component et son template
L'interpolation : projeter des valeurs dans le template HTML
Les pipes : formater des valeurs dans vos interpolations
Property Binding : lier une valeur à une propriété d'un élément HTML
CSS et scope
Class Binding : faire apparaitre ou pas une classe CSS
Event Binding : écouter un événement sur un élément HTML
La variable spéciale $event
Event Filtering : filtrer les événements du clavier !
Découverte de Zone.js et son rôle
Le sélecteur d'éléments
💪 Exercice : créer un Compteur
✅ Correction : créer un Compteur
Coding style et hiérarchie de composants
Les variables de Template
@ViewChild : atteindre une variable dans le template
Cycle de vie : ngAfterViewInit
🚀 Conclusion de la section
Refactoring du playground
❔ 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
Refactoring du AppComponent et ng serve !
🎨 Mise en place de la structure HTML/CSS
🧠 Comment réfléchir et penser notre future application ?
Etat de l'application et bindings
Event Binding : écouter l'<input> length
Event Binding : écouter les checkboxes
Refactoring : mieux gérer nos checkboxes
📁 GitHub : Retrouver le code de fin de section
Introduction aux Tests Unitaires dans Angular (50 minutes)
Introduction aux tests unitaires dans Angular
Notions de base : la Fixture et le TestBed
💻 ng test : lancer les tests unitaires
Notre première spécification
TestBed : configurer le framework Angular depuis nos tests
La Fixture : notre navigateur virtuel
Lancer la détection de changements avec detectChanges()
Tester le click sur un bouton
Automatiser la détection du changement grâce autoDetectChanges()
Tester nos checkboxes
Tester notre <input> length
Refactoriser nos tests avec beforeEach()
Installer Spectator pour écrire des tests plus facilement
Utiliser Spectator pour écrire des tests plus simples
🚀 Conclusion de la section
❔ Quizz : introduction aux tests unitaires
📁 GitHub : Retrouver le code de fin de section
Les Directives d'Attribut (1 heure)
Introduction
La propriété exportAs d'une Directive
@Output & EventEmitter : créer des événements customs !
$event : faire passer des données dans un @Output
Créer une Directive Model pour écouter facilement les <input>
Donner une valeur par défaut à la Directive Model
Découverte du Two Way Databinding avec Angular
Le FormsModule et la directive NgModel
Créer une Directive SetClasses
Cycle de vie : ngOnChanges
Les Directives déjà livrées : NgStyle et NgClass
💪 Exercice : créer une Directive ForceLower
✅ Correction : créer une Directive ForceLower
🚀 Conclusion de la section
❔ 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
Mise en place du TestBed
Ecrire plus facilement avec Spectator
Utiliser SpectatorDirective pour des tests encore plus simples
📁 GitHub : Retrouver le code de fin de section
Projet PasswordGenerator : Utiliser les Directives (6 minutes)
Passage en revue du PasswordGenerator
Utiliser ngModel pour mieux écouter les <input>
📁 GitHub : Retrouver le code de fin de section
Communication entre Composants (20 minutes)
Mise en place : un composant Newsletter
Rappel : le décorateur @Input
Rappel : le décorateur @Output
Projeter du contenu dans un Composant avec <ng-content>
💪 Exercice : créer un Composant Card
✅ Correction : créer un Composant Card
🚀 Conclusion de la section
❔ 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 ?
💻 ng generate component : la CLI peut nous aider à développer
Le composant PasswordDisplayComponent
Le composant PasswordControlsComponent
Le composant PasswordSettingsComponent
Améliorer la DX avec un type Settings
Le problème des @Input et des objets (immutabilité)
Mise à jour des tests de l'application
Entracte : les avantages de notre découpage
Test unitaire du PasswordControlsComponent
Test d'intégration du PasswordControlsComponent
La notion de Spy dans les tests unitaires
Test d'intégration du PasswordDisplayComponent
Faciliter les tests d'intégration avec SpectatorHost
Mise en place des tests du PasswordSettingsComponent
Test d'intégration du PasswordSettingsComponent sans @Input
Test d'intégration du PasswordSettingsComponent avec @Input
Test de l'@Output du PasswordSettingsComponent
Tests du PasswordSettingsComponent avec Spectator
🚀 Conclusion de la section
📁 GitHub : Retrouver le code de fin de section
Les Directives Structurelles (1 heure et 10 minutes)
Introduction aux directives structurelles
Les éléments <ng-template> et <ng-container>
Récupérer un <ng-container> en tant que ViewContainerRef
createEmbeddedView() : Projeter un TemplateRef dans un ViewContainerRef
createComponent() : Projeter un composant dynamiquement dans un ViewContainerRef
Context et attributs let-* : projeter des données dans une vue imbriquée
Créer une Directive Structurelle If
Projeter le TemplateRef dans le ViewContainerRef si la condition est vraie
Cycle de vie : ngOnChanges
Utiliser l'astérisque (*) pour un code plus clair
Donner la possibilité de faire un "Else" avec notre Directive If
La microsyntaxe (ou "short hand syntax")
Créer une Directive Structurelle Loop
La notion d' $implicit dans le Context
Modifier l'@Input "loop" en "loopOf"
Cycle de vie : ngDoCheck
Les Directives déjà livrées : NgFor et ngIf
💪 Exercice : créer une Directive Structurelle Repeat
✅ Correction : créer une Directive Structurelle Repeat
🚀 Conclusion de la section
❔ 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
Mettre à jour les tests unitaires
📁 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
Mise en place du cours
Création de notre premier service : le TaxesService
🛑 L'impossibilité de tester notre service
L'injection de dépendances
Providers : instruire les injecteurs de dépendances
Utiliser le TestBed pour injecter un AUTRE service
La notion de Spy dans les tests unitaires
La notion de Mock dans les tests unitaires
Les différents types de Provider
La question des instances de service
Les injecteurs hiérarchiques d'Angular
Entracte : ce que nous avons compris jusqu'ici
@Injectable et Root Injector
@Inject : injecter autre chose qu'un objet !
Mettre à jour les tests unitaires
Tester plus facilement avec Spectator
🚀 Conclusion de la section
❔ 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
Les limites de l'utilisation du Generator
Service et Injection de dépendances
Renforcer le contrôle et la DX avec le type Settings
📁 GitHub : Retrouver le code de fin de section
Les Modules (15 minutes)
Introduction aux Modules Angular
Créer un module PasswordGeneratorModule
Le tableau des exports
Un module doit être indépendant !
Fournir le service directement dans le module
Mettre à jour les tests unitaires
🚀 Conclusion de la section
❔ 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
Implémenter un nouveau bouton "Copier"
Implémenter la copie du mot de passe
💪 Exercice : Faire apparaître un message lors de la copie du mot de passe
✅ Correction : Faire apparaître un message lors de la copie du mot de passe
💪 Exercice : Faire disparaitre le message lorsqu'un nouveau mot de passe est généré
✅ Correction : Faire disparaitre le message lorsqu'un nouveau mot de passe est généré
🚀 Conclusion de la section
❔ 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
💻 ng build : construire l'application finale
Présentation du service Netlify
💻 ng deploy : la CLI nous aide à déployer !
🚀 Conclusion de la section
📖 Documentation officielle sur les Directives d'Attribut :
https://angular.io/guide/attribute-directives