Développer Votre Première Application Angular (2025)
- Objectifs pédagogiques
- Sections du cours
- Avis
Nouveau : La mise à jour de ce cours est à nouveau sponsorisée par mon employeur Avisto Telecom en 2025. Un nouveau module sur la réactivité moderne (LinkedSignal et Resource API) est désormais disponible. Merci à eux !
2022-2024 : La mise à jour complète du cours a été sponsorisée par mon employeur Avisto Telecom. Merci à eux !
Alors comme ça, vous souhaitez vous former au développement d’applications Web
avec la dernière version d’Angular ?
Vous aussi, vous rêvez de construire des sites web dynamiques, qui réagissent immédiatement aux moindres interactions de vos utilisateurs, avec une performance optimale ? Eh, ça tombe bien, vous êtes au bon endroit !
Nous vivons une époque excitante pour le développement Web avec JavaScript. Il y a une multitude de nouveaux Frameworks disponibles, et encore une autre multitude qui éclot jour après jour. Nous allons voir pourquoi vous devez faire le pari de vous lancer avec Angular, et ce que vous allez pouvoir faire avec ce petit bijou, sorti tout droit de la tête des
ingénieurs de Google.
Cette nouvelle version d’Angular est une réécriture complète de la première version d’Angular, nommée AngularJS. C’est donc une bonne nouvelle pour ceux qui ne connaîtraient pas cette version d’Angular, ou qui en auraient juste entendu parler : pas
besoin de connaître AngularJS, vous pouvez vous lancer dans l’apprentissage d’Angular dès
maintenant !
Pour être clair, Angular désigne le « nouvel » Angular (version 2 et supérieure), et AngularJS désigne la version 1 du Framework. Ce sont ces appellations que j’utiliserai dans le cours.
Si vous êtes bloqué, sachez qu’il y a une correction de code complète à la fin de chaque chapitre, et que je répondrai rapidement (de manière très sympathique) à tous vos messages. Je n’oublie personne, vous avez ma parole ! ;D
Angular est l’un des frameworks frontend les plus modernes, les plus performants et les plus puissants que vous pouvez apprendre à ce jour. Il vous permet de créer des applications web performantes qui offrent une excellente expérience utilisateur ! Tous les principes fondamentaux dont vous avez besoin pour commencer à développer des applications Angular sont présentés dans ce cours.
Je ferais votre veille Angular à votre place. Dès qu’il y a une nouveauté sur Angular intéressante, je vous préviendrai via les annonces Udemy. Plus besoin de passer des heures sur Internet pour chercher les dernières nouveautés par vous-même ! 😀
Achetez ce cours MAINTENANT et apprenez Angular quand vous voulez ensuite. L’accès au cours est garanti à vie, et le contenu est toujours à jour depuis 2016 !
-
15Générer une application AngularLeçon vidéo
-
16Présentation du socle généré par Angular CLILeçon vidéo
-
17Présentation du composant racineLeçon vidéo
-
18Démarrer votre application AngularLeçon vidéo
-
19Coder votre application “Hello, Angular !”Leçon vidéo
-
20Installer le Service de Langage dans Visual Studio CodeLeçon de texte
-
21ConclusionLeçon de texte
-
22Le processus de déploiementLeçon vidéo
-
23Créer une application Angular pour la productionLeçon vidéo
-
24Créer un projet dans FirebaseLeçon vidéo
-
25Configurer votre projet Firebase pour le déploiementLeçon vidéo
-
26Déployer votre application sur InternetLeçon vidéo
-
27ConclusionLeçon de texte
-
28Questionnaire n°1 : Démarrer sur AngularQuiz
-
29Qu’est ce qu’un composant ?Leçon vidéo
-
30Afficher l’état d’un composant dans le templateLeçon vidéo
-
3106. Réagir aux interactions de l’utilisateurLeçon vidéo
-
32Atelier : Optimiser notre premier composantLeçon vidéo
-
33Correction : Optimiser notre premier composantLeçon vidéo
-
34ConclusionLeçon de texte
-
35Pourquoi créer un composant basé sur les Signals ?Leçon vidéo
-
36Qu’est ce qu’un Signal ?Leçon vidéo
-
37Définir un état dérivé avec computed()Leçon vidéo
-
38Gérer les effets de bords avec effect()Leçon vidéo
-
39Un composant Angular basé sur les SignalsLeçon vidéo
-
40Atelier : Ajouter la taille d’un PokémonLeçon vidéo
-
41Correction : Ajouter la taille d’un PokémonLeçon vidéo
-
42ConclusionLeçon de texte
-
43Les 4 types de liaison de donnéesLeçon vidéo
-
44Afficher une imageLeçon vidéo
-
45Gérer des attributs dynamiquementLeçon vidéo
-
46Conditionner un affichage avec @IfLeçon vidéo
-
47Atelier : Afficher une liste de Pokémon avec @forLeçon vidéo
-
48Correction : Afficher une liste de Pokémons avec @forLeçon vidéo
-
49Mettre en place un traitement individuel pour un élément dans une listeLeçon vidéo
-
50Améliorer l’affichage du Pokédex avec BootstrapLeçon vidéo
-
51ConclusionLeçon de texte
-
70Le fonctionnement de la navigation dans AngularLeçon vidéo
-
71Générer un composant pour la liste des PokémonsLeçon vidéo
-
72Mise en place du système de navigationLeçon vidéo
-
73Créer une route pour le profil d'un PokémonLeçon vidéo
-
74Naviguer grâce à la directive RouterLinkLeçon vidéo
-
75Récupérer un Pokémon dynamiquement via le RouterLeçon vidéo
-
76Atelier : Naviguer depuis la barre de navigationLeçon vidéo
-
77Correction : Naviguer depuis la barre de navigationLeçon vidéo
-
78Compléter l’affichage du profil d’un PokémonLeçon vidéo
-
79Gérer les erreurs 404Leçon vidéo
-
80Ajouter des titres pour vos pagesLeçon vidéo
-
81ConclusionLeçon de texte
-
82Introduction aux formulaires dans AngularLeçon vidéo
-
83Créer un composant pour éditer un PokémonLeçon vidéo
-
84Créer un formulaire piloté par le modèleLeçon vidéo
-
85Afficher les données du formulaireLeçon vidéo
-
86Afficher l'état d'un FormArrayLeçon vidéo
-
87Déboguer vos formulaires facilement avec le pipe JsonLeçon vidéo
-
88Gérer la soumission d'un formulaireLeçon vidéo
-
89Atelier : Le Marketing a changé d'avis !Leçon vidéo
-
90Correction : Le Marketing a changé d'avis !Leçon vidéo
-
91Présentation des règles de validationLeçon vidéo
-
92Présentation des validateurs avec AngularLeçon vidéo
-
93Ajouter les règles de validation pour le champ nameLeçon vidéo
-
94Prévenir l'utilisateur en cas d'erreursLeçon vidéo
-
95Ajouter les règles de validation pour le champ lifeLeçon vidéo
-
96Atelier : Ajouter les règles de validation validation pour le champ damageLeçon vidéo
-
97Correction : Ajouter les règles de validation pour le champ damageLeçon vidéo
-
98Valider un FormArrayLeçon vidéo
-
99Soumettre uniquement un formulaire valideLeçon vidéo
-
100Le marketing a (encore) changé d’avisLeçon vidéo
-
101Fournir le client HTTP de AngularLeçon vidéo
-
102Simuler des requêtes HTTPLeçon vidéo
-
103Récupérer la liste des Pokémons sur le serveurLeçon vidéo
-
104Afficher la liste des PokémonsLeçon vidéo
-
105Ajouter une icône de chargementLeçon vidéo
-
106Récupérer un Pokémon sur le serveur distantLeçon vidéo
-
107Éditer un Pokémon du serveurLeçon vidéo
-
108Atelier : Afficher un Pokémon du serveurLeçon vidéo
-
109Correction : Afficher un Pokémon du serveurLeçon vidéo
-
110Gérer les erreurs HTTP avec toSignalLeçon vidéo
-
111Modifier un PokémonLeçon vidéo
-
112Supprimer un PokémonLeçon vidéo
-
117Présentation de l'atelierLeçon vidéo
-
118Code de départ : Une méthode POSTLeçon vidéo
-
119Correction : Créer un composant vide pour ajouter un PokémonLeçon vidéo
-
120Correction : Ajouter un lien vers le formulaire d’ajoutLeçon vidéo
-
121Correction : Adapter notre formulaire d’éditionLeçon vidéo
-
122Déploiement en ligne des nouvelles fonctionnalitésLeçon vidéo
-
12301. IntroductionLeçon vidéo
-
12402. Gérer les états dépendants avec LinkedSignalLeçon vidéo
-
12503. Cas d’utilisation du LinkedSignalLeçon vidéo
-
12604. Comment choisir entre Signal, Computed et LinkedSignal ?Leçon vidéo
-
12705. Créer votre première HttpResourceLeçon vidéo
-
12806. Consommer une HTTPResourceLeçon vidéo
-
12907. Déclarer des HttpRessource complexesLeçon vidéo
-
13008. Contrôler les requêtes d’une HTTPResourceLeçon vidéo
-
13109. Extraire vos HttpResources dans le service PokemonLeçon vidéo
-
13210. Présentation de la Ressource APILeçon vidéo
-
13311. Présentation de RxRessourceLeçon vidéo
-
13412. Cas d’utilisation concret d’une RxRessourceLeçon vidéo
-
13513. Comment choisir entre Ressource, httpRessource et RxRessource ?Leçon vidéo
-
13614. ConclusionLeçon de texte
-
137Cours sur Angular 15Leçon de texte
-
138C'est quoi, "Angular" ?Leçon vidéo
-
139Site web ou Application web ?Leçon vidéo
-
140Angular versus AngularJSLeçon vidéo
-
141Pourquoi Google a crée le framework Angular ?Leçon vidéo
-
142La "philosophie" d'AngularLeçon vidéo
-
143Angular est-il si difficile à apprendre ?Leçon vidéo
-
144ConclusionLeçon vidéo
-
145En résuméLeçon de texte
-
146Introduction au développement AngularLeçon vidéo
-
147Les outils du développeur AngularLeçon vidéo
-
148Installer Node.js et NPMLeçon vidéo
-
149Installer un éditeur de code pour TypeScriptLeçon vidéo
-
150Comment démarrer un nouveau projet Angular ?Leçon vidéo
-
151Installer Angular CLILeçon vidéo
-
152Générer une application AngularLeçon vidéo
-
153Quels fichiers sont générés par Angular CLI ?Leçon vidéo
-
154Le composant racineLeçon vidéo
-
155Le module racineLeçon vidéo
-
156Configurer TypeScriptLeçon vidéo
-
157Démarrer une application AngularLeçon vidéo
-
158ConclusionLeçon vidéo
-
159En résuméLeçon de texte
-
161IntroductionLeçon vidéo
-
162Qu’est-ce qu’un composant ?Leçon vidéo
-
163Les cycles de vie d’un composantLeçon vidéo
-
164Interagir sur le cycle de vie d’un composantLeçon vidéo
-
165Gérer les interactions utilisateursLeçon vidéo
-
166Exercice : Améliorer notre composant racineLeçon vidéo
-
167Correction : Améliorer notre composant racineLeçon vidéo
-
168ConclusionLeçon vidéo
-
169En résuméLeçon de texte
-
170IntroductionLeçon vidéo
-
171Développer vos templates avec ES6Leçon vidéo
-
172Développer vos templates avec AngularLeçon vidéo
-
173Découvrir l’interpolationLeçon vidéo
-
174La syntaxe de liaison des donnéesLeçon vidéo
-
175Gérer les interactions de l’utilisateurLeçon vidéo
-
176Intercepter tous les événements du DOMLeçon vidéo
-
177Les variables référencées dans le templateLeçon vidéo
-
178Atelier : Créer un flux de données birectionnelLeçon vidéo
-
179Détecter l’appuie sur la touche EntréeLeçon vidéo
-
180Conditionner un affichage avec NgIfLeçon vidéo
-
181Afficher une liste avec NgForLeçon vidéo
-
182Exercice : Modifier le template de notre applicationLeçon vidéo
-
183Correction : Modifier le template de notre applicationLeçon vidéo
-
184ConclusionLeçon vidéo
-
185En résuméLeçon de texte
-
186Qu’est-ce qu’une directive ?Leçon vidéo
-
187Créer une directive d’attributLeçon vidéo
-
188Prendre en compte les actions de l’utilisateurLeçon vidéo
-
189Utiliser notre directiveLeçon vidéo
-
190Ajouter un paramètre à notre directiveLeçon vidéo
-
191Atelier : Améliorer notre directive d’attributLeçon vidéo
-
192ConclusionLeçon vidéo
-
193En résuméLeçon de texte
-
202Introduction aux routesLeçon vidéo
-
203Le fonctionnement de la navigationLeçon vidéo
-
204Générer deux nouveaux composantsLeçon vidéo
-
205Créer des routesLeçon vidéo
-
206La balise <router-outlet>Leçon vidéo
-
207Modifier le composant de la liste des pokémonsLeçon vidéo
-
208Dynamiser le composant de détail d’un pokémonLeçon vidéo
-
209Brancher le template de détail d’un pokémonLeçon vidéo
-
210Ajouter une barre de navigationLeçon vidéo
-
211Naviguer grâce au service RouterLeçon vidéo
-
212Gérer les erreurs 404Leçon vidéo
-
213Démonstration du système de navigationLeçon vidéo
-
214ConclusionLeçon vidéo
-
215En résuméLeçon de texte
-
222IntroductionLeçon vidéo
-
223Créer un serviceLeçon vidéo
-
224Consommer un serviceLeçon vidéo
-
225L'injection de dépendancesLeçon vidéo
-
226Fournir un service au niveau de l'applicationLeçon vidéo
-
227Fournir un service au niveau d'un moduleLeçon vidéo
-
228Fournir un service au niveau d'un composantLeçon vidéo
-
229ConclusionLeçon vidéo
-
230En résuméLeçon de texte
-
232IntroductionLeçon vidéo
-
233Un formulaire d'éditionLeçon vidéo
-
234Présentation des formulaires pilotés par le templateLeçon vidéo
-
235La directive NgFormLeçon vidéo
-
236La directive NgModelLeçon vidéo
-
237Mettre en place le module FormsModuleLeçon vidéo
-
238Créer un formulaireLeçon vidéo
-
239Générer le composant du formulaire avec Angular CLILeçon vidéo
-
240Implémenter la logique du formulaireLeçon vidéo
-
241Présentation du template du formulaireLeçon vidéo
-
242Présentation des règles de validationLeçon vidéo
-
243Ajouter des règles de validation standardsLeçon vidéo
-
244Créer une règle de validation personnaliséeLeçon vidéo
-
245Prévenir l’utilisateur en cas d’erreursLeçon vidéo
-
246Ajouter des indicateurs visuels pour l’utilisateurLeçon vidéo
-
247Afficher des messages d’erreurs aux utilisateursLeçon vidéo
-
248Intégration du formulaireLeçon vidéo
-
249Démonstration du formulaireLeçon vidéo
-
250ConclusionLeçon vidéo
-
251En résuméLeçon de texte
-
252IntroductionLeçon vidéo
-
253Le fonctionnement des promessesLeçon vidéo
-
254Qu'est ce que la programmation réactive ?Leçon vidéo
-
255Qu'est ce qu'un flux ?Leçon vidéo
-
256Traitement des fluxLeçon vidéo
-
257La librairie RxJSLeçon vidéo
-
258Les ObservablesLeçon vidéo
-
259Choisir entre observable et promesseLeçon vidéo
-
260ConclusionLeçon vidéo
-
261En résuméLeçon de texte
-
262IntroductionLeçon vidéo
-
263Mettre en place le client HttpClientModuleLeçon vidéo
-
264Simuler une API WebLeçon vidéo
-
265Requêter un serveur distantLeçon vidéo
-
266Récupérer un Pokémon à partir de son identifiantLeçon vidéo
-
267Gestion des erreursLeçon vidéo
-
268Consommer des données asynchronesLeçon vidéo
-
269L’asynchrone et AngularLeçon vidéo
-
270Créer une méthode de modificationLeçon vidéo
-
271Persister les modifications de l’utilisateurLeçon vidéo
-
272Supprimer un pokémonLeçon vidéo
-
273Ajouter un PokémonLeçon vidéo
-
274Ajouter une méthode POSTLeçon vidéo
-
275Créer un composant AddPokemonLeçon vidéo
-
276Adapter notre formulaire d’éditionLeçon vidéo
-
277Ajouter un lien vers le formulaire d’ajoutLeçon vidéo
-
278ConclusionLeçon vidéo
-
279En résuméLeçon de texte
-
280Présentation du champ de rechercheLeçon vidéo
-
281Rechercher des pokémons dynamiquementLeçon vidéo
-
282Construire un composant de rechercheLeçon vidéo
-
283Construire un Observable personnaliséLeçon vidéo
-
284Optimiser un flux de requêtesLeçon vidéo
-
285Ajouter une icône de chargement pour faire patienter l'utilisateurLeçon vidéo
-
286ConclusionLeçon vidéo
-
287En résuméLeçon de texte
-
295IntroductionLeçon vidéo
-
296Le processus de déploiementLeçon vidéo
-
297Activer le mode productionLeçon vidéo
-
298Créer un livrable pour la productionLeçon vidéo
-
299Comment déployer sur Firebase Hosting ?Leçon vidéo
-
300Créer un projet dans FirebaseLeçon vidéo
-
301Installer Firebase CLILeçon vidéo
-
302Configurer votre projet pour le déploiementLeçon vidéo
-
303Déployer votre application Angular sur FirebaseLeçon vidéo
-
304ConclusionLeçon vidéo
-
305En résuméLeçon de texte
-
307Les nouveautés importantes d’AngularLeçon vidéo
-
308Prérequis avant de monter de versionLeçon vidéo
-
309Monter de Angular 13 à Angular 14Leçon vidéo
-
310Monter de Angular 14 à Angular 15Leçon vidéo
-
311Convertir nos composants vers la Standalone APILeçon vidéo
-
312Supprimer les NgModules inutilesLeçon vidéo
-
313Démarrer votre application avec un composant standaloneLeçon vidéo
-
314Créer des titres pour vos routes statiquesLeçon vidéo
-
315Créer des titres pour vos routes dynamiquesLeçon vidéo
-
316Utiliser des fonctions les GuardsLeçon vidéo
-
317ConclusionLeçon vidéo
-
318IntroductionLeçon de texte
-
319Le principe de responsabilité uniqueLeçon de texte
-
320Les conventions de nommageLeçon de texte
-
321Les conventions de codeLeçon de texte
-
322La structure de l'applicationLeçon de texte
-
323Les composantsLeçon de texte
-
324Les servicesLeçon de texte
-
325Les outils à connaîtreLeçon de texte
-
326ConclusionLeçon de texte
-
327En résuméLeçon de texte
-
328IntroductionLeçon vidéo
-
329Les classesLeçon vidéo
-
330L'héritageLeçon vidéo
-
331Les paramètres par défautLeçon vidéo
-
332Le mot-clef LetLeçon vidéo
-
333Le mot-clef ConstLeçon vidéo
-
334Les promessesLeçon vidéo
-
335Les fonctions fléchéesLeçon vidéo
-
336Les collections Set et MapLeçon vidéo
-
337Les templates stringsLeçon vidéo
-
338ConclusionLeçon vidéo
-
339En résuméLeçon de texte