proyecto - Estructura de carpetas AngularJS

mvc angular php

Question

¿Cómo se diseña una estructura de carpetas para una aplicación AngularJS grande y escalable?

Answer 1

Después de crear algunas aplicaciones, algunas en Symfony-PHP, algunas .NET MVC, algunas ROR, he descubierto 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 se mantiene mejor.

Y lo más importante, al mantener esa estructura, le ayuda a separar el código del lado del cliente y hacerlo agnóstico a la tecnología del lado del servidor (todo tipo de estructuras de carpetas diferentes y diferentes motores de plantillas del lado del servidor).

De esta forma, puede duplicar y reutilizar fácilmente el suyo y el código de los demás.

Aquí está antes de la compilación de grunt: (¡pero usa el generador de yeoman, no lo crees!)

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

Y después de la compilación de grunt (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 2

Estoy en mi tercera aplicación angularjs y la estructura de carpetas ha mejorado cada vez que lo hago. Mantengo el mío simple ahora mismo.

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 donde necesitaría múltiples.

Answer 3

Me gusta this entrada sobre la estructura angularjs

Está escrito por uno de los desarrolladores de angularjs, así que debería darte 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
    └── ...

Answer 4

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 inicio github que ilustra esta llamada https://github.com/angular-app/angular-app .

Answer 5

Ordenar por tipo

A la izquierda tenemos la aplicación organizada por tipo. No está mal para las aplicaciones más pequeñas, pero incluso aquí puede empezar a ver que se vuelve más difícil encontrar lo que está 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.

Ordenar por característica (preferido)

A la derecha, el proyecto está organizado por función. Todas las vistas de diseño y los controles van en la carpeta de diseño, el contenido de administrador va en la carpeta de administración y los servicios que usan todas las áreas van a la carpeta de servicios. La idea aquí es que cuando busca el código que hace que una característica funcione, está ubicado 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