AngularJS: Yeoman

[Fuente : http://yeoman.io/]

YEOMAN 1.0

Introducción

Yeoman 1.0 es más que una herramienta. Es un workflow; una colección de herramientas y mejores prácticas para trabajar mejor cuando se programa web.

Nuestro workflow se compone de tres herramientas que mejoran tu productividad y satisfacción a la hora de desarrollar una web app:

  • Yo : el andamiaje de la nueva aplicación,  genera la configuración Grunt y tareas Grunt usuales que podrías necesitar para hacer los builds.
  • Grunt se utiliza para hacer los builds , previsualizar y probar tu proyecto.
  • Bower se utiliza para gestión de dependencias, de forma que nunca más tengas que manualmente descargarte y referenciar las librerias de javascript.

Estas  tres herramientas son programadas y mantenidas de forma separada , pero funcionan bien juntas como partes de un workflow efectivo.

Instalación

yo

Yo es mantenido por el proyecto Yeoman y ofrece el esqueleto de una aplicación web, utilizando templates a los que nos refereriremos como generadores. Tipicamente se instala yo y cualquier generador que creas que puedas usar utilizando npm.

Instalando yo y algunos generadores

Lo primero , necesitas instalar yo y otras herramientas necesarias:

npm install -g yo

If you are using npm 1.2.10 or above, this will also automatically install grunt and bower for you. If you’re on an older version of npm, you will need to install them manually:

# For npm versions < 1.2.10.
npm install -g grunt-cli bower

If you have installed Grunt globally in the past, you will need to remove it first: npm uninstall -g grunt

On Windows, we suggest you use an improved command line tool such as Console2 or PowerShell to improve the experience.

Andamiaje básico

Para hacer el andamiaje de una aplicación web, necesitas instalar el generator-webapp generator:

npm install -g generator-webapp

Este es el generador por defecto de aplicaciones web que te crea el esqueleto de un proyecto conteniendo HTML5 BoilerplatejQueryModernizr, and Bootstrap.Tendrás la elección durante la generación de incluir o no muchos de estos.

Ahora que el generador está instalado , crea un directorio para tu nuevo proyecto y ejecuta:

yo webapp

Cada proyecto que se crea con yo creará también tareas Grunt relevantes que la comunidad cree que son útiles para tu workflow.

El generador webapp se considera la forma más simple de empezar una web app. También proporcionamos framework generators que pueden ser utilizados para hacer el esqueleto de un proyecto con posibles vistas , modelos , controladores y demás.

Ejemplo : Creando el esqueleto de una AngularJS app

Como siempre , antes de utilizar un nuevo generador , asegurate de tener lo último , volviendo a instalarte el web.generator:

npm install -g generator-angular

Después de eso , crea un nuevo directorio para tu applicación , entonces ejecuta:

yo angular

Muchos generadores te permiten personalizar tu app utilizando flags en el comando inicial. Como ejemplo , con generator-angular, puedes poner:

yo angular --minsafe

Con esto estamos generando la estructura de ficheros para una aplicación básica y crea una serie de archivos para una nueva aplicación AngularJS encima de ello. Esto incluye patrones para directivas y controladores asi como esqueletos de Karma unit tests.

Haciendo el esqueleto de los componentes de tu aplicación AngularJS

Algunos generadores pueden ser utilizados para hacer el andamiaje de componentes de tu app – podemos llamarles sub-generadores.

En el framework AngularJS, por ejemplo , tu app se compone de una serie de piezas incluyendo controllers, directives y filtros. Puedes crear el esqueleto de todos estos componentes durante el workflow de desarrollo haciendo lo siguiente:

yo angular:controller myController
yo angular:directive myDirective
yo angular:filter myFilter
yo angular:service myService

Cada generador de framework tiene documentación disponible donde se puede consultar lo que soporta.

Crear tus propios generadores

See Generators.

Bower

Bower es un gestor de paquetes web que te permite fácilmente manejar las dependencias de tus proyectos (como lo que hace Maven con Java). Esto incluye recursos Javascript , imágenes y CSS. Es mantenido por Twitter y la comunidad open-source.

Manejar paquetes utilizando Bower puede ser hecho utilizando los siguientes comandos:

# Search for a dependency in the Bower registry.
bower search <dep>

# Install one or more dependencies.
bower install <dep>..<depN>

# List out the dependencies you have installed for a project.
bower list

# Update a dependency to the latest version available.
bower update <dep>

Using Bower with a project scaffolded using yo

To create a basic web app with a dependency on a jQuery plug-in:

# Scaffold a new application.
yo webapp

# Search Bower's registry for the plug-in we want.
bower search jquery-pjax

# Install it and save it to bower.json
bower install jquery-pjax --save

# If you're using RequireJS...
grunt bower
> Injects your Bower dependencies into your RequireJS configuration.

# If you're not using RequireJS...
grunt bower-install
> Injects your dependencies into your index.html file.

It’s as simple as that.

Your chosen generator may not include the grunt tasks “bower” and “bower-install”. You can read more about how to install and use these atgrunt-bower-requirejs and grunt-bower-install.

Grunt

Grunt es una herramienta de linea de comando para proyectos Javascript. Se puede utilizar para compilar proyectos , pero además tiene otros comandos que puedes utilizar en tu workflow.

Grunt commands

# Preview an app you have generated (with Livereload).
grunt server

# Run the unit tests for an app.
grunt test

# Build an optimized, production-ready version of your app.
grunt

These commands can be used together with the yo binary for a seamless development workflow:

yo webapp
grunt server
grunt test
grunt