Structure des dossiers dans AngularJS

Rana Hasnain Khan 15 février 2024
Structure des dossiers dans AngularJS

Cet article montre comment mettre en page une structure de dossiers pour une application AngularJS volumineuse et évolutive.

Structure des dossiers dans AngularJS

Notre application Angular se développe, et nous souhaitons que notre structure s’adapte. Au fur et à mesure que notre application grandit, il devient encore plus important de structurer pour faciliter la gestion et la maintenance de notre application pendant sa croissance.

Il existe deux approches pour faciliter la compréhension, la maintenance et la gestion de notre application. La première consiste à trier nos fichiers selon leurs types respectifs.

Par exemple, en organisant Controllers dans le dossier Controllers, Views dans le dossier View, Services dans le dossier Services.

Structure des dossiers dans AngularJS

Sur le côté gauche, nous utilisons Trier par type, dans lequel nous avons organisé nos fichiers par types. Cette structure de dossiers est utile pour une petite application avec peu de views, controllers et services.

Mais imaginez si nous avons 30 ou 40 controllers, views et services, il sera très difficile de trouver le bon fichier que nous recherchons.

La deuxième méthode (côté droit) est Sort By Feature, triant nos fichiers par fonctionnalités; c’est la meilleure méthode pour trier notre structure de dossiers pour une application plus grande et évolutive. Cette méthode est facile à comprendre, à maintenir et à gérer.

Nous avons organisé nos fichiers par caractéristiques sur le côté droit de l’image ; nous avons créé des dossiers pour chaque fonctionnalité.

Chaque dossier contient un view, un service, et un controller pour une certaine fonctionnalité. Il est très facile de trouver et de modifier la fonctionnalité que nous recherchons.

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn