Débuter avec AngularJS – L’architecture d’un projet

/ 27/11/2014

Lors de projets un minimum conséquent, il convient de penser son architecture… Différents articles donnent des conseils intéressants mais avant tout, en plus de nos préférences personnelles en matière d’organisation, il est important de savoir où on va car cela va réellement nous aider à faire nos choix.

  • Mon projet est-il constitué de modules ?
  • Voudrais-je en activer certains et pas d’autres ?
  • Mon application sera-t-elle en plusieurs langues ?
  • Mon projet dépend peu être d’une api externe qui évolue régulièrement ?
  • etc…

De nombreuses questions peuvent donc s’ajouter à cette liste.

Je vais donc présenter mes idées et déductions au fil de mes expériences, qui selon moi, sont importantes à prendre en compte pour se faciliter le développement, surtout pour les projets qui durent longtemps…

app
     |___ css (1)
     |___ img (2)
     |___ js (3)
               |___ app.js (4)
               |___ appCtrl.js (5)
               |___ directive-name-1 (6)
                         |___ directiveName1Directive.js (7)
                         |___ directiveName1Ctrl.js (8)
                         |___ directiveName1View.html (9)
               |___ directive-name-2
                         |___ directiveName2Directive.js
                         |___ directiveName2Ctrl.js
                         |___ directiveName2View.html
    |___ templates (10)
               |___ view1.html (11)
               |___ view2.html

Voici les raisons qui ont motivés ces choix :

      1. Le dossier css : placer les feuilles de style dans un seul et même dossier
      2. le dossier img : placer les images relatives au style du site dans un seul et même dossier
        (Note : pour les image de contenu on pourra les placer dans une autre application web (img.mon-app.fr) ou créer 2 sous-dossiers à « img » : « style » et « content »)
      3. Le dossier js : placer tous les fichiers javascript de l’application dans un seul et même dossier (celui-ci contenant bien-sûr d’autres dossiers).
      4. Le fichier app.js est le point d’entrée de mon application, le placer à la racine du dossier JS est simplement logique.
      5. Le fichier appCtrl.js est le controller principal de mon application, je conseille donc de le laisser dans le même dossier que app.js, donc ici, à la racine du dossier JS.
      6. Les dossiers des directives, pour des raisons pratiques, le fichier de déclaration, son contrôleur et les fichiers de vue (oui les fichiers html y sont inclus, mais vous verrez que c’est beaucoup plus lisible comme ça). Chaque directive est donc dans un dossier portant son nom (pour moi, suivant la convention de nommage d’angular maDirective -> ma-directive).
      7. Le fichier de déclaration de la directive, inclus donc dans son dossier, va juste permettre de créer celle-ci et de lier sa vue à son contrôleur.
      8. Le fichier contrôleur de la directive, inclus dans son dossier, va être un simple contrôleur associé à la vue grâce à la déclaration de la directive.
      9. Le fichier template, la vue de la directive, incluse dans son dossier, est le rendu visuel et est associée à son contrôleur via la déclaration de la directive.
      10. Ce dossier contient toutes les vues et contient les fichiers template HTML des pages.
      11. Les templates sont les vues HTML utilisées notamment lors du routing, pour séparer les vues. On aura un template par page. Chacune de ces vues est liée ou non à un contrôleur.

 

A vous de définir vos besoins, de comparer, de vous inspirer pour créer l’architecture ADAPTÉE et qui respecte votre logique d’organisation ainsi qu’à votre équipe car si l’équipe n’approuve pas l’architecture ou ne participe pas aux décisions de celle-ci les risques que le code perde en lisibilité et organisation sont multipliés !

Il s’agit d’une première approche que j’ai de mes retours d’expérience, mais j’espère avoir le temps de présenter un article plus poussé à ce sujet.

Articles en rapport