ARBORESCENCE D’UN PROJET ANGULARJS

Dans les tutos internet  les propositions de structure de projets sont plutôt faites pour les petits projets ou les projets test :

  • un dossier partials ( home.html, login.html, music.html etc…)
  • un dossier services (home.js, login.js, music.js)
  • un dossier directive (home.js, login.js, music.js)
  • etc…
  • un dossier vendor (angular, bootsrap, jquery etc…)

Ok pour tester ou un très petit projet

Mais pour des projets un peu plus conséquent, penser à utiliser une structure qui sera plus pérénne

Une structure scalable et maintenable pour les gros projets est d’organiser les fichiers par composant.


- app
     - app Code source et ressources de l’application
     - common
        - constant constantes communes de l’application
        - directives Directives communes de l’application
        - filter Filtres communes de l’application
        - sass Feuilles de styles CSS commune à toute l app
        - services Services communes de l’application
     - components
        - unModule module de l’application
            unModule.html Page du module
            unModule.scss Feuilles de styles CSS du module
            unModule.controller.js Contrôleurs Angular spécifiques au module
            unModule.service.js Services Angular spécifiques au module
            unModule.filter.js Filtres / formateurs Angular spécifiques au module
            unModule.spec.js Test spécifiques au module
        - unAutreModule
            unAutreModule.html
            unAutreModule.scss
            unAutreModule.controller.js
            unAutreModule.service.js
            unAutreModule.filter.js
            unAutreModule.spec.js
    - i18n Fichiers JSON de traduction de l’application
    - assets Images et icône
    - dist Répertoire de destination du livrable de production
    - node_modules Librairies tierces déclarées dans package.json
    - vendor Librairies tierces qui ne se trouve âs sur NPM

    index.html Page principale de la Single Page Application
    index.scss SCSS qui intégre toutes les scss
    index.js Déclaration des modules et démarrage de l’application

Ressource

https://github.com/addisonedwardlee/angular-demo