Una vez que ya sabemos cómo funciona AngularJS en forma básica, debemos saber también que para generar un proyecto debemos tener una estructura, ya que con ella podremos organizar los contenidos y con ello podremos incluir más personas en el desarrollo y que todo siga funcionando.
Normalmente podemos hacer una estructura de forma manual, sin embargo hay herramientas que nos ayudan con estas tareas de forma automatizada, así que tenemos ambas opciones, las herramientas automatizadas nos ayudan a siempre mantener una convención con lo que podremos reutilizar partes de otros proyectos si todo concuerda.
Una estructura base debe contener la separación entre los diferentes recursos de nuestra aplicación, con ello evitaremos caer en confusiones, por ejemplo no es recomendable tener contenido estático en la misma carpeta en la que almacenamos nuestros modelos.
Podemos hacer la estructura de nuestra aplicación de dos formas, una de forma manual, es decir, crear cada una de las carpetas que debe llevar el proyecto por nuestra cuenta y la segunda utilizando herramientas que nos creen un directorio recomendado con la estructura y algunos archivos básicos.
Una de las herramientas más utilizadas es Yeoman disponible en http:/ /yeoman.io y que nos permite generar la estructura base para un proyecto de AngularJS, pero no solo esto sino que también soporta otros frameworks o herramientas como por ejemplo Backbone.js o Ember.js.
![angular_est_proyectos.jpg]()
Está basado en node.js por lo que debemos tener algún conocimiento del tema para poder utilizarlo, lo importante es que una vez instalado, podemos generar proyectos de forma automática solo utilizando sencillos comandos, así como también partes de proyectos como los filtros.
Esto nos ayuda a evitar errores en la configuración inicial de nuestra aplicación. Podemos combinar esta herramienta con otras como Grunt, bower y npm para construir las dependencias de los paquetes que requerimos.
Si decidimos seguir un camino manual, podemos ver las siguientes carpetas o estructuras que debemos tener en cuenta para poder trabajar de forma organizada:
Con esto hemos aprendido básicamente que necesitamos para organizar un proyecto hecho en AngularJS, lo importante es que debemos seguir convenciones así sean de nuestra propia invención, de esta forma podremos llevar el trabajo lo mejor posible.
Normalmente podemos hacer una estructura de forma manual, sin embargo hay herramientas que nos ayudan con estas tareas de forma automatizada, así que tenemos ambas opciones, las herramientas automatizadas nos ayudan a siempre mantener una convención con lo que podremos reutilizar partes de otros proyectos si todo concuerda.
Estructura básica
Una estructura base debe contener la separación entre los diferentes recursos de nuestra aplicación, con ello evitaremos caer en confusiones, por ejemplo no es recomendable tener contenido estático en la misma carpeta en la que almacenamos nuestros modelos.
Podemos hacer la estructura de nuestra aplicación de dos formas, una de forma manual, es decir, crear cada una de las carpetas que debe llevar el proyecto por nuestra cuenta y la segunda utilizando herramientas que nos creen un directorio recomendado con la estructura y algunos archivos básicos.
Herramientas automatizadas
Una de las herramientas más utilizadas es Yeoman disponible en http:/ /yeoman.io y que nos permite generar la estructura base para un proyecto de AngularJS, pero no solo esto sino que también soporta otros frameworks o herramientas como por ejemplo Backbone.js o Ember.js.
Está basado en node.js por lo que debemos tener algún conocimiento del tema para poder utilizarlo, lo importante es que una vez instalado, podemos generar proyectos de forma automática solo utilizando sencillos comandos, así como también partes de proyectos como los filtros.
Esto nos ayuda a evitar errores en la configuración inicial de nuestra aplicación. Podemos combinar esta herramienta con otras como Grunt, bower y npm para construir las dependencias de los paquetes que requerimos.
Carpetas recomendadas
Si decidimos seguir un camino manual, podemos ver las siguientes carpetas o estructuras que debemos tener en cuenta para poder trabajar de forma organizada:
Scripts
Debemos tener una carpeta de scripts, aquí debe ir todo el contenido que requiramos como por ejemplo los controladores y modelos de AngularJS que requiramos en nuestra aplicación, podemos dividirla internamente aún más si es nuestro deseo.
Views
Otra carpeta que es muy necesaria es la carpeta views, aquí vamos a almacenar todas las vistas de nuestra aplicación, recordemos que generalmente este tipo de proyectos trabaja con plantillas, entonces aquí será el lugar adecuado para colocarlas.
Vendor
Esta carpeta generalmente va dentro de scripts y va a contener todos los archivos .js que necesitaremos, por ejemplo si queremos utilizar librerías adicionales o si queremos utilizar un motor de plantillas como Underscore, este será el lugar para almacenarlos.
Static
Lo podemos dividir en img y css, como podemos inferir por los nombres cada uno tendrá las imágenes y los archivos de estilo que se aplicarán sobre la aplicación, esta carpeta es interesante porque inclusive puede ser un link dinámico a una ruta en una CDN de nuestro uso o preferencia.
Con esto hemos aprendido básicamente que necesitamos para organizar un proyecto hecho en AngularJS, lo importante es que debemos seguir convenciones así sean de nuestra propia invención, de esta forma podremos llevar el trabajo lo mejor posible.
