Aplicación Cliente

Introducción

Para crear una aplicación cliente, usaremos yeoman. Sirve para estructurar nuestra aplicación, es decir, genera una estructura de directorios estándar. Yeoman se instala globalmente mediante:

# npm install -g yo

y se actualiza mediante:

# npm update -g yo

Haremos:

$ mkdir new_app
$ yo angular
Would you like to use Sass (with Compass)? (Y/n) Y
Would you like to include Bootstrap? (Y/n) Y
Would you like to use the Sass version of Bootstrap? (Y/n) Y
Which modules would you like to include? <intro>

tras bastante tiempo, usa bower para descargar las dependencias y grunt para la ejecución de tareas. La estructura generada tiene la siguiente pinta:

./app/
./bower_components/
bower.json
.bowerrc
.editorconfig
.gitattributes
.gitignore
Gruntfile.js
.jshintrc
./node_modules/
package.json
./test/
.travis.yml

y dentro del directorio app tenemos:

404.html
favicon.ico
images/
index.html
robots.txt
scripts/
styles/
views/

Pero hay diferentes tipos de generadores, tanto para casos particulares de angular (view, service, ...) o para phonegap (ej. angular-phonegap:app, ...) que sirve para hacer aplicaciones para el móvil.

Queremos que la aplicación sea testeable. Para ello disponemos de jasmine y de karma.

Workflow

Lo típico es crear la aplicación tal y como hemos hecho anteriormente. Después gestionamos las depedencias con bower:

$ bower search raphael
$ bower install raphael --save

en donde –save sirve para que actualice bower.json. Lo anterior nos instala Raphaël.

Imprescindible leer esto.

Ejecutamos lo que tenemos mediante:

$ grunt serve

Qué queremos ver

Empezamos con un pequeño borrador que muestra lo que queremos ver. Por ejemplo, un formulario y una lista.