Aller au contenu principal

8-1 Structure de fichiers

Le guide de style d'Angular recommande d'organiser le code de l'application par "features":

Organize your project into subdirectories based on the features or your application or common themes to the code in those directories. For example, the project structure for a movie theater site, MovieReel, might look like this:

src/
├─ movie-reel/
│ ├─ show-times/
│ │ ├─ film-calendar/
│ │ ├─ film-details/
│ ├─ reserve-tickets/
│ │ ├─ payment-info/
│ │ ├─ purchase-confirmation/

Cela veut dire essentiellement que plutôt que de séparer les dossiers selon le type de fichier (services, models, components, etc.), de séparer par fonctionnalité.

Nous adopterons une structure hybride, c'est-à-dire une structure qui respecte l'esprit de structurer par fonctionnalité, tout en préservant la possibilité de réutiliser facilement du code (services, modèles, etc.) au travers de différents composants.

Nous adopterons la structure de dossiers suivants:

src/
├─ app/
│ ├─ core/
│ │ ├─ http
│ │ ├─ models
│ │ ├─ services
│ ├─ features/
│ │ ├─ projets/
│ │ | ├─ components
│ │ | ├─ pages
│ │ ├─ issues/
│ ├─ shared/
  • *core: les fichiers de logique qui sont partagés par l'ensemble de l'application
  • features: les fichiers (composants et logique) directement liés à des fonctionnalités (ex.: affichage et gestion des projets)
  • shared: les composants partagés par l'ensemble de l'application, pas lié à une fonctionnalité en particulier. La navbar et le footer par exemple.

Créer les dossiers de base​

Allons-y et créons les dossiers de base.

  1. Créez le dossier src/app/core
  2. Créez le dossier src/app/features
  3. Créez le dossier src/app/shared

Votre structure de dossiers devrait ressembler à ceci:

img