Tutorial de AngularJS: Tema 4 – Estructura

AngularJS

Hola de nuevo!

Hoy vamos a ver la estructura de carpetas y ficheros propuesta por Angular cuando empezamos a hacer un proyecto en AngularJS.En todos los tutoriales que hay por la red, al principio el código de AngularJS se escribe en el mismo fichero html con el que se hace el ejemplo. Conforme vamos avanzando, el código se va llevando a ficheros JavaScript externos para poder manejarlo mejor. De este modo, aunque AngularJS nos permita poner nuestro código en un único fichero, recomendamos que las directivas, servicios, filtros, etc. se saquen a ficheros independientes que únicamente tendremos que incluir al fichero index.html de modo que todo se cargue cuando se carga este.

Esto es en mi opinión punto débil de AngularJS aunque realmente es lo que le da su potencia: que todas las dependencias deben haberse inicializado de antemano, la carga inicial suele ser más pesada y además no se puede cargar código JavaScript en otras páginas que no sean la principal. Hay que pensar que estamos programando una aplicación web y no una web al uso y que va a ser una SPA por lo que todo se debe cargar en una página inicial (excepto las imágenes y otros recursos).

Volviendo al tema principal… como decíamos, conforme nuestra aplicación va creciendo y tomando forma, nos daremos cuenta que es necesario separar el código en varios ficheros para tenerlo limpio y saneado (porque en esta vida hay que ser limpico, eh, también en la programación). Para evitar quebraderos de cabeza, el equipo de AngularJS nos propone dos soluciones:

  1. La primera es usar el proyecto angular-seed. Angular-seed es básicamente un esqueleto de una típica aplicación AngularJS, por lo que sólo necesitas clonar el repositorio o descargarte el .zip y estas listo para comenzar a programar.
  2. La otra es usar yeoman. Yeoman es una herramienta que, básicamente, va a crear el esqueleto y agregar otras herramientas como bower y grunt, bastante usadas en desarrollo de aplicaciones con JavaScript.

Cualquiera de las dos nos va a ser muy útil, pero dependerá finalmente de nosotros cómo va a quedar la estructura final. Por ejemplo: angular-seed dispone una carpeta app donde pondremos los ficheros estáticos (index.html, app.js y otros) y dentro de esa carpeta otra carpeta components con los archivos javascript de la aplicación como controllers.js, services.js, etc. Esto puede ser caótico cuando nuestra aplicación empiece a tener mucho código y podría llegar el momento en el que tendremos que tomar la decisión de separarlo dependiendo de lo que signifiquen para la aplicación (vendor-controller.js, customer-controller.js, etc.) o por carpetas si tanto fichero acumulado nos puede marear. Únicamente tendremos que recordar incluir estas rutas en la carga del index y todo funcionará a la perfección.

Es en este punto donde os preguntaréis: ¿Cómo? Si yo me equivoco y cargo antes un módulo que otro, ¿no petará? La respuesta es no y el encargado de esto es la inyección de dependencias, que no es más (ni menos) que cuando yo uso un módulo que depende de otro tendré que añadir su dependencia en su función constructora, si no no irá. Esto hace que el orden en el que lo incluya en el fichero no importe, porque todo se carga de antemano y se utiliza cuando se requiere.

Así que, resumiendo, AngularJS nos propone una estructura que podemos seguir para ubicar nuestro código, pero al final dependerá de cuánto crezca y de nosotros mismos donde situarlo para que luego sea fácil de mantener, ya que al final la inyección de dependencias se va a encargar de que todo engrane perfectamente.

El próximo tutorial ya va a incluir código, vamos a programar nuestro primer hola mundo en AngularJS.

Deja un comentario

A %d blogueros les gusta esto: