Dans une grande équipe de développeurs partageant la même base de code, il est essentiel de s’entendre sur la manière de structurer l’application. Cet article propose une structure efficace pour les projets Angular de taille moyenne à grande. .
Avant de se lancer
Si vous souhaitez en apprendre davantage sur cette technologie, nos formations Angular vous apprendront tout ce qu’il y a à savoir afin que vous puissiez développer une nouvelle application, utiliser les composants principaux tels que les tests unitaires et fonctionnels au développement Vous pourrez également monter en compétences grâce à la formation avancée du framework.
L’équipe Ambient IT
La structure d’un projet
Un projet bien structuré ne permettra pas à votre application Angular d’être plus performante ou plus rapide, cependant, la navigation entre fichiers sources sera facilité. Une structure bien entretenu va efficacement maintenir votre application. Cela permet également d’avoir un projet organisé, que ce soit pour des modifications ou des ajouts, il sera très simple de s’y retrouver contrairement à une mauvaise structure.
Les modules
Angular dispose d’une documentation officielle qui regroupe toutes les fonctionnalités de l’application afin de fournir un point de départ pour organiser ses modules. Les modules vont aider à encapsuler le code en se concentrant sur une structure cohérente et évolutive, en facilitant la recherche du code et de la maintenance.
Les équipes Angular ont mis en place un acronyme nommé LIFT (Locate, Identify, Flat, T-DRY) :
- Localiser le code rapidement
- Identifier le code en un coup d’œil
- Conserver la structure la plus plate possible
- T-DRY : Réutiliser les fonctionnalités à la place de les écrire à partir de zéro
Cette méthode a pour objectif de faciliter la navigation, ce que vous voulez rechercher, vous le trouverez sans avoir à passer par plusieurs chemins. Vous pourrez réutiliser les composants et les services à la place de vouloir en recréer, car ils ont justement été créés pour être réutilisé.
La CLI Angular a créé le module app.module qui est le module racine servant de point de départ à votre application. Si votre application se développe avec plusieurs fonctionnalités, il est possible de créer des modules supplémentaires étiquetés dans :
- Module de fonctionnalités
- Module de partage
- Module de base
- Module racine
Les modules de fonctionnalités
Ces modules permettent d’organiser le code. Ils contiennent une fonctionnalité d’application tels que le paiement, l’achat ou les équipes. Les modules de fonctionnalités vont permettre d’appliquer des limites claires aux fonctionnalités, cela signifie que la conservation d’un code lié à une fonctionnalité sera séparé d’autres codes.
Ainsi, cette délimitation des zones de votre application facilitera la collaboration entre les développeurs et les équipes, la séparation des directives et la gestion de la taille du module racine.
La documentation officielle d’Angular vous indique comment procéder pour créer un module de fonctionnalité.
Les modules partagés
Ces modules concernent la réserve de votre galerie, abritant des éléments réutilisables comme les directives, les canaux ou les composants fréquemment utilisés dans un seul module, par la suite, ce module pourra être importé là où vous le souhaiterez lorsque vous en aurez besoin dans diverses parties de votre application.
Les modules de base
Le module de base permet de fournir des services et des modèles partagés utilisés dans l’ensemble de votre création. Les fichiers présents ont besoin d’être chargés qu’une seule fois au moment de l’exécution, ce qui les rend singleton. Il contient des composants statiques comme la barre de navigation ou le pied de page. Pour éviter de réimporter le module ailleurs, nous devrions ajouter un module-import-guard dans sa méthode constructeur.
Les modules racine
Ce module gère le chargement des différents modules de votre application, il est généralement créé au début de votre projet. Lors d’un nouveau projet, crée le app.module dans le src/app; il permettra d’être votre module racine.
Les modes
Il est préférable de créer un dossier de styles, qui contient des mixins ou des fonctions CSS, Ces fichiers seront ensuite importés dans l’ordre approprié dans le fichier styles.scss, fournissant ainsi leurs styles globaux au reste de l’application. Créez des mixins pour des extraits de code CSS réutilisables et étendez la logique associée ensemble.
Les actifs
Le dossier Assets est généré par la CLI Angular avec la ng newcommande et constitue l’endroit idéal pour stocker tous vos fichiers multimédias. Son utilisation en combinaison avec PathLocationStrategy donne des fichiers facilement consultables dans l’application. Ce dossier persiste au moment de la construction.
Structure de test
La qualité du code de votre application est améliorée et sa fiabilité est assurée par un environnement de test bien organisé. Il est important de penser à utiliser une structure similaire pour organiser vos tests avec les fichiers sources pertinents. Ceci rendra les tests simples à naviguer et à maintenir. Voici un exemple :
application/
├── composants/
│ ├── composant1/
│ │ ├── composant1.component.ts
│ │ ├── composant1.component.spec.ts
│ │ └── ...
│ └── composant2/
│ ├── composant2.component.ts
│ ├── composant2.component.spec.ts
│ └── ...
├── prestations/
│ ├── data.service.ts
│ ├── data.service.spec.ts
│ ├── api.service.ts
│ └── api.service.spec.ts
└── ...Conclusion
Pour résumer, la structuration de votre projet Angular est essentielle pour sa maintenabilité et son évolutivité. En suivant les principes de modularité et en organisant votre code de manière logique, vous rendrez votre application plus facile à gérer. Il est donc nécessaire de diviser votre application en modules de fonctionnalités et conservez un module par fonctionnalité, utiliser des modules de base et partagez-les pour éviter la duplication et partagez également des composants et des services dans l’application.
Il ne faut pas oublier qu’il n’existe pas de modèle pour structurer votre application Angular, car cela changera en fonction de chaque scénario.
