AngularJS

Arborescence

AngularJS n'a pas besoin d'une arborescence spécifique pour fonctionner. Néanmoins comme pour tout projet, il est préférable de bien organiser vos fichiers.

C'est pourquoi je vous propose l'arborescence suivante qui permet de bien différencier les différents fichiers javascript utilisés dans votre application angularJS.

css

Le dossier "css" vous permet d'éviter l'accumulation de fichiers .css à la racine de l'application. Vous pourrez y introduire les fichiers css que vous aurez créé, ainsi que ceux nécessaires aux modules.

images

Il vous servira à ranger les images nécessaires à votre application.
N'hésitez pas à créer des sous-dossiers pour les images liées aux modules utilisés.

js

Nous regrouperons ici l'ensemble des fichiers javascript de l'application.
Pour y voir plus clair, j'ai créé des sous-dossiers dans lesquels nous pourrons ranger nos modules, filtres, controllers, ...

angular.min.js
Il s'agit du fichier obligatoire pour la création d'une application angularJs. Il est préférable de le télécharger depuis le site officiel.

app.js
Ce fichier regroupera la création et la configuration de l'application angularJS.

views

Ce dossier intégrera plusieurs fichiers HTML qui seront chargés dynamiquement en fonction de la page demandée par l'internaute.
Ce qu'il faut savoir pour l'instant, c'est que le dossier views ne comportera que des fichiers .html.

index.html

Grâce à cette arborescence, nous pouvons remarquer qu'il ne reste plus que le fichier index.html à la racine de l'application. Une application angularJS étant créée de façon à ce qu'il n'y ai aucun rechargement de page mais uniquement des modifications de vues, il ne devrait donc pas y avoir d'autres fichiers à la racine.

  • monAppli
    • CSS
      • style.css
    • images
      • image.jpg
    • js
      • controllers
        • main.js
      • directives
        • directive.js
      • factories
        • factorie.js
      • filtres
        • filtre.js
      • modules
        • module.js
      • angular.min.js
      • app.js
    • views
      • main.html
    • index.html