Skip to content

Structure des fichiers dans un projet Angular

Lorsque vous créez un projet Angular en utilisant la commande ng new, plusieurs dossiers et fichiers sont automatiquement générés pour vous. Voici une liste des dossiers et fichiers les plus importants générés par Angular :

  • e2e/ : Ce dossier contient les fichiers de test end-to-end (e2e) de votre application Angular. Ces tests permettent de vérifier que l'application fonctionne correctement en simulant des actions réelles d'un utilisateur. node_modules/ : Ce dossier contient toutes les dépendances npm (paquets Node) utilisées par votre application Angular. Ces dépendances sont automatiquement téléchargées et installées lorsque vous créez un nouveau projet Angular.
  • src/ : Ce dossier contient les fichiers source de votre application Angular. C'est ici que vous allez écrire le code de votre application et ajouter des fichiers tels que des composants, des services, des modules, etc.
  • .editorconfig : Ce fichier contient des réglages d'éditeur pour l'application Angular. Ces réglages permettent de définir des conventions de code communes pour tous les développeurs de l'application, afin de garantir une qualité et une cohérence du code.
  • .gitignore : Ce fichier contient une liste des fichiers et dossiers que Git (outil de gestion de versions) doit ignorer lors de l'envoi des modifications dans un dépôt Git. Par exemple, les fichiers générés automatiquement par Angular ou les fichiers de configuration de votre environnement de développement ne sont généralement pas ajoutés dans un dépôt Git.
  • angular.json : Ce fichier contient les configurations de l'application Angular. Vous pouvez utiliser ce fichier pour configurer les paramètres de l'application, tels que le nom de l'application, les options de compilation, les chemins de fichiers, etc.
  • package.json : Ce fichier contient les informations sur le paquet npm (Node Package Manager) de votre application Angular. Il contient notamment le nom et la version de l'application, les dépendances utilisées, les scripts npm, etc.
  • tsconfig.json : Ce fichier contient les configurations pour l'utilisation de TypeScript dans l'application Angular. TypeScript est un langage de programmation orienté objet qui permet de bénéficier de fonctionnalités avancées telles que la vérification de types et l'intégration de classes.

Dans le dossier app

Dans un projet Angular, le dossier app/ se trouve généralement à la racine du dossier src/. Ce dossier contient les fichiers principaux de l'application Angular, tels que les composants, les services, les modules, etc.

Le dossier app/ est généré par défaut lorsque vous créez un nouveau projet Angular en utilisant la commande ng new. Il contient généralement les fichiers suivants :

  • app.component.ts : Ce fichier contient le code du composant principal de l'application. Le composant principal est le composant racine de l'application et est chargé automatiquement lorsque l'application démarre.
  • app.module.ts : Ce fichier contient le code du module principal de l'application. Le module principal regroupe les différents composants, services, modules, etc. de l'application et permet de les utiliser dans les autres parties de l'application.
  • app.component.html : Ce fichier contient le code HTML du composant principal de l'application. C'est ici que vous allez définir la structure et le contenu de votre application.
  • app.component.css : Ce fichier contient les feuilles de style CSS du composant principal de l'application. Vous pouvez utiliser ce fichier pour définir le style des éléments HTML de votre application. Le dossier app/ peut également contenir d'autres dossiers et fichiers, en fonction de la configuration de votre projet Angular. Par exemple, si vous avez ajouté des composants, des services, ou des modules à votre application, ils seront généralement placés dans des sous-dossiers de app/.

Abonnez-vous à la newsletter

En juillet, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !