Como organizar un proyecto en AngularJS

Cuando comencé a meterme en el mundo de AngularJS encontré mucha documentación de cómo realizar tal tarea o como implementar determinado comportamiento, pero existe muy poca información en la web respecto a cómo estructurar el proyecto y que componentes arquitectónicos voy a tener. Cualquier proyecto de mediano porte que queramos arrancar de cero comienza con la misma pregunta, ¿cómo organizo el proyecto para que a medida que crezca de tamaño no se torne inmanejable?. La idea es poder organizar el proyecto para que pueda encontrar las cosas de forma rápida y sencilla, y por sobre todo para no duplicar código, especialmente en los accesos a los servicios web (ya sean SOAP o REST).

Con varios proyectos encima es sencillo armar una estructura para el proyecto, pero cuando uno es un novato en esto de Angular pasa a ser un poco más difícil poder dar con un modelo que se ajuste a la mayoría de los proyectos.

Para poder definir una estructura en el proyecto es importante establecer que componentes arquitectónicos vamos a tener, haciendo un repaso rápido podemos encontrar los siguientes elementos:

  • Vistas: Archivos HTML con el contenido estático de las distintas páginas y los tags de Angular.
  • Archivos de definición y configuración de Angular (app.js).
  • Controladores:  Controladores de Angular.
  • Servicios: Factory de Angular que realizan los llamados a los servicios Web.
  • Librerias JS, Archivos CSS e Imagenes.

Habiendo identificado todos los elementos que compondrán nuestra aplicación procederemos a armar una estructura de carpetas y archivos que permitan ubicar a cada uno de estos items en un lugar determinado.

Estructura Angular
Imagen 1: Estructura Proyecto

En la «Imagen 1» se representa un modelo de como quedaría organizado nuestro proyecto de una manera sencilla y fácil de entender.

En esta estructura colocaremos cada unos de los elementos de nuestro proyecto que hemos identificado anteriormente, quedando de la siguiente manera:

  • Las Vistas (archivos HTML) estarán dentro de la carpeta /views
  • Los archivos de configuración de AngularJS (app.js, directives.js, etc.) estarán dentro de la carpeta /app/js
  • Los Controladores estarán dentro de la carpeta /app/js/controllers
  • Los Services estarán dentro de la carpeta /app/js/services
  • Las librerias de javascript estatán dentro de la carpeta /app/js/lib
  • Los archivos CSS dentro de /app/css
  • Las imágenes dentro de /app/img
  • El archivo principal index.html obviamente estará en el raiz

 

Existen muchas formas de organizar un proyecto web con AngularJS, esta es una forma sencilla que permite estructurar el mismo acorde a los diferentes componentes que vamos a utilizar, y es la que mejor se ha adaptado a los proyectos con los que he trabajado.

No pretendo con este post entrar en conceptos teóricos respecto de Angular, ya existe mucha y buena información en la web que nos explica claramente estos aspectos. Este post es más bien una ayuda para todos aquellos que recién comienzan a trabajar con AngularJS y no saben como organizar el proyecto, situación en la cual me he visto envuelto y que lamentablemente en la web casi no se encuentra información al respecto.

Get in Touch