Cargando



Utilizando Yeoman con AngularJS

En este tutorial veremos cómo podemos iniciar el uso de Yeoman para mejorar nuestro entorno de trabajo en AngularJS.


sep 19 2014 04:34
Avanzado
sep 22 2014 17:07
Una de las cosas más importantes que debemos tener en cuenta cuando iniciamos nuestro camino en el desarrollo de aplicaciones con AngularJS, es la optimización de nuestro flujo de trabajo, es decir, establecer las pautas con las cuales vamos a crear aplicaciones, hacer pruebas, crear secciones de nuestra aplicación, etc.

Tenemos varias opciones para hacerlo, las cuales van desde trabajar de forma manual, creando cada uno de los directorios por nuestra cuenta o utilizar herramientas que lo hagan por nosotros, en esto último podemos apoyarnos por Yeoman que tiene la posibilidad de generar el scaffolding, trae un servidor web incorporado y nos permite construir el esqueleto de la aplicación de forma automática.

Instalar Yeoman


Instalar Yeoman es tan fácil como correr una línea en la terminal, claro siempre y cuando estemos en entornos basados en Unix como Linux o MAC, en donde solo bastará con hacer lo siguiente:

curl -L get.yeoman.io | bash

Luego de esto debemos seguir las instrucciones que nos aparezcan en pantalla; sin embargo Windows es otro tema y aquí debemos hacer lo que se llama una instalación manual, para ello debemos primero instalar NodeJS y luego con su manejador de paquetes npm instalar Yeoman y el generador de aplicaciones Angular. Todo esto está documentado correctamente en la web de Yeoman.

angular_yeonman.jpg


Crear la aplicación


Una vez que ya hemos instalado y tenemos Yeoman corriendo, podemos crear nuestra aplicación AngularJS, recordemos que hasta para la más básica de las aplicaciones, por convención es necesario incluir los directorios para formar la estructura.

Como esto es muy pesado de hacer de forma manual, con Yeoman solo debemos escribir lo siguiente desde una consola:

yeoman init angular

Esto nos creará no solo la estructura de carpetas, sino que también nos dará los esqueletos básicos de las rutas, controladores y dependencias.

Crear una ruta


Como sabemos las rutas son una de las características clave de nuestras aplicaciones en Angular, Yeoman nos permite no solo generar la ruta, sino también los archivos necesarios para que esta pueda funcionar, para ello basta con utilizar el comando:

yeoman init angular:route nombreRuta

Donde nombreRuta va a ser la ruta que deseamos, por ejemplo si en vez de colocar nombreRuta colocamos home, Yeoman se encargará de:
  • crear el archivo home.js en app/script/controllers
  • crear el archivo home.js en test/specs/controller
  • crear el archivo home.html en app/views
Además que va a generar el código de la ruta en el archivo app/scripts/app.js

Ventajas de Yeoman
Con todo esto ya nos hemos ahorrado una gran cantidad de trabajo, además que al ser automatizado nos evitamos errores pequeños de configuración que puedan afectar nuestro desarrollo, como por ejemplo escribir mal el nombre de un controlador o colocar la ruta de forma inadecuada, lo que nos podría llevar a tener que hacer un pequeño debugging quitándonos así tiempo que podríamos emplear en otras cosas.


Con esto finalizamos este tutorial, hemos aprendido como instalar y como iniciar una aplicación con Yeoman, además debemos recordar que esta no es la única herramienta que sirve para estos propósitos por lo cual deben investigar un poco para encontrar otras opciones, comparar y quedarse con la herramienta que más se adapte a nuestros propósitos y necesidades.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X