Structure des dossiers d'AngularJS

Question

Comment organiser une structure de dossiers pour une application AngularJS de grande taille et évolutive ?

Answer 1

Fonctionnalité de tri par (préférée)

À droite, le projet est organisé par fonction. Toutes les vues et tous les contrôleurs de mise en page sont placés dans le dossier layout, le contenu de l'administration est placé dans le dossier admin, et les services utilisés par toutes les zones sont placés dans le dossier services. L'idée est que lorsque vous recherchez le code qui fait fonctionner une fonctionnalité, il se trouve à un seul endroit. Les services sont un peu différents car ils "servent" de nombreuses fonctionnalités. J'aime cette méthode lorsque mon application commence à prendre forme, car elle devient beaucoup plus facile à gérer pour moi.

Trier par type

Sur la gauche, nous avons l'application organisée par type. Ce n'est pas trop mal pour les petites applications, mais même ici vous pouvez commencer à voir qu'il devient plus difficile de trouver ce que vous cherchez. Lorsque je veux trouver une vue spécifique et son contrôleur, ils sont dans des dossiers différents. Il peut être bon de commencer ici si vous ne savez pas comment organiser le code autrement, car il est assez facile de passer à la technique de droite : la structure par fonction.

http://www.johnpapa.net/angular-growth-structure/

Petit exemple d'application : https://github.com/clouddueling/angular-authentication-example

Grand exemple d'application : https://github.com/angular-app/angular-app

Answer 2

Après avoir créé quelques applications, certaines en Symfony-PHP, d'autres en .NET MVC, d'autres encore en ROR, j'ai constaté que la meilleure façon de procéder était d'utiliser Yeoman.io avec le générateur AngularJS.

C'est la structure la plus populaire et la plus courante, et la mieux entretenue.

Et surtout, en conservant cette structure, elle vous aide à séparer votre code côté client et à le rendre agnostique par rapport à la technologie côté serveur (toutes sortes de structures de dossiers différentes et de moteurs de création de modèles côté serveur).

De cette façon, vous pouvez facilement dupliquer et réutiliser votre code et celui des autres.

Le voici avant la construction par Grunt : (mais utilisez le générateur yeoman, ne le créez pas simplement !)

/app
    /scripts
            /controllers
            /directives
            /services
            /filters
            app.js
    /views
    /styles
    /img
    /bower_components
    index.html
bower.json

Et après le grunt build (concat, uglify, rev, etc...) :

    /scripts
        scripts.min.js (all JS concatenated, minified and grunt-rev)
        vendor.min.js  (all bower components concatenated, minified and grunt-rev)
    /views
    /styles
        mergedAndMinified.css  (grunt-cssmin)
    /images
    index.html  (grunt-htmlmin)

Answer 3

J'aime cet article sur la structure d'Angularjs :

http://briantford.com/blog/huuuuuge-angular-apps.html

Il a été écrit par l'un des développeurs angularjs, ce qui devrait vous donner un bon aperçu de la situation.

Answer 4

Il y a aussi l'approche consistant à organiser les dossiers non pas en fonction de la structure du framework, mais de la structure de la fonction de l'application. Il existe une application Angular/Express de démarrage sur github qui illustre cette approche et qui s'appelle angular-app .

Answer 5

J'en suis à ma troisième application angularjs et la structure des dossiers s'est améliorée à chaque fois jusqu'à présent. Je garde la mienne simple pour le moment.

index.html (or .php)
/resources
  /js
  /css
  /images
  /fonts (bootstrap)

Je trouve ça bien pour les applications uniques. Je n'ai pas encore eu de projet où j'aurais eu besoin de plusieurs.