Se connecter
Lior Chamla : Développez vous bien !/Introduction au Framework Angular
Acheter maintenant

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

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
👀 Voir ce que contient le pack "Guide Complet"

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

🚀 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 : 
📖 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
🚀 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
🛠️ 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

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

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

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

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

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
L'environnement de travail
Aperçu
💻 La CLI d'Angular
Aperçu
Mise en place de VSCode
Aperçu
⚙️ VSCode : Activer Emmet pour nos fichiers TypeScript
Aperçu
Tirer profit au mieux de la formation
Aperçu
Les pré-requis avant la formation
Aperçu
📣 Mes conférences sur Angular
Aperçu
📁 GitHub : Retrouvez le code de la formation
Aperçu
🔎 CheatSheet : La CLI d'Angular
Aperçu

Mise en place (20 minutes)

💻 ng new : la notion de Workspace Angular
Aperçu
💻 ng generate application : Créer une application Angular
Aperçu
💻 ng serve : lancer l'application dans le navigateur
Aperçu
Comment se lance notre application ?
Aperçu
🎨 CSS local vs CSS global
Aperçu
🎨 Importer du CSS dans une application Angular
Aperçu

Les Directives d'Attribut (50 minutes)

Introduction aux directives d'attributs
Aperçu
Créer une directive Highlight
Aperçu
Déclarer la directive dans le AppModule
Aperçu
ElementRef : travailler sur l'élément HTML
Aperçu
@HostListener : écouter un événement de l'élément HTML
Aperçu
Changer la backgroundColor de l'élément HTML
Aperçu
@HostBinding : se lier à une propriété de l'élément HTML
Aperçu
@Input : récupérer une info dans un attribut de l'élément HTML
Aperçu
Cycle de vie : ngOnInit
Aperçu
💪 Exercice : créer une Directive NoOpen
Aperçu
✅ Correction : créer une Directive NoOpen
Aperçu
💪 Exercice : créer une Directive Confirm
Aperçu
✅ Correction : créer une Directive Confirm
Aperçu
🚀 Conclusions de la section
Aperçu
❔Quizz : Introduction aux directives d'attributs
📁 GitHub : Retrouver le code de fin de section
Aperçu

Les Composants (1 heure et 20 minutes)

Introduction aux Composants
Aperçu
Mise en place
Aperçu
Créer une directive UserProfile
Aperçu
Le décorateur @Component et son template
Aperçu
L'interpolation : projeter des valeurs dans le template HTML
Aperçu
Les pipes : formater des valeurs dans vos interpolations
Aperçu
Property Binding : lier une valeur à une propriété d'un élément HTML
Aperçu
CSS et scope
Aperçu
Class Binding : faire apparaitre ou pas une classe CSS
Aperçu
Event Binding : écouter un événement sur un élément HTML
Aperçu
La variable spéciale $event
Aperçu
Event Filtering : filtrer les événements du clavier !
Aperçu
Découverte de Zone.js et son rôle
Aperçu
Le sélecteur d'éléments
Aperçu
💪 Exercice : créer un Compteur
Aperçu
✅ Correction : créer un Compteur
Aperçu
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