Conseils pour structurer votre projet angulaire

La structure de votre application Angular changera en fonction du scénario, mais ces conseils vous aideront à bien démarrer à chaque fois.

Lorsque vous créez une nouvelle application Angular, la structure des fichiers doit faire l’objet d’une attention particulière. Une mauvaise structure de fichiers pourrait avoir un impact sur l’extensibilité, l’évolutivité et la maintenance à l’avenir.

Une structure plate (où tout est disponible dans une seule dimension) convient à un petit projet avec peu de composants et un seul module. Mais si votre application se développe avec des modules, des fonctionnalités, des composants et des entités commerciales, vous devez trouver une structure de fichiers évolutive.

Aujourd’hui, regardons comment structurer vos projets dans Angular avec une structure de fichiers évolutive et modulaire. Découvrez également comment organiser votre code en fonctionnalités et modules dans les rubriques suivantes :

• Pourquoi la structure est-elle importante ?
• Modules et fonctionnalités
• Modules de base et de partage
• Structurer un projet en action

Pourquoi la structure est-elle importante ?

La création d’une bonne structure de fichiers dans vos applications ne rend pas votre Angular meilleur, plus rapide ou plus performant. Il facilite la navigation dans les fichiers source et permet de comprendre où tout se trouve. La structure est la clé de la maintenance de votre application.

Si vous n’avez pas une bonne structure, lorsque vous ou des nouveaux venus avez besoin de trouver l’endroit pour ajouter ou modifier des fichiers, le projet devient vite complexe et vous donne l’impression de trouver un endroit sûr dans la jungle.

Ensuite, nous discuterons de la mise en œuvre de la structure à l’aide de modules et de la division des exigences de l’application en fonctionnalités.

Modules et fonctionnalités

La documentation officielle d’Angular adopte la modularité en utilisant Modules angulaires pour regrouper les fonctionnalités de l’application et fournir un point de départ pour organiser avec des modules.

Les modules aident à regrouper et à encapsuler le code, en se concentrant sur une structure cohérente, l’évolutivité et la modularité et en facilitant la recherche de code et sa maintenance.

L’équipe Angular promeut le point suivant sur la structure, avec l’acronyme LEVER:

Structurez l’application de manière à pouvoir :

• Ltrouver le code rapidement
• jeidentifier le code en un coup d’œil
• Garder le Fdernière structure que vous pouvez
• Et JEssaye d’être SEC

L’objectif est de faciliter la navigation dans votre code et de trouver ce que vous recherchez : les services sont dans les services, les canaux sont dans ce répertoire et il n’y a pas de hiérarchie profondément imbriquée pour trouver quelque chose – vous pouvez réutiliser les composants et les services plutôt que de les créer à nouveau.

Par défaut, la CLI angulaire crée le module app.module, AKA module racine. Cela fonctionne comme point de départ pour votre application, ce qui fonctionne très bien pour les petites applications. Comme nous l’avons dit initialement, si votre application se développe avec plus de fonctionnalités, vous pouvez créer des modules supplémentaires tagués :

• Module racine
• Module de base
• Modules de fonctionnalités
• Module de partage

Le module racine

Le module racine prend en charge le chargement de tous les autres modules de votre application. Lorsque vous démarrez un nouveau projet, Angular crée le app.module dans le src/app; il fonctionne comme votre module racine.

Le module de base

Le module principal fournit des services et des modèles de singleton de portée racine utilisés dans l’ensemble de l’application et n’a aucune relation avec les modules de fonctionnalités.

Modules de fonctionnalités

Les modules de fonctionnalités contiennent une fonctionnalité d’application, par exemple, le paiement, l’achat ou les équipes. Chaque module a des composants, des directives, des canaux, des pages et des interfaces requis par le module, créant chacun comme un bloc.

En savoir plus sur modules de fonctionnalités.

Le module de fonctionnalités rend votre code autonome, indépendant et avec une responsabilité unique axée sur des fonctionnalités spécifiques.

Modules partagés

Le module de partage n’est pas lié à une fonctionnalité ; il répertorie les services, composants, canaux ou directives réutilisables utilisés dans d’autres modules de fonctionnalités.

En savoir plus sur modules partagés.

Nous avons déjà un aperçu de base de chaque type de module. Mettons-les en action.

Structurer un projet en action

Pour mettre nos compétences à l’épreuve, nous allons construire la structure de l’application NBA, et l’idée est de montrer comment diviser les fonctionnalités comme les joueurs, les équipes et les jeux, déclarer le noyau et partager des éléments.

À l’aide de la CLI angulaire, créez le nouveau projet :

ng new NBA

Cela génère le app.module fonctionnant comme notre noyau de chargement de module racine, les modules partagés et les modules de fonctionnalités.

Ensuite, créez trois répertoires core, features et shared.

Module de base

À l’aide de la CLI angulaire, nous créons le module principal et créons les répertoires pour les constantes, les gardes et les intercepteurs fournis par le module principal à l’application.

~/Documents/nba -  (master) $ ng g m core/core
CREATE src/app/core/core/core.module.ts (190 bytes)

core
┣ constants
┃ ┗ settings.ts
┣ guards
┣ interceptors
┣ models
┃ ┣ game.ts
┃ ┗ players.ts
┗ core.module.ts

Fonctionnalités

Le répertoire de fonctionnalités comporte plusieurs modules, dont chacun est une fonctionnalité de notre application. Par exemple, nba.com fournit des jeux, des brouillons, de la fantaisie, des joueurs et des équipes pour chaque fonctionnalité ou module, offrant à nos utilisateurs une expérience comme afficher la liste des joueurs et aller dans les détails.

À l’aide de la CLI angulaire, créez des modules pour chaque fonctionnalité de l’application, par exemple, draft.module.ts:

~/Documents/nba -  (master) $ ng g m features/draft
CREATE src/app/features/draft/draft.module.ts (192 bytes)

Ajoutez tout ce que le module fournit dans le répertoire de brouillon, comme les pages, les canaux, les services, les directives et les composants utilisés dans le contexte du jeu.

Le fichier [featurename].routing.module.ts fournit un routage vers chaque fonctionnalité. En savoir plus sur routage.

La structure finale de la fonctionnalité NBA :

features
┣ draft
┃ ┣ components
┃ ┣ directives
┃ ┣ pages
┃ ┃ ┣ details
┃ ┃ ┃ ┣ details.component.html
┃ ┃ ┃ ┣ details.component.scss
┃ ┃ ┃ ┣ details.component.spec.ts
┃ ┃ ┃ ┗ details.component.ts
┃ ┃ ┗ list
┃ ┃ ┃ ┣ list.component.html
┃ ┃ ┃ ┣ list.component.scss
┃ ┃ ┃ ┣ list.component.ts
┃ ┃ ┃ ┗ list.module.ts
┃ ┣ draft.module.ts
┃ ┗ teams.routing.module.ts
┣ fantasy
┃ ┣ components
┃ ┣ directives
┃ ┣ pages
┃ ┃ ┣ details
┃ ┃ ┗ list
┃ ┣ fantasy.module.ts
┃ ┗ fantasy.routing.module.ts
┣ games
┃ ┣ components
┃ ┣ directives
┃ ┣ pages
┃ ┃ ┣ details
┃ ┃ ┗ list
┃ ┣ games.module.ts
┃ ┗ games.routing.module.ts
┣ players
┃ ┣ components
┃ ┣ directives
┃ ┣ pages
┃ ┃ ┣ details
┃ ┃ ┗ list
┃ ┣ players.module.ts
┃ ┗ players.routing.module.ts
┗ teams
┃ ┣ components
┃ ┣ directives
┃ ┣ pages
┃ ┃ ┣ details
┃ ┃ ┗ list
┃ ┣ teams.module.ts
┃ ┗ teams.routing.module.ts

Le module de partage

Le module de partage n’a aucune relation avec aucune fonctionnalité ; il fournit des services partagés, des modules, des composants, des canaux et plus encore nécessaires pour communiquer entre l’ensemble de l’application.

En utilisant à nouveau la CLI, créez le module de partage et créez tout ce qui concerne le module dans le répertoire, comme les composants, les canaux et les services.

~/Documents/nba -  (master) $ ng g m share/share
CREATE src/app/features/share/share.module.ts (192 bytes)

Il ressemble à ceci :

share
┣ components
┣ pipes
┣ services
┗ share.module.ts

Parfait, nous avons terminé la structure de base. Si demain nous devons ajouter une nouvelle fonctionnalité comme un playoff ou une nouvelle fonctionnalité, créez un nouveau module dans le répertoire des fonctionnalités.

Pour l’exemple d’application, consultez le Référentiel Github.

Et consultez cette excellente ressource d’Angular : Structure de fichier angulaire

Sommaire

Nous avons couvert beaucoup de terrain. Récapitulons afin d’avoir une idée claire de ce que sont les fonctionnalités et les modules et pourquoi ils sont importants.

Partagez la structure avec votre équipe à propos du plan : divisez votre application en modules de fonctionnalités et conservez un module par fonctionnalité, utilisez les modules principaux et partagés pour éviter les doublons, et partagez les composants et les services dans l’application.

N’oubliez pas qu’il n’y a pas de plan pour structurer votre application Angular – cela changera en fonction de chaque scénario, mais j’espère que cela vous aidera à commencer à créer votre application.