Développer Votre Première Application Angular (2025)
- الوصف
- أقسام الدرس
- رأي
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 Angularدرس فيديو
-
16Présentation du socle généré par Angular CLIدرس فيديو
-
17Présentation du composant racineدرس فيديو
-
18Démarrer votre application Angularدرس فيديو
-
19Coder votre application “Hello, Angular !”درس فيديو
-
20Installer le Service de Langage dans Visual Studio Codeدرس نصي
-
21Conclusionدرس نصي
-
22Le processus de déploiementدرس فيديو
-
23Créer une application Angular pour la productionدرس فيديو
-
24Créer un projet dans Firebaseدرس فيديو
-
25Configurer votre projet Firebase pour le déploiementدرس فيديو
-
26Déployer votre application sur Internetدرس فيديو
-
27Conclusionدرس نصي
-
28Questionnaire n°1 : Démarrer sur Angularاختبار
-
35Pourquoi créer un composant basé sur les Signals ?درس فيديو
-
36Qu’est ce qu’un Signal ?درس فيديو
-
37Définir un état dérivé avec computed()درس فيديو
-
38Gérer les effets de bords avec effect()درس فيديو
-
39Un composant Angular basé sur les Signalsدرس فيديو
-
40Atelier : Ajouter la taille d’un Pokémonدرس فيديو
-
41Correction : Ajouter la taille d’un Pokémonدرس فيديو
-
42Conclusionدرس نصي
-
43Les 4 types de liaison de donnéesدرس فيديو
-
44Afficher une imageدرس فيديو
-
45Gérer des attributs dynamiquementدرس فيديو
-
46Conditionner un affichage avec @Ifدرس فيديو
-
47Atelier : Afficher une liste de Pokémon avec @forدرس فيديو
-
48Correction : Afficher une liste de Pokémons avec @forدرس فيديو
-
49Mettre en place un traitement individuel pour un élément dans une listeدرس فيديو
-
50Améliorer l’affichage du Pokédex avec Bootstrapدرس فيديو
-
51Conclusionدرس نصي
-
70Le fonctionnement de la navigation dans Angularدرس فيديو
-
71Générer un composant pour la liste des Pokémonsدرس فيديو
-
72Mise en place du système de navigationدرس فيديو
-
73Créer une route pour le profil d'un Pokémonدرس فيديو
-
74Naviguer grâce à la directive RouterLinkدرس فيديو
-
75Récupérer un Pokémon dynamiquement via le Routerدرس فيديو
-
76Atelier : Naviguer depuis la barre de navigationدرس فيديو
-
77Correction : Naviguer depuis la barre de navigationدرس فيديو
-
78Compléter l’affichage du profil d’un Pokémonدرس فيديو
-
79Gérer les erreurs 404درس فيديو
-
80Ajouter des titres pour vos pagesدرس فيديو
-
81Conclusionدرس نصي
-
82Introduction aux formulaires dans Angularدرس فيديو
-
83Créer un composant pour éditer un Pokémonدرس فيديو
-
84Créer un formulaire piloté par le modèleدرس فيديو
-
85Afficher les données du formulaireدرس فيديو
-
86Afficher l'état d'un FormArrayدرس فيديو
-
87Déboguer vos formulaires facilement avec le pipe Jsonدرس فيديو
-
88Gérer la soumission d'un formulaireدرس فيديو
-
89Atelier : Le Marketing a changé d'avis !درس فيديو
-
90Correction : Le Marketing a changé d'avis !درس فيديو
-
91Présentation des règles de validationدرس فيديو
-
92Présentation des validateurs avec Angularدرس فيديو
-
93Ajouter les règles de validation pour le champ nameدرس فيديو
-
94Prévenir l'utilisateur en cas d'erreursدرس فيديو
-
95Ajouter les règles de validation pour le champ lifeدرس فيديو
-
96Atelier : Ajouter les règles de validation validation pour le champ damageدرس فيديو
-
97Correction : Ajouter les règles de validation pour le champ damageدرس فيديو
-
98Valider un FormArrayدرس فيديو
-
99Soumettre uniquement un formulaire valideدرس فيديو
-
100Le marketing a (encore) changé d’avisدرس فيديو
-
101Fournir le client HTTP de Angularدرس فيديو
-
102Simuler des requêtes HTTPدرس فيديو
-
103Récupérer la liste des Pokémons sur le serveurدرس فيديو
-
104Afficher la liste des Pokémonsدرس فيديو
-
105Ajouter une icône de chargementدرس فيديو
-
106Récupérer un Pokémon sur le serveur distantدرس فيديو
-
107Éditer un Pokémon du serveurدرس فيديو
-
108Atelier : Afficher un Pokémon du serveurدرس فيديو
-
109Correction : Afficher un Pokémon du serveurدرس فيديو
-
110Gérer les erreurs HTTP avec toSignalدرس فيديو
-
111Modifier un Pokémonدرس فيديو
-
112Supprimer un Pokémonدرس فيديو
-
117Présentation de l'atelierدرس فيديو
-
118Code de départ : Une méthode POSTدرس فيديو
-
119Correction : Créer un composant vide pour ajouter un Pokémonدرس فيديو
-
120Correction : Ajouter un lien vers le formulaire d’ajoutدرس فيديو
-
121Correction : Adapter notre formulaire d’éditionدرس فيديو
-
122Déploiement en ligne des nouvelles fonctionnalitésدرس فيديو
-
12301. Introductionدرس فيديو
-
12402. Gérer les états dépendants avec LinkedSignalدرس فيديو
-
12503. Cas d’utilisation du LinkedSignalدرس فيديو
-
12604. Comment choisir entre Signal, Computed et LinkedSignal ?درس فيديو
-
12705. Créer votre première HttpResourceدرس فيديو
-
12806. Consommer une HTTPResourceدرس فيديو
-
12907. Déclarer des HttpRessource complexesدرس فيديو
-
13008. Contrôler les requêtes d’une HTTPResourceدرس فيديو
-
13109. Extraire vos HttpResources dans le service Pokemonدرس فيديو
-
13210. Présentation de la Ressource APIدرس فيديو
-
13311. Présentation de RxRessourceدرس فيديو
-
13412. Cas d’utilisation concret d’une RxRessourceدرس فيديو
-
13513. Comment choisir entre Ressource, httpRessource et RxRessource ?درس فيديو
-
13614. Conclusionدرس نصي
-
137Cours sur Angular 15درس نصي
-
138C'est quoi, "Angular" ?درس فيديو
-
139Site web ou Application web ?درس فيديو
-
140Angular versus AngularJSدرس فيديو
-
141Pourquoi Google a crée le framework Angular ?درس فيديو
-
142La "philosophie" d'Angularدرس فيديو
-
143Angular est-il si difficile à apprendre ?درس فيديو
-
144Conclusionدرس فيديو
-
145En résuméدرس نصي
-
146Introduction au développement Angularدرس فيديو
-
147Les outils du développeur Angularدرس فيديو
-
148Installer Node.js et NPMدرس فيديو
-
149Installer un éditeur de code pour TypeScriptدرس فيديو
-
150Comment démarrer un nouveau projet Angular ?درس فيديو
-
151Installer Angular CLIدرس فيديو
-
152Générer une application Angularدرس فيديو
-
153Quels fichiers sont générés par Angular CLI ?درس فيديو
-
154Le composant racineدرس فيديو
-
155Le module racineدرس فيديو
-
156Configurer TypeScriptدرس فيديو
-
157Démarrer une application Angularدرس فيديو
-
158Conclusionدرس فيديو
-
159En résuméدرس نصي
-
161Introductionدرس فيديو
-
162Qu’est-ce qu’un composant ?درس فيديو
-
163Les cycles de vie d’un composantدرس فيديو
-
164Interagir sur le cycle de vie d’un composantدرس فيديو
-
165Gérer les interactions utilisateursدرس فيديو
-
166Exercice : Améliorer notre composant racineدرس فيديو
-
167Correction : Améliorer notre composant racineدرس فيديو
-
168Conclusionدرس فيديو
-
169En résuméدرس نصي
-
170Introductionدرس فيديو
-
171Développer vos templates avec ES6درس فيديو
-
172Développer vos templates avec Angularدرس فيديو
-
173Découvrir l’interpolationدرس فيديو
-
174La syntaxe de liaison des donnéesدرس فيديو
-
175Gérer les interactions de l’utilisateurدرس فيديو
-
176Intercepter tous les événements du DOMدرس فيديو
-
177Les variables référencées dans le templateدرس فيديو
-
178Atelier : Créer un flux de données birectionnelدرس فيديو
-
179Détecter l’appuie sur la touche Entréeدرس فيديو
-
180Conditionner un affichage avec NgIfدرس فيديو
-
181Afficher une liste avec NgForدرس فيديو
-
182Exercice : Modifier le template de notre applicationدرس فيديو
-
183Correction : Modifier le template de notre applicationدرس فيديو
-
184Conclusionدرس فيديو
-
185En résuméدرس نصي
-
186Qu’est-ce qu’une directive ?درس فيديو
-
187Créer une directive d’attributدرس فيديو
-
188Prendre en compte les actions de l’utilisateurدرس فيديو
-
189Utiliser notre directiveدرس فيديو
-
190Ajouter un paramètre à notre directiveدرس فيديو
-
191Atelier : Améliorer notre directive d’attributدرس فيديو
-
192Conclusionدرس فيديو
-
193En résuméدرس نصي
-
202Introduction aux routesدرس فيديو
-
203Le fonctionnement de la navigationدرس فيديو
-
204Générer deux nouveaux composantsدرس فيديو
-
205Créer des routesدرس فيديو
-
206La balise <router-outlet>درس فيديو
-
207Modifier le composant de la liste des pokémonsدرس فيديو
-
208Dynamiser le composant de détail d’un pokémonدرس فيديو
-
209Brancher le template de détail d’un pokémonدرس فيديو
-
210Ajouter une barre de navigationدرس فيديو
-
211Naviguer grâce au service Routerدرس فيديو
-
212Gérer les erreurs 404درس فيديو
-
213Démonstration du système de navigationدرس فيديو
-
214Conclusionدرس فيديو
-
215En résuméدرس نصي
-
222Introductionدرس فيديو
-
223Créer un serviceدرس فيديو
-
224Consommer un serviceدرس فيديو
-
225L'injection de dépendancesدرس فيديو
-
226Fournir un service au niveau de l'applicationدرس فيديو
-
227Fournir un service au niveau d'un moduleدرس فيديو
-
228Fournir un service au niveau d'un composantدرس فيديو
-
229Conclusionدرس فيديو
-
230En résuméدرس نصي
-
232Introductionدرس فيديو
-
233Un formulaire d'éditionدرس فيديو
-
234Présentation des formulaires pilotés par le templateدرس فيديو
-
235La directive NgFormدرس فيديو
-
236La directive NgModelدرس فيديو
-
237Mettre en place le module FormsModuleدرس فيديو
-
238Créer un formulaireدرس فيديو
-
239Générer le composant du formulaire avec Angular CLIدرس فيديو
-
240Implémenter la logique du formulaireدرس فيديو
-
241Présentation du template du formulaireدرس فيديو
-
242Présentation des règles de validationدرس فيديو
-
243Ajouter des règles de validation standardsدرس فيديو
-
244Créer une règle de validation personnaliséeدرس فيديو
-
245Prévenir l’utilisateur en cas d’erreursدرس فيديو
-
246Ajouter des indicateurs visuels pour l’utilisateurدرس فيديو
-
247Afficher des messages d’erreurs aux utilisateursدرس فيديو
-
248Intégration du formulaireدرس فيديو
-
249Démonstration du formulaireدرس فيديو
-
250Conclusionدرس فيديو
-
251En résuméدرس نصي
-
252Introductionدرس فيديو
-
253Le fonctionnement des promessesدرس فيديو
-
254Qu'est ce que la programmation réactive ?درس فيديو
-
255Qu'est ce qu'un flux ?درس فيديو
-
256Traitement des fluxدرس فيديو
-
257La librairie RxJSدرس فيديو
-
258Les Observablesدرس فيديو
-
259Choisir entre observable et promesseدرس فيديو
-
260Conclusionدرس فيديو
-
261En résuméدرس نصي
-
262Introductionدرس فيديو
-
263Mettre en place le client HttpClientModuleدرس فيديو
-
264Simuler une API Webدرس فيديو
-
265Requêter un serveur distantدرس فيديو
-
266Récupérer un Pokémon à partir de son identifiantدرس فيديو
-
267Gestion des erreursدرس فيديو
-
268Consommer des données asynchronesدرس فيديو
-
269L’asynchrone et Angularدرس فيديو
-
270Créer une méthode de modificationدرس فيديو
-
271Persister les modifications de l’utilisateurدرس فيديو
-
272Supprimer un pokémonدرس فيديو
-
273Ajouter un Pokémonدرس فيديو
-
274Ajouter une méthode POSTدرس فيديو
-
275Créer un composant AddPokemonدرس فيديو
-
276Adapter notre formulaire d’éditionدرس فيديو
-
277Ajouter un lien vers le formulaire d’ajoutدرس فيديو
-
278Conclusionدرس فيديو
-
279En résuméدرس نصي
-
280Présentation du champ de rechercheدرس فيديو
-
281Rechercher des pokémons dynamiquementدرس فيديو
-
282Construire un composant de rechercheدرس فيديو
-
283Construire un Observable personnaliséدرس فيديو
-
284Optimiser un flux de requêtesدرس فيديو
-
285Ajouter une icône de chargement pour faire patienter l'utilisateurدرس فيديو
-
286Conclusionدرس فيديو
-
287En résuméدرس نصي
-
295Introductionدرس فيديو
-
296Le processus de déploiementدرس فيديو
-
297Activer le mode productionدرس فيديو
-
298Créer un livrable pour la productionدرس فيديو
-
299Comment déployer sur Firebase Hosting ?درس فيديو
-
300Créer un projet dans Firebaseدرس فيديو
-
301Installer Firebase CLIدرس فيديو
-
302Configurer votre projet pour le déploiementدرس فيديو
-
303Déployer votre application Angular sur Firebaseدرس فيديو
-
304Conclusionدرس فيديو
-
305En résuméدرس نصي
-
307Les nouveautés importantes d’Angularدرس فيديو
-
308Prérequis avant de monter de versionدرس فيديو
-
309Monter de Angular 13 à Angular 14درس فيديو
-
310Monter de Angular 14 à Angular 15درس فيديو
-
311Convertir nos composants vers la Standalone APIدرس فيديو
-
312Supprimer les NgModules inutilesدرس فيديو
-
313Démarrer votre application avec un composant standaloneدرس فيديو
-
314Créer des titres pour vos routes statiquesدرس فيديو
-
315Créer des titres pour vos routes dynamiquesدرس فيديو
-
316Utiliser des fonctions les Guardsدرس فيديو
-
317Conclusionدرس فيديو
-
318Introductionدرس نصي
-
319Le principe de responsabilité uniqueدرس نصي
-
320Les conventions de nommageدرس نصي
-
321Les conventions de codeدرس نصي
-
322La structure de l'applicationدرس نصي
-
323Les composantsدرس نصي
-
324Les servicesدرس نصي
-
325Les outils à connaîtreدرس نصي
-
326Conclusionدرس نصي
-
327En résuméدرس نصي
-
328Introductionدرس فيديو
-
329Les classesدرس فيديو
-
330L'héritageدرس فيديو
-
331Les paramètres par défautدرس فيديو
-
332Le mot-clef Letدرس فيديو
-
333Le mot-clef Constدرس فيديو
-
334Les promessesدرس فيديو
-
335Les fonctions fléchéesدرس فيديو
-
336Les collections Set et Mapدرس فيديو
-
337Les templates stringsدرس فيديو
-
338Conclusionدرس فيديو
-
339En résuméدرس نصي