¿Cómo diseña una estructura de carpetas para una aplicación AngularJS grande y escalable?
Respuestas:
A la izquierda tenemos la aplicación organizada por tipo. No está mal para aplicaciones más pequeñas, pero incluso aquí puedes comenzar a ver que es más difícil encontrar lo que estás buscando. Cuando quiero encontrar una vista específica y su controlador, están en diferentes carpetas. Puede ser bueno comenzar aquí si no está seguro de cómo organizar el código, ya que es bastante fácil cambiar a la técnica de la derecha: estructura por característica.
A la derecha, el proyecto está organizado por características. Todas las vistas y controladores de diseño van en la carpeta de diseño, el contenido del administrador va en la carpeta de administrador y los servicios que utilizan todas las áreas van en la carpeta de servicios. La idea aquí es que cuando está buscando el código que hace que una característica funcione, se encuentra en un solo lugar. Los servicios son un poco diferentes, ya que "dan servicio" a muchas funciones. Me gusta esto una vez que mi aplicación comienza a tomar forma, ya que se vuelve mucho más fácil de administrar para mí.
Una publicación de blog bien escrita: http://www.johnpapa.net/angular-growth-structure/
Aplicación de ejemplo: https://github.com/angular-app/angular-app
Después de construir algunas aplicaciones, algunas en Symfony-PHP, algunas .NET MVC, algunas ROR, descubrí que la mejor manera para mí es usar Yeoman.io con el generador AngularJS.
Esa es la estructura más popular y común y mejor mantenida.
Y lo más importante, al mantener esa estructura, le ayuda a separar su código del lado del cliente y hacerlo independiente de la tecnología del lado del servidor (todo tipo de diferentes estructuras de carpetas y diferentes motores de plantillas del lado del servidor).
De esa manera, puede duplicar y reutilizar fácilmente el código suyo y de otros.
Aquí está antes de la construcción de gruñidos: (pero use el generador yeoman, ¡no lo cree solo!)
/app
/scripts
/controllers
/directives
/services
/filters
app.js
/views
/styles
/img
/bower_components
index.html
bower.jsonY después de 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)angular.module('myApp').config(function($routeProvider) { ... });
Me gusta esta entrada sobre la estructura angularjs
Está escrito por uno de los desarrolladores de angularjs, por lo que debería darle una buena idea
Aquí hay un extracto:
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
└── ...También existe el enfoque de organizar las carpetas no por la estructura del marco, sino por la estructura de la función de la aplicación. Hay una aplicación Angular / Express de arranque de github que ilustra esta llamada aplicación angular .
Estoy en mi tercera aplicación angularjs y la estructura de carpetas ha mejorado cada vez hasta ahora. Mantengo el mío simple en este momento.
index.html (or .php)
/resources
/css
/fonts
/images
/js
/controllers
/directives
/filters
/services
/partials (views)Me parece bueno para aplicaciones individuales. Realmente no he tenido un proyecto todavía donde necesitaría múltiples.