Comment mettre en page une structure de dossiers pour une application AngularJS volumineuse et évolutive?
Réponses:
Sur la gauche, nous avons l'application organisée par type. 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: structure par fonctionnalité.
Sur la droite, le projet est organisé par fonctionnalité. Toutes les vues de mise en page et tous les contrôleurs vont dans le dossier de mise en page, le contenu de l'administrateur va dans le dossier d'administration et les services qui sont utilisés par toutes les zones vont dans le dossier des services. L'idée ici est que lorsque vous recherchez le code qui fait fonctionner une fonctionnalité, il se trouve au même endroit. Les services sont un peu différents car ils «desservent» de nombreuses fonctionnalités. J'aime cela une fois que mon application commence à prendre forme car elle devient beaucoup plus facile à gérer pour moi.
Un article de blog bien écrit: http://www.johnpapa.net/angular-growth-structure/
Exemple d'application: https://github.com/angular-app/angular-app
Après avoir construit quelques applications, certaines dans Symfony-PHP, certains .NET MVC, certains ROR, j'ai trouvé que le meilleur moyen pour moi est 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, cela vous aide à séparer votre code côté client et à le rendre indépendant de la technologie côté serveur (toutes sortes de structures de dossiers différentes et différents moteurs de modèles côté serveur).
De cette façon, vous pouvez facilement dupliquer et réutiliser le vôtre et d'autres codes.
Le voici avant la construction de grunt: (mais utilisez le générateur yeoman, ne vous contentez pas de le créer!)
/app
/scripts
/controllers
/directives
/services
/filters
app.js
/views
/styles
/img
/bower_components
index.html
bower.jsonEt après la compilation de grognement (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)angular.module('myApp').config(function($routeProvider) { ... });
J'aime ça entrée sur la structure angularjs
Il est écrit par l'un des développeurs angularjs, il devrait donc vous donner un bon aperçu
Voici un extrait:
root-app-folder
├── index.html
├── scripts
│ ├── controllers
│ │ └── main.js
│ │ └── ...
│ ├── directives
│ │ └── myDirective.js
│ │ └── ...
│ ├── filters
│ │ └── myFilter.js
│ │ └── ...
│ ├── services
│ │ └── myService.js
│ │ └── ...
│ ├── vendor
│ │ ├── angular.js
│ │ ├── angular.min.js
│ │ ├── es5-shim.min.js
│ │ └── json3.min.js
│ └── app.js
├── styles
│ └── ...
└── views
├── main.html
└── ...Il y a aussi l'approche consistant à organiser les dossiers non pas par la structure du framework, mais par la structure de la fonction de l'application. Il existe une application Angular / Express github starter qui illustre cette application appelée angular-app .
Je suis sur ma troisième application angularjs et la structure des dossiers s'est améliorée à chaque fois jusqu'à présent. Je garde le mien simple en ce moment.
index.html (or .php)
/resources
/css
/fonts
/images
/js
/controllers
/directives
/filters
/services
/partials (views)Je trouve que c'est bon pour les applications uniques. Je n'ai pas encore vraiment eu de projet où j'aurais besoin de plusieurs.