Ya hemos visto como instalar Grunt y Bower para mejorar la productividad en nuestro día a día, en este tutorial voy a mostrar como instalar Yeoman para generar una aplicación en Angular JS. Antes de seguir adelante asegúrate de tener instalado Grunt y Bower, ya que son necesarios para que Yeoman pueda ser ejecutado correctamente.

Yeoman es un generador de código, la idea es que no repitamos los mismos pasos una y otra vez cada que iniciamos un proyecto nuevo. Por el contrario podemos crear nuestros propios templates o bien usar los que la comunidad tiene disponibles.

Instalación

Para instalar Yeoman es necesario tener instalado Node.js y NPM, si ya instalaste Grunt y Bower no tienes que preocuparte por esto, pero si no lo has hecho asegúrate que ya tienes instaladas estas herramientas antes de seguir adelante. Luego simplemente instalamos Yeoman con el siguiente comando.

$ npm install -g yo

Y listo, con eso ya deberías tener instalado Yeoman en tu sistema, lo siguiente es instalar los generadores que necesitemos. 

En este tutorial usaremos un generador llamado generator-angular, pero podemos usar cualquier otro, te recomiendo revisar todos los generadores disponibles. Para instalar los generadores usamos npm de la siguiente manera.

$ npm install -g generator-angular

Con esto ya estamos listos para generar nuestro proyecto en Angular JS, esto nos evitará tener que hacer todo desde el principio e ir directamente a codificar nuestra aplicación.

Generar una app que use Angular JS

Una vez que tenemos instalado el generador necesitamos crear el directorio donde estará todo el código del proyecto.

$ mkdir angular-app && cd $_

Dentro del directorio que hemos creado, ejecutamos el siguiente comando para generar la aplicación en Angular JS.

$ yo angular MyApp

Inmediatamente inicia un asistente de instalación comienza a realizarte algunas preguntas, aquí solamente tienes que responder cada una de ellas, seleccionar los módulos que necesites para tu proyecto y esperar a que el instalador termine de descargar todo lo necesario. En este caso la aplicación le he llamado MyApp, pero puedes usar el nombre que gustes.

El asistente puede tardar un poco ya que utiliza Karma para que podamos escribir los specs de nuestra app, si decidiste usar compass para manejar el CSS asegúrate de tener la gema instalada, pero si elegiste esta opción seguramente es porque ya la tienes. Al terminar la ejecución del instalador deberíamos tener en nuestro folder algo como lo siguiente.

Aplicación Angular generada con Yeoman

Dentro del folder app es donde se encuentra todo el código que estaremos escribiendo, ahí es donde definiremos nuestros views, controladores, directivas, servicios, etc. 

Para visualizar nuestra app en el navegador simplemente utilizamos grunt de la siguiente manera.

$ grunt serve

Y listo, tenemos un servidor web en el puerto 9000 sirviendo nuestra app, grunt automáticamente abrirá un navegador donde visualizaremos nuestra nueva app.

Cada generador tiene varios otros sub-generadores, por ejemplo, en este caso nosotros podríamos generar controladores, directivas, servicios, etc. Te recomiendo revisar la documentación del generador para que veas todas las opciones que tenemos disponibles. 

Happy Coding!