Lorsque vous développez un projet avec Angular ou Ionic, son organisation peut vite devenir un vrai casse-tête. Voici quelques tips pour mieux l'organiser.

Vous vous posez probablement la question "Où placer mon composant ?", ou encore "Comment nommer mon composant ?"...
Pour un petit projet, une librairie, c'est assez simple et évident. Pour des gros projets, on se creuse un peu plus les méninges. Car bien entendu, il faudra gérer l'imbrication des composants, la connexion entre eux, les services...

Il existe un guide proposé par Angular sur le code: Angular coding style guide. Cependant, tout n'y est pas.

Je vous propose donc une solution.

Tour d'horizon

Avant d'aborder le sujet, je vous propose de faire un tour d'horizon sur les terminologies Angular, décrites sous un autre angle :

• @Component: désigne le composant principal d'Angular proposant la fonctionnalité souhaitée. Ex: Gérer un champ de recherche avec suggestion.
• @NgModule: regroupe des composants, directives, services pour une fonctionnalité / un projet. Ex: Gérer une page de recherche avec un champ, la liste des résultats, un service pour accéder aux données, ...
• @Directive: donne des fonctionnalités supplémentaires à un composant Angular ou du DOM. Ex.: Gérer l'affichage d'une image par défaut, si l'url chargée d'un composant <img> comporte une erreur.

Il existe bien entendu d'autres "decorator" que vous pouvez retrouver ici.

Donner plusieurs niveaux d'abstraction au projet

Un projet Angular est fait de Composants qui s'imbriquent les uns par rapport aux autres, afin de proposer l'App finale: pour faire simple, le composant est la fonctionnalité principale d'un projet Angular.

Cependant, pour mieux identifier chaque type de composant et avoir une meilleur organisation, on donnera des définitions supplémentaires :

• un composant de type page, nommé mon-composant-page.page.ts, définit un composant routable, c'est-à-dire une page de l'app accessible via une route.
• un composant de type modal, nommé mon-composant-modal.page.ts, qui définit un composant qui se superpose, c'est à dire une popup.
• un dossier composant précédé de underscore (_), comme par exemple _mon-composant/mon-composant.component.ts définit un composant abstrait, c'est-à-dire qui est exclusivement inclu dans un autre (aka la notion de abstract).

Vous pouvez ainsi donner une multitude de définitions en fonction de vos besoins, ce qui facilitera la compréhension du composant, sa recherche, sa finalité... et surtout qui organisera mieux votre projet Angular

Structure des fichiers

Il est assez simple de définir une architecture des fichiers d'un petit projet. Pour un projet plus complexe, cela devient moins évident.

Voici donc une façon de structurer son projet Angular:

app:    # Dossier de l'app
    _components: # Tous les composants communs, ecclusivement inclus par d'autres. Ce sont généralement des modules indépendants.
        header: # Composant de gestion de la toolbar en haut de page (Header)
            header.component.ts
            header.component.scss
            header.component.html
            header.module.ts
        footer: # Composant de gestion du footer de page (Footer) 
            footer.component.ts
            footer.component.scss
            footer.component.html
            footer.module.ts
        alert: # Composant qui gére les alertes de l'app
            alert.modal.ts
            alert.modal.scss
            alert.modal.html
            alert.module.ts
        #  ...
    _interfaces: # Toutes les interfaces de l'application (API liés aux web-services)
        home.interface.ts # Fichier qui contient tous les interfaces des endpoints de la Home
    _services:   # Tous les services de l'application (Service Worker) - Par exemple, connexion à un API; récupérer et appliquer un thème...
        home.service.ts # Service qui gére l'interface avec les endpoints de la Home
    _pipes: # Tous les décorateurs de type `@Pipe` 
    home: # Composant pour gérer la home de l'app
        _search: # Componsant qui gére le champs recherche de la Home
            search.component.ts
            search.component.scss
            search.component.html
        home.page.ts
        home.page.scss
        home.page.html
        home.module.ts
    connection: # Composant pour gérer la connection à l'app
        password-forget: # Composant pour gérer les mots de passe oublié
            password-forget.page.ts
            password-forget.page.scss
            password-forget.page.html
            password-forget.module.ts
        connection.page.ts
        connection.page.scss
        connection.page.html
        connection.module.ts

Cette façon d'organiser est assez générique et facile à comprendre. Bien entendu, le type d'organisation est fortement lié au projet (un projet qui héberge plusieurs Apps au sein d'un même code peut utiliser plusieurs niveaux de composants communs par exemple). A vous de l'organiser de la meilleure façon possible, et n'ayez pas peur du refactoring.

J'espère que cet article vous a été utile.

Je vous dis à plus pour le prochain article.

Liens utiles :

• Angular coding style guide

Article précédent Article suivant