Développer Votre Première Application Avec Angular (2022)

Développez Facilement Votre Propre Application Angular en partant d'un dossier vide, avec Angular et TypeScript.

What you'll learn

Créer une application Angular complète à partir d'un dossier vide

Développer un système de navigation entre composants

Ajouter des formulaires pilotés par le template et par le modèle

Effectuer des requêtes HTTP depuis son application

Mettre en place un système d'authentification

Déployer une application Angular en production

Requirements

Connaître un minimum le HTML et le CSS

Avoir déjà entendu parler de JavaScript

Connaître un peu la programmation orienté objet (savoir ce qu'est une classe, une méthode, une propriété…)

Installer NodeJS sur son poste de travail

Description

Nouveau : La mise à jour de ce cours est sponsorisée par mon employeur Avisto Telecom pour 2022. 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 éclos
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 ! ;DAngular 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ériences utilisateur ! Tous les principes fondamentaux dont vous avez besoin pour commencer à développer des applications Angular sont présentés dans ce cours.Je ferai 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 ! :DAchetez ce cours MAINTENANT et apprenez Angular quand vous voulez ensuite. L'accès au cours est garanti à vie, et le contenu sera toujours à jour !

Overview

Section 1: IMPORTANT : Avant de commencer…

Lecture 1 Votre parcours de développeur web moderne

Lecture 2 L'application de démonstration que vous serez capable de développer

Lecture 3 La structure du cours

Section 2: Présentation d'Angular

Lecture 4 C'est quoi, "Angular" ?

Lecture 5 Site web ou Application web ?

Lecture 6 Angular versus AngularJS

Lecture 7 Pourquoi Google a crée le framework Angular ?

Lecture 8 La "philosophie" d'Angular

Lecture 9 Angular est-il si difficile à apprendre ?

Lecture 10 Conclusion

Lecture 11 En résumé

Section 3: Premier pas avec Angular

Lecture 12 Introduction au développement Angular

Lecture 13 Les outils du développeur Angular

Lecture 14 Installer Node.js et NPM

Lecture 15 Installer un éditeur de code pour TypeScript

Lecture 16 5. Comment démarrer un nouveau projet Angular ?

Lecture 17 Installer Angular CLI

Lecture 18 Générer une application Angular

Lecture 19 Quels fichiers sont générés par Angular CLI ?

Lecture 20 Le composant racine

Lecture 21 Le module racine

Lecture 22 Configurer TypeScript

Lecture 23 Démarrer une application Angular

Lecture 24 Conclusion

Lecture 25 En résumé

Section 4: Questionnaire

Section 5: Les Composants Web

Lecture 26 Introduction

Lecture 27 Qu’est-ce qu’un composant ?

Lecture 28 Les cycles de vie d’un composant

Lecture 29 Interagir sur le cycle de vie d’un composant

Lecture 30 Gérer les interactions utilisateurs

Lecture 31 Exercice : Améliorer notre composant racine

Lecture 32 Correction : Améliorer notre composant racine

Lecture 33 Conclusion

Lecture 34 En résumé

Section 6: Les Templates d'Angular

Lecture 35 Introduction

Lecture 36 Développer vos templates avec ES6

Lecture 37 Développer vos templates avec Angular

Lecture 38 Découvrir l’interpolation

Lecture 39 La syntaxe de liaison des données

Lecture 40 Gérer les interactions de l’utilisateur

Lecture 41 Intercepter tous les événements du DOM

Lecture 42 Les variables référencées dans le template

Lecture 43 Atelier : Créer un flux de données birectionnel

Lecture 44 Détecter l’appuie sur la touche Entrée

Lecture 45 Conditionner un affichage avec NgIf

Lecture 46 Afficher une liste avec NgFor

Lecture 47 Exercice : Modifier le template de notre application

Lecture 48 Correction : Modifier le template de notre application

Lecture 49 Conclusion

Lecture 50 En résumé

Section 7: Les Directives

Lecture 51 Qu’est-ce qu’une directive ?

Lecture 52 Créer une directive d’attribut

Lecture 53 Prendre en compte les actions de l’utilisateur

Lecture 54 Utiliser notre directive

Lecture 55 Ajouter un paramètre à notre directive

Lecture 56 Atelier : Améliorer notre directive d’attribut

Lecture 57 Conclusion

Lecture 58 En résumé

Section 8: Les Pipes

Lecture 59 Qu'est-ce qu'un pipe ?

Lecture 60 Utiliser un pipe

Lecture 61 Les pipes disponibles par défaut

Lecture 62 Combiner plusieurs pipes

Lecture 63 Paramétrer un pipe

Lecture 64 Créer un pipe personnalisé

Lecture 65 Conclusion

Lecture 66 En résumé

Section 9: Les Routes

Lecture 67 Introduction aux routes

Lecture 68 Le fonctionnement de la navigation

Lecture 69 Générer deux nouveaux composants

Lecture 70 Créer des routes

Lecture 71 La balise

Lecture 72 Modifier le composant de la liste des pokémons

Lecture 73 Dynamiser le composant de détail d’un pokémon

Lecture 74 Brancher le template de détail d’un pokémon

Lecture 75 Ajouter une barre de navigation

Lecture 76 Naviguer grâce au service Router

Lecture 77 Gérer les erreurs 404

Lecture 78 Démonstration du système de navigation

Lecture 79 Conclusion

Lecture 80 En résumé

Section 10: Les Modules

Lecture 81 Qu'est-ce qu'un module ?

Lecture 82 Les modules Angular et JavaScript

Lecture 83 Créer un module

Lecture 84 Structurer l'architecture de votre application Angular

Lecture 85 Conclusion

Lecture 86 En résumé

Section 11: Les Services

Lecture 87 Introduction

Lecture 88 Créer un service

Lecture 89 Consommer un service

Lecture 90 L'injection de dépendances

Lecture 91 Fournir un service au niveau de l'application

Lecture 92 Fournir un service au niveau d'un module

Lecture 93 Fournir un service au niveau d'un composant

Lecture 94 Conclusion

Lecture 95 En résumé

Section 12: Questionnaire

Section 13: Les Formulaires

Lecture 96 Introduction

Lecture 97 Un formulaire d'édition

Lecture 98 Présentation des formulaires pilotés par le template

Lecture 99 La directive NgForm

Lecture 100 La directive NgModel

Lecture 101 Mettre en place le module FormsModule

Lecture 102 Créer un formulaire

Lecture 103 Générer le composant du formulaire avec Angular CLI

Lecture 104 Implémenter la logique du formulaire

Lecture 105 Présentation du template du formulaire

Lecture 106 Présentation des règles de validation

Lecture 107 Ajouter des règles de validation standards

Lecture 108 Créer une règle de validation personnalisée

Lecture 109 Prévenir l’utilisateur en cas d’erreurs

Lecture 110 Ajouter des indicateurs visuels pour l’utilisateur

Lecture 111 Afficher des messages d’erreurs aux utilisateurs

Lecture 112 Intégration du formulaire

Lecture 113 Démonstration du formulaire

Lecture 114 Conclusion

Lecture 115 En résumé

Section 14: La Programmation Réactive

Lecture 116 Introduction

Lecture 117 Le fonctionnement des promesses

Lecture 118 Qu'est ce que la programmation réactive ?

Lecture 119 Qu'est ce qu'un flux ?

Lecture 120 Traitement des flux

Lecture 121 La librairie RxJS

Lecture 122 Les Observables

Lecture 123 Choisir entre observable et promesse

Lecture 124 Conclusion

Lecture 125 En résumé

Section 15: Les Requêtes HTTP

Lecture 126 Introduction

Lecture 127 Mettre en place le client HttpClientModule

Lecture 128 Simuler une API Web

Lecture 129 Requêter un serveur distant

Lecture 130 Récupérer un Pokémon à partir de son identifiant

Lecture 131 Gestion des erreurs

Lecture 132 Consommer des données asynchrones

Lecture 133 L’asynchrone et Angular

Lecture 134 Créer une méthode de modification

Lecture 135 Persister les modifications de l’utilisateur

Lecture 136 Supprimer un pokémon

Lecture 137 Ajouter un Pokémon

Lecture 138 Ajouter une méthode POST

Lecture 139 Créer un composant AddPokemon

Lecture 140 Adapter notre formulaire d’édition

Lecture 141 Ajouter un lien vers le formulaire d’ajout

Lecture 142 Conclusion

Lecture 143 En résumé

Section 16: La Libraririe RxJS

Lecture 144 Présentation du champ de recherche

Lecture 145 Rechercher des pokémons dynamiquement

Lecture 146 Construire un composant de recherche

Lecture 147 Construire un Observable personnalisé

Lecture 148 Optimiser un flux de requêtes

Lecture 149 Ajouter une icône de chargement pour faire patienter l'utilisateur

Lecture 150 Conclusion

Lecture 151 En résumé

Section 17: Authentification et Sécurité

Lecture 152 Introduction

Lecture 153 Qu’est ce qu’un Guard ?

Lecture 154 Mettre en place un Guard

Lecture 155 Créer un service d’authentification

Lecture 156 Ajouter une page de connexion sécurisée

Lecture 157 Conclusion

Lecture 158 En résumé

Section 18: Déployer Votre Application Angular sur Internet

Lecture 159 Introduction

Lecture 160 Le processus de déploiement

Lecture 161 Activer le mode production

Lecture 162 Créer un livrable pour la production

Lecture 163 Comment déployer sur Firebase Hosting ?

Lecture 164 Créer un projet dans Firebase

Lecture 165 Installer Firebase CLI

Lecture 166 Configurer votre projet pour le déploiement

Lecture 167 Déployer votre application Angular sur Firebase

Lecture 168 Conclusion

Lecture 169 En résumé

Section 19: Questionnaire

Section 20: Présentation d'Angular (Angular v5 -> Angular v9)

Lecture 170 C'est quoi, "Angular" ?

Lecture 171 Site web ou Application web ?

Lecture 172 Angular versus AngularJS

Lecture 173 Pourquoi Angular ?

Lecture 174 La philosophie d'Angular

Lecture 175 Angular et ECMAScript 6

Lecture 176 Angular et TypeScript

Lecture 177 Angular et les Composants Web

Lecture 178 Conclusion

Lecture 179 En résumé

Section 21: Premier pas avec Angular (Angular 5 -> Angular 9)

Lecture 180 Installer son environnement de développement

Lecture 181 Le fichier de configuration package.json

Lecture 182 Le fichier de configuration de SystemJS

Lecture 183 Configurer le compilateur de TypeScript avec tsconfig.json

Lecture 184 Configurer le mini-serveur lite avec bs-config.json

Lecture 185 Installer NodeJS et NPM

Lecture 186 Installer les dépendances de votre projet

Lecture 187 Ajouter un premier composant au projet

Lecture 188 Ajouter un module racine au projet

Lecture 189 Créer un point d'entrée pour votre application

Lecture 190 Ajouter le fichier index.html

Lecture 191 Démarrer l'application

Lecture 192 Cas où votre application ne démarre pas

Lecture 193 Nettoyer le dossier de développement

Lecture 194 Conclusion

Lecture 195 En résumé

Section 22: Les Composants (Angular 5 -> Angular 9)

Lecture 196 Introduction

Lecture 197 Qu'est ce qu'un composant ?

Lecture 198 Les cycles de vie d'un composant

Lecture 199 Interagir sur le cycle de vie d'un composant

Lecture 200 Gérer les interactions de l'utilisateur

Lecture 201 Exercice

Lecture 202 Correction

Lecture 203 Conclusion

Lecture 204 En résumé

Section 23: Les Templates (Angular 5 -> Angular 9)

Lecture 205 Introduction

Lecture 206 Utiliser ES6 pour déclarer des templates

Lecture 207 Déclarer un template avec l'attribut templateUrl

Lecture 208 L'interpolation

Lecture 209 Syntaxe de liaison des données

Lecture 210 Gérer les interactions des utilisateurs

Lecture 211 Récupérer les valeurs entrées par les utilisateurs

Lecture 212 Les variables référencées dans le template

Lecture 213 Détecter l'appui sur la touche Entrée

Lecture 214 Détecter la perte de focus sur un élément

Lecture 215 La directive NgIf

Lecture 216 La directive NgFor

Lecture 217 Améliorer le template de notre application

Lecture 218 Conclusion

Lecture 219 En résumé

Section 24: Les Directives (Angular 5 -> Angular 9)

Lecture 220 Qu'est-ce qu'une directive ?

Lecture 221 Créer une directive d'attribut

Lecture 222 Prendre en compte les actions de l'utilisateur

Lecture 223 Utiliser notre directive

Lecture 224 Ajouter un paramètre à notre directive

Lecture 225 Réorganiser notre code

Lecture 226 Conclusion

Lecture 227 En résumé

Section 25: Les Pipes (Angular 5 -> Angular 9)

Lecture 228 Qu'est ce qu'un pipe ?

Lecture 229 Utiliser un pipe

Lecture 230 Les pipes disponibles par défaut

Lecture 231 Combiner les pipes

Lecture 232 Paramétrer les pipes

Lecture 233 Créer un pipe personnalisé

Lecture 234 Conclusion

Lecture 235 En résumé

Section 26: Les Routes (Angular 5 -> Angular 9)

Lecture 236 Introduction

Lecture 237 Le fonctionnement de la navigation

Lecture 238 Le composant fils

Lecture 239 Le template du composant fils

Lecture 240 Le composant parent

Lecture 241 Mettre en place les routes

Lecture 242 La balise

Lecture 243 Ajouter de nouvelles routes

Lecture 244 Déclarer les nouvelles routes

Lecture 245 Gérer les erreurs 404

Lecture 246 Démonstration du système de navigation

Lecture 247 Conclusion

Lecture 248 En résumé

Section 27: Les Modules (Angular 5 -> Angular 9)

Lecture 249 Qu'est ce qu'un module ?

Lecture 250 Le module racine

Lecture 251 Créer un module

Lecture 252 Les routes du module

Lecture 253 Déclarer les routes

Lecture 254 Structurer l'architecture de l'application

Lecture 255 Conclusion

Lecture 256 En résumé

Section 28: Les Services et l'injection de dépendances (Angular 5 -> Angular 9)

Lecture 257 Introduction

Lecture 258 Créer un premier service

Lecture 259 Utiliser un service

Lecture 260 Fournir un service

Lecture 261 Consommer un service

Lecture 262 L'injection de dépendances

Lecture 263 Fournir un service à toute l'application

Lecture 264 Fournir un service à un module

Lecture 265 Fournir un service à un composant

Lecture 266 Conclusion

Lecture 267 En résumé

Section 29: Les formulaires pilotés par le template (Angular 5 -> Angular 9)

Lecture 268 Introduction

Lecture 269 Un formulaire d'édition

Lecture 270 Présentation des formulaires pilotés par le template

Lecture 271 La directive NgForm

Lecture 272 La directive NgModel

Lecture 273 Créer un formulaire

Lecture 274 Le composant du formulaire

Lecture 275 Le template du formulaire

Lecture 276 Les champs du formulaire

Lecture 277 Ajouter le bouton de validation du formulaire

Lecture 278 Ajouter des règles de validation

Lecture 279 Prévenir l'utilisateur en cas d'erreurs

Lecture 280 Ajouter des indicateurs visuels

Lecture 281 Afficher des messages d'erreurs aux utilisateurs

Lecture 282 Intégration du formulaire

Lecture 283 Démonstration du formulaire

Lecture 284 Conclusion

Lecture 285 En résumé

Section 30: Effectuer des requêtes HTTP (Angular 5 -> Angular 9)

Lecture 286 Introduction

Lecture 287 Mettre en place le module HttpClientModule

Lecture 288 Installation d'un module permettant de simuler une API Web

Lecture 289 Simuler une API Web

Lecture 290 Mettre à jour notre service

Lecture 291 Modification de l'importation "Observable"

Lecture 292 Gérer les erreurs

Lecture 293 Modification de l'importation de l'opérateur "of"

Lecture 294 Récupérer un Pokémon à partir de son identifiant

Lecture 295 Utiliser le service mis à jour

Lecture 296 Modifier un pokémon

Lecture 297 Ajouter une méthode de modification

Lecture 298 Sauvegarder les données

Lecture 299 Supprimer un Pokémon

Lecture 300 Présentation du champ de recherche

Lecture 301 Construire un champ de recherche

Lecture 302 Consommer un Observable

Lecture 303 Afficher le champ de recherche

Lecture 304 Ajouter une icône de chargement

Lecture 305 Conclusion

Lecture 306 En résumé

Section 31: L'authentification (Angular 5 -> Angular 9)

Lecture 307 Introduction

Lecture 308 Qu'est ce qu'un Guard ?

Lecture 309 Mettre en place un Guard

Lecture 310 Vers un système d'authentification plus complet

Lecture 311 Une page de connexion

Lecture 312 Conclusion

Lecture 313 En résumé

Section 32: Déployer votre application (Angular 5 -> Angular 9)

Lecture 314 Introduction

Lecture 315 Le processus de déploiement

Lecture 316 Charger les dépendances depuis le web

Lecture 317 Modifier le fichier index.html

Lecture 318 Fixer la version de la dépendance core-js

Lecture 319 Activer le mode production

Lecture 320 Une dernière vérification

Lecture 321 Créer un projet sur Firebase

Lecture 322 Installer l'utilitaire de Firebase

Lecture 323 Configurer votre projet pour le déploiement

Lecture 324 Déployer votre application sur Firebase

Lecture 325 Conclusion

Lecture 326 En résumé

Section 33: BONUS 1 : Guide des bonnes pratiques Angular

Lecture 327 Introduction

Lecture 328 Le principe de responsabilité unique

Lecture 329 Les conventions de nommage

Lecture 330 Les conventions de code

Lecture 331 La structure de l'application

Lecture 332 Les composants

Lecture 333 Les services

Lecture 334 Les outils à connaître

Lecture 335 Conclusion

Lecture 336 En résumé

Lecture 337 Introduction

Lecture 338 Le fichier de configuration de TypeScript

Lecture 339 La configuration existante

Lecture 340 L'option 'noImplicitAny'

Lecture 341 Les configurations supplémentaires

Lecture 342 Conclusion

Lecture 343 En résumé

Lecture 344 Introduction

Lecture 345 Les dépendances d'un projet Angular

Lecture 346 Les dépendances de l'application

Lecture 347 Les dépendances de développement

Lecture 348 Conclusion

Lecture 349 En résumé

Section 34: BONUS 2 : Guide JavaScript Moderne ES6 (100% débutants)

Lecture 350 Introduction

Lecture 351 Les classes

Lecture 352 L'héritage

Lecture 353 Les paramètres par défaut

Lecture 354 Le mot-clef Let

Lecture 355 Le mot-clef Const

Lecture 356 Les promesses

Lecture 357 Les fonctions fléchées

Lecture 358 Les collections Set et Map

Lecture 359 Les templates strings

Lecture 360 Conclusion

Lecture 361 En résumé

Section 35: BONUS 3 : ANGULAR vs REACT vs VUE

Lecture 362 Angular, React ou Vue, lequel faut-il apprendre en premier ?

Section 36: Et après ? …

Lecture 363 Pour aller plus loin …

Développeurs web junior souhaitant se former sur la nouvelle version d'Angular,Etudiants et stagiaires dans le domaine des technologies web