Angular - 1.5 Editer premiere application part 1

Dans cette leçon, nous allons examiner en détail comment fonctionne le framework Angular et comment est structurée une application Angular — celle que nous avons créée dans la précédente vidéo. J'utilise ici l'IDE WebStorm (payant) ; si vous cherchez une alternative gratuite et excellente, Visual Studio Code est très populaire chez les développeurs.

Sur la gauche de l'IDE, on retrouve tous les fichiers et dossiers générés par le CLI. Cela peut paraître impressionnant, mais la plupart sont des fichiers de configuration auxquels on ne touchera quasiment jamais. Les seuls fichiers qu'on est amené à modifier ponctuellement sont angular.json et package.json (pour ajuster les dépendances installées via npm).

Les dossiers importants

  • e2e/ : tests end-to-end, à ignorer pour l'instant.
  • node_modules/ : tous les modules installés via npm. C'est volumineux mais on n'y touche pas.
  • src/ : le cœur de l'application. C'est là qu'on va travailler.
  • À l'intérieur de src/ : un dossier app/ pour les composants, un dossier assets/ pour les fichiers média (images, logos…), et un dossier environments/ pour les variables d'environnement.

À la racine de src/, le fichier index.html est la seule page HTML de l'application — c'est la « single page » des Single Page Applications. Si on l'inspecte, on n'y trouve qu'un titre, quelques balises de base et surtout une balise <app-root>. Cette balise est la porte d'entrée entre l'HTML et nos composants Angular : elle fait référence au composant AppComponent, situé dans src/app/.

Le dossier src/app/ contient quatre fichiers générés automatiquement pour AppComponent : un HTML, un CSS, un fichier de test (.spec.ts) que l'on ignorera pour l'instant, et le fichier TypeScript principal (.ts). On ouvre app.component.html, on modifie un élément (par exemple le texte « welcome » que l'on remplace par « bienvenue »), on sauvegarde, et la page se rafraîchit toute seule dans le navigateur. C'est ce qu'on appelle le live reload, assuré par des file watchers qui surveillent les fichiers et répercutent les changements instantanément. En descendant un peu plus bas dans le HTML, on aperçoit un élément étrange : {{ title }}, entouré de doubles accolades. Ce n'est pas du HTML classique. On découvrira son rôle dans la prochaine leçon.

En résumé

Cette vidéo introduit la structure d'une application Angular générée par la CLI. Elle détaille les dossiers et fichiers importants (src, app, assets, environment), explique le fonctionnement d'une Single Page Application (SPA), et identifie les éléments du composant app qu'on peut éditer, notamment l'élément « welcome » dans la toolbar.

Points clés

  • La structure d'une application Angular générée contient des dossiers critiques (src, app, assets) et des fichiers de configuration qu'on ne modifie généralement pas (package.json, angular.json).
  • Angular fonctionne comme une Single Page Application : une seule page HTML (index.html) dont les composants sont affichés dynamiquement via JavaScript.
  • Le composant app est le composant racine qui sert de portail entre la page HTML et les autres composants d'application.
  • Les fichiers HTML et CSS peuvent être intégrés dans le composant TypeScript ou externalisés dans des fichiers séparés.
  • Chaque version d'Angular (10, 11, 12, 13, etc.) peut produire des structures légèrement différentes, nécessitant d'adapter les modifications.
  • L'élément « welcome » dans la toolbar du composant app est un exemple concret identifié pour comprendre le fonctionnement et montrer comment éditer l'application.

Questions fréquentes

Pourquoi la structure d'une application Angular générée contient-elle autant de fichiers et de dossiers ?

La plupart de ces fichiers et dossiers sont générés automatiquement par la CLI Angular (ng new) et contiennent des configurations nécessaires au fonctionnement (node_modules), des outils de test (e2e), ou des fichiers de configuration du projet. Vous n'aurez généralement à modifier que les fichiers dans le dossier src/app.

Qu'est-ce qu'une Single Page Application et pourquoi Angular en utilise-t-une ?

Une Single Page Application (SPA) est une application qui ne contient qu'une seule page HTML. Angular modifie le contenu du DOM à la volée via JavaScript pour afficher différentes vues sans recharger la page. Cela permet une meilleure réactivité et une expérience utilisateur plus fluide.

Que dois-je modifier si mon interface diffère de celle montrée dans la vidéo ?

Si vous utilisez une version plus récente d'Angular (11, 12, 13 ou ultérieure), la structure du composant app peut être différente. Identifiez un élément équivalent au « welcome » montré dans la vidéo et suivez les mêmes principes d'édition.