- Gratuit
Recréer Angular pour mieux le comprendre
- Cours
- 59 Leçons
Partez de rien avec moi, et voyageons dans la création d'un framework Javascript 🚀
Vous comprendrez alors les idées et les concepts qui sont à l'oeuvre derrière Angular, et serez prêts à mieux le comprendre !
Vous comprendrez alors les idées et les concepts qui sont à l'oeuvre derrière Angular, et serez prêts à mieux le comprendre !
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 😉
Ce que nous allons apprendre ensemble 👀
Tout est fait, dans ce cours gratuit de 4 heures et 20 minutes, pour vous apprendre les idées et concepts qui se cachent derrière Angular !
Développement front-end moderne
✨ Utiliser TypeScript dans une application web
🛠️ Utiliser NPM et son écosystème
🚀 Utiliser ViteJS pour compiler CSS et TypeScript
🛠️ Utiliser NPM et son écosystème
🚀 Utiliser ViteJS pour compiler CSS et TypeScript
Les pilliers d'Angular
😮 Découverte du concept de Directive à la base du framework
💉 Découverte et mise en place d'un système d'Injection de dépendances
🔎 Zone.js et la détection de changement
💉 Découverte et mise en place d'un système d'Injection de dépendances
🔎 Zone.js et la détection de changement
Notions de Development eXperience
💪 Contrôler le code grâce au typage fort !
🎨 Faciliter le développement grâce aux décorateurs TS
🎨 Faciliter le développement grâce aux décorateurs TS
Contenu
Introduction (5 minutes)
Introduction de la formation
- 2 mins
- 56,1 Mo
🚀 Les objectifs de la formation
- 2 mins
- 23 Mo
🛠️ Les outils nécessaires (VSCode, NodeJS et NPM)
- 3 mins
- 19 Mo
📁 GitHub : Retrouvez le code de la formation
A la découverte des Directive ! (45 minutes)
Mise en place du projet
- 5 mins
- 53,5 Mo
Installer ViteJS et Typescript
- 4 mins
- 75,8 Mo
La notion de Directive
- 7 mins
- 78,2 Mo
Créer une Directive PhoneNumberDirective
- 6 mins
- 117 Mo
🎨 Refactoring #1 : Méthodes de la Directive
- 2 mins
- 51,8 Mo
Utiliser le sélecteur d'Attributs
- 6 mins
- 101 Mo
Créer une Directive CreditCardDirective
- 4 mins
- 111 Mo
Distinction entre "outils" et "framework"
- 2 mins
- 64,5 Mo
Intégrer le sélecteur dans la Directive
- 6 mins
- 162 Mo
🎨 Refactoring #2 : Modules JS
- 3 mins
- 66,4 Mo
Récupérer des informations depuis les attributs de l'élément
- 6 mins
- 159 Mo
📁 GitHub : Retrouver le code de fin de section
Injection de dépendances (1 heure)
La notion de services
- 7 mins
- 161 Mo
Le problème des instances multiples
- 4 mins
- 62,2 Mo
L'injection de dépendances
- 3 mins
- 53,2 Mo
Le problème de l'instanciation précoce
- 4 mins
- 57,8 Mo
Analyser les constructeurs des Directives
- 5 mins
- 110 Mo
Découverte des paramètres du constructeur
- 4 mins
- 69,5 Mo
Instancier la Directive avec ses dépendances
- 6 mins
- 187 Mo
La notion de Providers
- 7 mins
- 227 Mo
Réutiliser les instances existantes de nos services
- 5 mins
- 184 Mo
Providers spécifiques à une Directive
- 5 mins
- 126 Mo
🎨 Refactoring #3 : Refactorer le Framework
- 12 mins
- 521 Mo
📖 Résumé de ce qu'on a vu
- 3 mins
- 43,5 Mo
📁 GitHub : Retrouver le code de fin de section
Amélioration de la DX (eXpérience de développement - 1 heure et 40 minutes)
📖 Rappel : la différence entre impératif et déclaratif
- 3 mins
- 26,3 Mo
Utiliser les types TypeScript pour faciliter le développement
- 9 mins
- 221 Mo
Créer un décorateur @Directive !
- 10 mins
- 184 Mo
Créer un décorateur @Input !
- 10 mins
- 239 Mo
Créer un décorateur @HostListener !
- 10 mins
- 261 Mo
Créer un décorateur @HostBinding !
- 6 mins
- 169 Mo
Utiliser lodash pour atteindre des propriétés imbriquées
- 4 mins
- 73,7 Mo
Améliorer la DX avec les commentaires ?
- 6 mins
- 127 Mo
Réécrire la CreditCardDirective avec nos nouveaux outils !
- 2 mins
- 68,1 Mo
La limite de notre @HostBinding
- 3 mins
- 46,5 Mo
Proxy : être au courant quand une propriété change !
- 4 mins
- 81,2 Mo
Ne considérer que les @HostBinding dans notre Proxy
- 5 mins
- 111 Mo
Mettre à jour les bindings automatiquement
- 4 mins
- 102 Mo
Les limites de notre méthode de surveillance
- 3 mins
- 60,7 Mo
Créer un détecteur de changements !
- 7 mins
- 170 Mo
Permettre au détecteur de faire les mises à jour
- 6 mins
- 123 Mo
Optimiser la détection de changements !
- 4 mins
- 98,5 Mo
Créer un @HostBinding sur la value de l'<input>
- 3 mins
- 107 Mo
Améliorer la DX du système de bindings
- 5 mins
- 122 Mo
Zone.js : Améliorer notre détection de changements
- 9 mins
- 172 Mo
Exemple : La directive Chrono
- 6 mins
- 119 Mo
🎨 Refactoring #4 : Cacher la Zone dans le Framework
- 2 mins
- 78,9 Mo
📁 GitHub : Retrouver le code de fin de section
A l'assaut des Composants (50 minutes)
Créer une directive UserProfile
- 7 mins
- 145 Mo
Template HTML et Interpolations
- 6 mins
- 175 Mo
Template HTML et écouteurs d'événements
- 22 mins
- 623 Mo
Créer un décorateur @Component
- 7 mins
- 235 Mo
Convention : sélecteur CSS d'éléments
- 2 mins
- 46,9 Mo
Exemple : le composant Counter
- 6 mins
- 266 Mo
📁 GitHub : Retrouver le code de fin de section