2. Création d’un projet Angular et explications des fichiers par défaut

09/17/2025 - By 

Retourner à : Angular en 2025

1

Pour ce deuxième chapitre de notre cours consacré à Angular, on va regarder comment créer un nouveau projet Angular à partir de rien, et puis on passera le reste du chapitre à expliquer chaque fichier qu’Angular nous générera. Pour rappel, dans le premier chapitre, nous avons vu comment installer Angular et VSCode, et donc, je pars du principe que vous avez un environnement de travail prêt à être utilisé.

Création du projet

Passons tout de suite aux choses sérieuses. On va commencer par ouvrir un terminal et naviguer vers le dossier où on veut créer notre projet. Donc pour moi, ce sera le dossier « Development » :

Bash
cd development

Et maintenant, on peut créer un nouveau projet Angular. Pour cela, il nous faut un nom de projet. Etant donné que nous allons créer une application de gestion de collections, on va l’appeler « collection-manager ». Pour créer ce projet, on va taper:

Bash
ng new collection-manager

Maintenant, angular-cli va vous poser quelques questions:

Tout d’abord, on nous demande si veut utiliser l’autocompletion dans le terminal. Si on l’active, on pourra utiliser la bouton tab pour compléter les commande Angular dans le terminal. Vous pouvez l’accepter en tapant « Y », puis en appuyant sur le bouton «Entrer ».

La deuxième question vous demande si vous souhaitez partager des données pseudonymisées avec l’équipe Angular. Ici, je vous laisse décider par vous même si vous souhaitez le faire ou non.

Ensuite, on nous demande quel format de stylesheet on veut utiliser. Ici, vous pouvez choisir l’option que vous préférez. Si vous ne connaissez pas SCSS, Sass (Indented) ou Less, vous pouvez garder l’option par défaut qui consiste à utiliser du CSS standard. Pour ma part, je vais sélectionner l’option SCSS pour ce cours.

Maintenant, on nous demande si on veut activer le Server-Side Rendering (en français: rendu côté serveur), qui consiste, comme son nom l’indique, à effectuer le rendu initial des pages HTML côté serveur. Quand cette option est désactivée, votre navigateur reçoit une page HTML vide et doit exécuter le code Javascript fourni pour créer le rendu de la page.

Pour notre cours d’introduction, on ne va pas utiliser le SSR. Mais si un cours concernant le SSR vous intéresse, faites-le moi savoir dans les commentaires.

On nous demande également si on veut créer une application zoneless. Veillez bien à activer cette option en tappant « Y », et ne vous en faites pas si vous ne savez pas ce qu’est « zone.js », je vous l’expliquerai dans l’un des chapitres du cours.

Pour finir, Angular vous propose de configurer votre outil d’IA préféré. Pour cela, il suffit de sélectionner l’outil (Claude, Cursor, Junie, …) avec lequel vous voulez coder votre application en appuyant sur votre barre d’espace et en validant en cliquant sur le bouton « Entrer ». 

Et voilà, enfin tous ces choix validés, on n’a plus qu’à attendre la fin de l’installation.

Une fois l’installation effectuée, nous pouvons ouvrir le projet dans VSCode. Pour cela, on va naviguer dans le dossier qui vient d’être créé:

Bash
cd collection-manager

Ensuite, il suffit de lancer VS Code avec la commande:

Bash
code .

Bien entendu, vous pouvez aussi ouvrir VS Code normalement et ouvrir le dossier en question à travers le menu de VSCode.

Lorsque vous ouvrez le dossier pour la première fois, VSCode vous demande si vous voulez faire confiance à l’auteur des fichiers que vous venez d’ouvrir. Donc ici, on va appuyer sur « Yes, I trust the authors ».

Exécution du programme

Maintenant que notre projet est ouvert, on peut regarder un par un chaque dossier et fichier afin de comprendre à quoi ils servent. Mais avant, je vous propose de lancer notre projet Angular afin de voir à quoi le résultat ressemble! Pour cela, on va ouvrir un terminal dans VSCode en allant dans le menu « Terminal »,  puis en cliquant sur « New Terminal » :

Et si tout s’est bien passé, vous avez un terminal en bas de vos écrans qui s’est ouvert dans le bon dossier et qui ressemble à ça:

Et là, pour lancer notre serveur de développement Angular, il suffit de taper:

Bash
ng serve

Normalement, vous devriez voir que le serveur a été lancé sans erreur, ainsi que l’adresse à laquelle le serveur est joignable, donc ici http://localhost:4200/.

Maintenant, vous pouvez ouvrir votre navigateur préféré à l’adresse http://localhost:4200/ pour visiter votre premier programme Angular:

Les dossiers et fichiers par défaut

Passons aux choses sérieuses et regardons les fichier qu’Angular a générés pour arriver à ce résultat. Pour commencer, attardons-nous sur les dossiers suivants:

  • .angular: ce dossier est utilisé par Angular pour le caching des fichiers générés pendant la génération de l’application afin d’accélérer le temps de génération.
  • .vscode: le dossier où VScode va stocker ses fichiers de configuration et de préférences. Si vous n’êtes pas sous VSCode, vous n’aurez pas ce dossier.
  • node_modules: contient toutes les dépendances nécessaires à notre projet. On verra dans un autre chapitre comment ajouter de nouvelles bibliothèques à notre projet, et comme vous le verrez, ces bibliothèques seront, elles aussi, automatiquement installées dans ce dossier.
  • public: va contenir vos images et les autres ressources statiques que vous souhaitez utiliser dans votre projet.
  • src: va contenir notre code Angular à proprement parler, et nous allons nous attarder plus longtemps dessus, mais pour l’instant, on va l’ignorer et passer les autres fichiers en revue.

Ensuite, nous retrouvons quelques fichiers de configuration:

  • .editorconfig: contient des configurations à l’attention de votre éditeur de code. Vous trouverez, par exemple, un paramètre qui indique la taille des indentations. VSCode ne considère pas ce fichier par défaut et vous pouvez l’ignorer, mais si vous voulez vraiment l’utiliser, vous pouvez installer l’extension « EditorConfig for VS Code » et faire un « npm install editorconfig ».
  • .gitignore: permet de définir les fichiers et dossiers qui ne doivent pas être poussés vers votre repo git. Si le terme « git » ne vous dit rien, vous pouvez ignorer ce fichier.
  • angular.json: va contenir la configuration du projet Angular, c’est là qu’on trouvera les options de compilation, les chemins vers les fichiers sources, et autres.
  • Package.json: un fichier pour npm qui indique toutes les dépendances du projet.
  • Package-lock.json: très similaire à « package.json » à la différence près que ce fichier va contenir les versions exactes de chaque dépendance, le but étant de pouvoir utiliser ce fichier pour installer exactement les versions de chaque librairie sur une autre machine afin de s’assurer que chaque déploiement de l’application tourne dans les mêmes conditions.
  • README.md: contient par défaut des instructions concernant Angular, et en général, vous allez supprimer tout ce contenu et le remplacer par des informations spécifiques à votre projet.
  • tsconfig.json: contient des configurations qui sont utilisées lors de la compilation de Typescript en Javascript.
  • tsconfig.app.json: hérite du fichier « tsconfig.json » et y ajouter les configurations spécifiques à la compilation de l’application Angular
  • tsconfig.spec.json: hérite également du fichier « tsconfig.json » et va lui ajouter les configurations spécifiques à la compilation des tests de l’application.

Bon, on a fait le tour des fichiers de configuration. Maintenant attaquons-nous au dossier src.

Du bas vers le haut, nous avons les fichiers:

  • styles.css: va contenir les styles css globaux de l’application
  • main.ts: est le point d’entrée de l’application et va lancer l’affichage du module principal de l’application
  • index.html: c’est dans ce fichier html que votre application sera affichée. Angular se chargera d’y injecter les balises script et link nécessaires à faire tourner votre projet lors de la compilation, et si vous avez des tags meta ou autre que vous souhaitez rajouter au header de votre page, vous pouvez le faire dans ce fichier.
  • dossier app: contient le code principal de l’application. C’est là que vous allez passer la majorité de votre temps à coder.

Pour finir, regardons les fichiers qui se trouvent dans le dossier « app ». Tout d’abord, on a les fichiers liés au composant « AppComponent », qui sont les fichiers qui définissent le composant principal de l’application, et qui est composé de 4 fichiers:

  • le fichier « scss »: contient les styles spécifiques à ce composant
  • le fichier « html »: va contenir le rendu du composant
  • le fichier « ts »: va définir le comportement du composant
  • le fichier « spec.ts »: contient les tests associés à ce composant.

Je ne vais pas parler plus en détails de ces 4 fichiers, car on en reparlera dans le prochain chapitre où on créera nos propres composants. Ensuite, nous avons encore les fichiers:

  • app.config.ts: c’est ici qu’on pourra configurer nos dépendances externes.
  • app.routes.ts: là, on va pouvoir définir des URLs qu’on va mapper sur des composants, donc concrètement, c’est ici qu’on va définir ce qui sera affiché à l’écran selon l’adresse accédée.

Et voilà, on a fait le tour de tous les fichiers générés par Angular. Je sais que ce n’est pas le sujet le plus glamour, mais je pense qu’il est indispensable de connaître un minimum les fonctionnalités des fichiers générées automatiquement par nos frameworks préférés afin de ne pas se sentir submergé(e) par l’environnement dans lequel on travaille.

Dans le prochain chapitre, on va voir plus en détail ce que sont les composants, et on va créer notre premier composant.

Ressources

Vous retrouvez ci-dessous un lien vers le code source utilisé dans ce chapitre. Ce lien est uniquement disponible pour les abonnés Standard et Premium.

Quiz

Répondez au quiz ci-dessous afin de vérifier que vous avez bien compris le contenu de cette leçon. Les quiz sont uniquement disponibles pour les abonnés Standard et Premium.

Laisser un commentaire