AngularJs Paso a PasoLa primera gua completa en espaol para adentrarsepaso a paso en el mundo de AngularJS

Maikel Jos Rivero DortaEste libro est a la venta en http://leanpub.com/angularjs-paso-a-paso

Esta versin se public en 2015-02-07

This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishingprocess. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools andmany iterations to get reader feedback, pivot until you have the right book and build traction onceyou do.

2014 - 2015 Maikel Jos Rivero Dorta

Twitea sobre el libro!Por favor ayuda a Maikel Jos Rivero Dorta hablando sobre el libro en Twitter!El tweet sugerido para este libro es:AngularJS Paso a Paso un libro de @mriverodorta para empezar desde cero. Adquiere tu copia enhttp://bit.ly/AngularJSPasoAPasoEl hashtag sugerido para este libro es #AngularJS.Descubre lo que otra gente est diciendo sobre el libro haciendo click en este enlace para buscar elhashtag en Twitter:https://twitter.com/search?q=#AngularJS

Dedicado aEn primer lugar este libro esta dedicado a todos los que de alguna forma u otra me han apoyado en

llevar a cabo la realizacin de este libro donde plasmo mis mejores deseos de compartir miconocimiento.

En segundo lugar a toda la comunidad de desarrolladores de habla hispana que en mltiplesocasiones no encuentra documentacin en su idioma, ya sea como referencia o para aprender

nuevas tecnologas.

ndice general

Agradecimientos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iTraducciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iiPrlogo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii

Para quien es este libro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iiiQue necesitas para este libro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iiiEntindase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iiiFeedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ivErrata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ivPreguntas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ivRecursos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iv

Alcance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viCaptulo 1: Primeros pasos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viCaptulo 2: Estructura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viCaptulo 3: Mdulos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viCaptulo 4: Servicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viCaptulo 5: Peticiones al servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viiCaptulo 6: Directivas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viiCaptulo 7: Filtros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viiCaptulo 8: Rutas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viiCaptulo 9: Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viiCaptulo 10: Recursos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viiExtra: Servidor API RESTful . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viii

Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ixEntorno de desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Seleccionando el editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Preparando el servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Gestionando dependencias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

AngularJS y sus caractersticas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Plantillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

NDICE GENERAL

Estructura MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5Vinculacin de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Directivas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Inyeccin de dependencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Captulo 1: Primeros pasos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8Vas para obtener AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8Incluyendo AngularJS en la aplicacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8Atributos HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9La aplicacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Tomando el Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Captulo 2: Estructura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Estructura de ficheros. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Estructura de la aplicacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Captulo 3: Mdulos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21Creando mdulos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21Minificacin y Compresin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22Configurando la aplicacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23Mtodo run . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

AgradecimientosQuisiera agradecer a varias personas que me han ayudado en lograr este proyecto.Primero que todoa Jasel Morera por haber revisado el libro y corregido mucho de los erreres de redaccin ya que nosoy escritor y en ocasiones no se como expresarme y llegar a las personas de una manera correcta.Tambin agradecer a Anxo Carracedo por la foto de los pasos que aparece en la portada. A WilberZada Rosendi @wil63r por el diseo de la portada. Tambin a todos los dems que de una forma uotra me han ayudado a hacer realidad esta idea de escribir para la comunidad.

http://twitter.com/wil63r

TraduccionesSi te gustara traducir este libro a otro lenguaje, por favor escrbeme a @mriverodorta con tusintenciones. Ofrecer el 50% de las ganancias por cada libro vendido en tu traduccin, la cual servendida al mismo precio que el original. Adems de una pgina en el libro para la presentacin deltraductor.Ntese que el libro ha sido escrito en formato markdown con las especificaciones de Leanpub, lastraducciones debern seguir los mismos pasos.

PrlogoAngularJs paso a paso cubre el desarrollo de aplicaciones con el framework AngularJs. En estelibro se tratarn temas esenciales para el desarrollo de aplicaciones web del lado del cliente. Ademstrabajaremos con peticiones al servidor, consumiendo servicios REST y haciendo que nuestro sistemafuncione en tiempo real sin tener que recargar la pgina de nuestro navegador.

Para quien es este libroEst escrito para desarrolladores de aplicaciones que posean unmodesto conocimiento de Javascript,as como deHTML5 y que necesiten automatizar las tareas bsicas en el desarrollo de una aplicacinweb, especficamente en sistemas de una sola pgina, manejo de rutas, modelos, peticiones aservidores mediante Ajax, manejo de datos en tiempo real y otros.

Que necesitas para este libroPara un correcto aprendizaje de este libro es necesario una serie de complementos que te permitirnejecutar los ejemplos y construir tu propia aplicacin. Si estaremos hablando sobre el frameworkAngularJS es esencial que lo tengas a tu alcance, lo mismo usando el CDN de Google o medianteuna copia en tu disco duro. Tambin necesitars un navegador para ver el resultado de tu aplicacin,recomiendo Google Chrome por su gran soporte de HTML5 y sus herramientas para el desarrollo.Adems de lo anteriormente mencionado necesitars un editor de cdigo. Ms adelante estaremoshablando sobre algunas utilidades que haran el desarrollo ms fcil pero que no son estrictamentenecesarias.

EntindaseSe emplearn diferentes estilos de texto, para distinguir entre los diferentes tipos de informacin.Aqu hay algunos ejemplos de los estilos y explicacin de su significado.Lo ejemplos de los cdigos sern mostrado de la siguiente forma:

Prlogo iv

1 2 3 4 5 Titulo6 7 8 Hola Mundo!9 10

FeedbackEl feedback de los lectores siempre es bienvenido. Me gustara saber qu piensas acerca de este libroque te ha gustado ms y que no te ha gustado. Lo tendr presente para prximas actualizaciones.Para enviar un feedback enva un tweet a@mriverodorta.

ErrataEste es el primer libro que escribo as que asumo que encontraran varios errores. T puedes ayudarmea corregirlos envindome un tweet con el error que has encontrado a@mriverodorta junto con losdetalles del error.Los errores sern solucionados a medida que sean encontrados. De esta forma estarn arreglados enprximas versiones del libro.

PreguntasSi tienes alguna pregunta relacionada con algn aspecto del libro puedes hacerla a@mriverodortacon tus dudas.

RecursosAngularJS posee una gran comunidad a su alrededor adems de el equipo de Google que trabajadedicado a este framework. A continuacinmencionar algunos de los sitios donde puedes encontrarrecursos y documentacin relacionada al desarrollo con AngularJS.

Prlogo v

Sitios de referencia Sitio web oficial http://www.angularjs.org Google+ https://plus.google.com/u/0/communities/115368820700870330756 Proyecto en Github https://github.com/angular/angular.js Grupo de Google angular@googlegroups.com Canal en Youtube http://www.youtube.com/user/angularjs Twitter @angularjs

ExtensionesLa comunidad alrededor de AngularJS ha desarrollado gran cantidad de libreras y extensiones adi-cionales que agregan diferentes funcionalidades al framework y tienen sitio en: http://ngmodules.org.

IDE y HerramientasSi eres un desarrollador web, para trabajar con AngularJS no es necesario que utilices algo diferentede lo que ya ests acostumbrado, puedes seguir usando HTML y Javascript como lenguajes y siests dando tus primeros pasos en este campo podrs utilizar un editor de texto comn. Aunquete recomendara usar un IDE que al comienzo te ser de mucha ayuda con alguna de susfunciones como el auto-completamiento de cdigo, hasta que tengas un mayor entendimiento delas propiedades y funciones. A continuacin recomendare algunos:

WebStorm: Es un potente IDE multiplataforma que podrs usar lo mismo en Mac, Linuxo Windows. Adems se le puede instalar un Plugin para el trabajo con AngularJS que fuedesarrollado por la comunidad.

SublimeText: Tambin multiplataforma y al igual posee un plugin para AngularJS pero no esun IDE es slo un editor de texto.

Espreso: Slo disponible en Mac enfocado para su uso en el frontend.

NavegadorNuestra aplicacin de AngularJS funciona a travs de los navegadores ms populares en la actualidad(Google Chrome, Safari, Mozilla Firefox). Aunque recomiendo Google Chrome ya que posee unaextensin llamada Batarang para inspeccionar aplicaciones AngularJS y lamisma puede ser instaladadesde Chrome Web Store.

http://www.angularjs.orghttps://plus.google.com/u/0/communities/115368820700870330756https://github.com/angular/angular.jshttp://www.youtube.com/user/angularjshttp://ngmodules.orgIntegrated Development Environment

AlcanceEste libro abarcar lamayora de los temas relacionados con el frameworkAngularJS. Est dirigido aaquellos desarrolladores que ya poseen conocimientos sobre el uso deAngularJS y quisieran indagarsobre algn tema en especfico. A continuacin describir por captulos los temas tratados en estelibro.

Captulo 1: Primeros pasosEn este captulo se abordarn los temas iniciales para el uso del framework, sus principales vaspara obtenerlo y su inclusin en la aplicacin. Adems de la definicin de la aplicacin, usos de lasprimeras directivas y sus mbitos. La creacin del primer controlador y su vinculacin con la vistay el modelo. Se explicarn los primeros pasos para el usos del servicio $scope.

Captulo 2: EstructuraEste captulo se describir la importancia de tener una aplicacin organizada. La estructura de losdirectorios y archivos. Comentarios sobre el proyecto angular-seed para pequeas aplicaciones ylas recomendaciones para aquellas de estructura medianas o grandes. Adems de analizar algunosde los archivos esenciales para hacer que el mantenimiento de la aplicacin sea sencillo e intuitivo.

Captulo 3: MdulosEn este captulo comenzaremos por aislar la aplicacin del entorno global con la creacin del mdulo.Veremos cmo definir los controladores dentro del mdulo. Tambin veremos cmo Angularresuelve el problema de la minificacin en la inyeccin de dependencias y por ltimo los mtodosde configuracin de la aplicacin y el espacio para tratar eventos de forma global con el mtodoconfig() y run() del mdulo.

Captulo 4: ServiciosAngularJS dispone de una gran cantidad de servicios que har que el desarrollo de la aplicacinsea ms fcil mediante la inyeccin de dependencias. Tambin comenzaremos a definir serviciosespecficos para la aplicacin y se detallarn cada una de las vas para crearlos junto con sus ventajas.

Alcance vii

Captulo 5: Peticiones al servidorOtra de las habilidades de AngularJS es la interaccin con el servidor. En este captulo trataremoslo relacionado con las peticiones a los servidores mediante el servicio $http. Como hacer peticionesa recursos en un servidor remoro, tipos de peticiones y ms.

Captulo 6: DirectivasLas directivas son una parte importante de AngularJS y as lo reflejar la aplicacin que creemoscon el framework. En este captulo haremos un recorrido por las principales directivas, con ejemplosde su uso para que sean ms fciles de asociar. Adems se crearn directivas especficas para laaplicacin.

Captulo 7: FiltrosEn este captulo trataremos todo lo relacionado con los filtros, describiendo los que proporcionaangular en su ncleo. Tambin crearemos filtros propios para realizar acciones especficas de laaplicacin. Adems de su uso en las vistas y los controladores y servicios.

Captulo 8: RutasUna de las principales caractersticas de AngularJS es la habilidad que tiene para crear aplicacionesde una sola pgina. En este captulo estaremos tratando sobre el mdulongRoute, el tema del manejode rutas sin recargar la pgina, los eventos de se procesan el los cambios de rutas. Adems trataremossobre el servicio $location.

Captulo 9: EventosRealizar operaciones dependiendo de las interacciones del usuario es esencial para las aplicacioneshoy en da.Angular permite crear eventos y dispararlos a lo largo de la aplicacin notificando todoslos elementos interesados para tomar acciones. En este captulo veremos el proceso de la propagacinde eventos hacia los $scopes padres e hijos, as como escuchar los eventos tomando acciones cuandosea necesario.

Captulo 10: RecursosEn la actualidad existen cada vezms servicios RESTful en internet, en este captulo comenzaremos autilizar el servicio ngResource de Angular. Realizaremos peticiones a un API REST y ejecutaremosoperaciones CRUD en el servidor a travs de este servicio.

Alcance viii

Extra: Servidor API RESTfulEn el Captulo 10 se hace uso de una API RESTful para demostrar el uso del servicio $resource. Eneste extra detallar el proceso de instalacion y uso de este servidor que a la vez biene incluido conel libro y estar disponible con cada compra. El servidor esta creado utilizando NodeJs, Express.jsy MongoDB.

IntroduccinA lo largo de los aos hemos sido testigo de los avances y logros obtenidos en el desarrollo webdesde la creacin de World Wide Web. Si comparamos una aplicacin de aquellos entonces conuna actual notaramos una diferencia asombrosa, eso nos da una idea de cuan increble somos losdesarrolladores, cuantas ideas maravillosas se han hecho realidad y en la actualidad son las que nosayudan a obtener mejores resultado en la creacin de nuevos productos.A medida que el tiempo avanza, las aplicaciones se hacen ms complejas y se necesitan solucionesms inteligentes para lograr un producto final de calidad. Simultneamente se han desarrolladonuevas herramientas que ayudan a los desarrolladores a lograr fines en menor tiempo y con mayoreficiencia. Hoy en da las aplicaciones web tienen una gran importancia, por la cantidad de personasque utilizan Internet para buscar informacin relacionada a algn tema de inters, hacer compras,socializar, presentar su empresa o negocio, en fin un sin nmero de posibilidades que nos brinda lared de redes.Una de las herramientas que nos ayudar mucho en el desarrollo de una aplicacin web esAngularJS, un framework desarrollado por Google, lo que nos da una idea de las bases y el soportedel framework por la reputacin de su creador. En adicin goza de una comunidad a su alrededorque da soporte a cada desarrollador con soluciones a todo tipo de problemas.Por estos tiempos existen una gran cantidad de frameworks que hacen un increble trabajo a la horade facilitar las tareas de desarrollo. Pero AngularJS viene siendo como el ms popular dira yo, porsus componentes nicos, los cuales estaremos viendo ms adelante.En este libro estaremos tratando el desarrollo de aplicaciones web con la ayuda de AngularJS yveremos cmo esta obra maestra de framework nos har la vida ms fcil a la hora de desarrollarnuestros sistemas.

Entorno de desarrolloEs esencial que para sentirnos comodos con el desarrollo tengamos a la mano cierta variedad deutilidades para ayudarnos a realizar las tareas de una forma ms facil y en menor tiempo. Esto lopodemos lograr con un buen editor de texto o un IDE. No se necesita alguno especificamente, podrscontinuar utilizando el que estas acostumbrado si ya has trabajado javascript anteriormente.

Seleccionando el editorExisten gran cantidad de editores e IDE en el mercado hoy en dia, pero hay algunos que debemosprestar especial atencin. Me refiero a Sublime Text 2/3 y JetBrains WebStorm, ambos son multiplataforma. Personalmente uso Sublime Text 3 para mi desarrollo de da a da, con este editorpodremos escribir cdigo de una forma muy rpida gracias a las diferentes acciones que brinda.Esencialmente uso dos plugins que ayudan a la hora de declarar direcrivas, servicios, controladoresy mas.El primer plugin es AngularJs desarrollado por el grupo de Angular-UI, esolo lo uso para elautocompletamiento de las directivas en las vistas asi que en sus opciones deshabilito el autocom-pletamiento en el javascript. El segundo plugin es AngularJS Snippets el cual uso para la creacionde controladores, directivas, servicios y mas en el javascript. Estos dos plugins aumentan en grancantidad la velocidad en que escribes cdigo.Por otra parte WebStorm es un IDE con todo tipo de funcionalidades, autocompletamiento decdigo, inspeccin, debug, control de versiones, refactorizacin y adems tambien tiene un pluginpara el desarrollo con AngularJS que provee algunas funcionalidades similares a los de SublimeText.

Preparando el servidorHabiendo seleccionado ya el editor o IDE que usars para escribir cdigo el siguiente paso es tenerlisto un servidor donde poder desarrollar la aplicacin. En esta ocacin tambien tenemos variasopciones, si deseas trabajar online Plunker es una buena opcin y Cloud9 es una opcin aun mascompleta donde podras sincronizar tu proyecto mediante git y trabajar en la pc local o en el editoronline.En caso de que quieras tener tu propio servidor local para desarrollo puedes usar NodeJs conExpressJS para crear una aplicacin. Veamos un ejemplo.

http://plnkr.cohttp://cloud9.io

Entorno de desarrollo 2

Archivo: App/server.js

1 var express = require('express'),2 app = express();34 app.use(express.static(__dirname+'/public'))5 .get('*', function(req, res){6 res.sendFile('/public/index.html', {root:__dirname});7 }).listen(3000);

Despues de tener ester archivo listo ejecutamos el comando node server.js y podremos acceder a laaplicacin en la maquina local por el puerto 3000 (localhost:3000). Todas las peticiones a la aplicacinsern redirigidas a index.html que se encuentra en la carpeta public. De esta forma podremos usarel sistema de rutas de AngularJS con facilidad.Otra opcin es usar el servidor Apache ya sea instalado en local en la pc como servidor http o porlas herramientasAMP. Para MacMAMP, windowsWAMP y linux LAMP. Con este podremos crearun host virtual para la aplicacin. En la configuracin de los sitios disponibles de apache crearemosun virtualhost como el ejemplo siguiente.

1 2 # DNS que servir a este proyecto3 ServerName miapp.dev4 # La direccion de donde se encuentra la aplicacion5 DocumentRoot /var/www/miapp6 # Reglas para la reescritura de las direcciones7 8 RewriteEngine on9 # No reescribir archivos o directorios.10 RewriteCond %{REQUEST_FILENAME} -f [OR]11 RewriteCond %{REQUEST_FILENAME} -d12 RewriteRule ^ - [L]1314 # Reescribir todo lo demas a index.html para usar el modo de rutas HTML515 RewriteRule ^ index.html [L]16 17

Despus de haber configurado el host virtual para la aplicacin necesitamos crear el dns local paraque responda a nuestra aplicacin. En Mac y Linux esto se puede lograr en el archivo /etc/hosts y enWindows esta en la carpeta HDD:Windows\system32Drivers\etc\hosts. Escribiendo la siguientelnea al final del archivo.

Entorno de desarrollo 3

1 127.0.0.1 miapp.dev

Despues de haber realizado los pasos anteriores reiniciamos el servicio de apache para que carguelas nuevas configuraciones y podremos acceder a la aplicacin desde el navegador visitandohttp://miapp.dev.

Gestionando dependenciasEn la actualidad la comunidad desarrolla soluciones para problemas especificos cada vez mas rpido.Estas soluciones son compartidas para que otros desarrolladores puedan hacer uso de ellas sin tenerque volver a reescribir el cdigo. Un ejemplo es jQuery, LoDash, Twitter Bootstrap, Backbone eincluso el mismoAngularJS. Sera un poco engorroso si para la aplicacin que fueramos a desarrollarnecesitaramos un nmero considerado de estas librerias y tubieramos que buscarlas y actualizarlasde forma manual.Con el objetivo de resolver este problema Twitter desarroll una herramienta llamada bower quefunciona como un gestor de dependencias y a la vez nos da la posibilidad de compartir nuestrascreaciones con la comunidad. Esta herramienta se encargar de obtener todas las dependencias dela aplicacin y mantenerlas actualizada por nosotros.Para instalar bower necesitamos tener instalado previamente npm y NodeJs en la pc. Ejecutandoel comando npm install -g bower en la consola podremos instalar bower de forma globalen el sistema. Luego de tenerlo instalado podremos comenzar a gestionar las dependencias dela aplicacin. Lo primero que necesitamos es crear un archivo bower.json donde definiremos elnombre de la aplicacin y las dependencias. El archivo tiene la siguiente estructura.

Archivo: App/bower.json

1 {2 "name": "miApp",3 "dependencies": {4 "angular": "~1.3.0"5 }6 }

De esta forma estamos diciendo a bower que nuestra aplicacin se llama miApp y que necesitaangular para funcionar. Una vezmas en la consola ejecutamos bower install en la carpeta que tieneel archivo bower.json. Este crear una carpeta bower_components donde incluir el frameworkpara que lo podamos usar en la aplicacin.La creacin del archivo bower.json lo podemos lograr de forma interactiva. En la consola vamoshasta el directorio de la aplicacion y ejecutamos bower init. Bowernos har una serie de preguntasrelacionadas con la aplicacin y luego crear el archivo bower.json con los datos que hemos

Entorno de desarrollo 4

indicado. Teniendo el archivo listo podepos proceder a instalar dependencias de la aplicacionejecutando bower install --save angular lo que instalar AngularJS como la vez anterior.El parmetro save es muy importante por que es el que escribir la dependencia en el archivobower.json de lo contrario AngularJS sera instalado pero no registrado como dependencia.UnA de los principales ventajas que nos proporcionaBower es que podremos distribuir la aplicacinsin ninguna de sus dependencias. Podremos excluir la carpeta de las dependencias sin problemas yaque en cada lugar donde se necesiten las dependencias podremos ejecutar bower install y bowerlas gestionar por nosotros. Esto es muy til a la hora de trabajar en grupo con sistemas de control deversiones comoGithub ya que en el repositorio solo estaria el archivo bower.json y las dependenciasen las maquinas locales de los desarrolladores.Para saber mas sobre el uso de Bower puedes visitar su pgina oficial y ver la documentacin paraconcer acerda de cada una de sus caractersticas.

AngularJS y sus caractersticasCon este framework tendremos la posibilidad de escribir una aplicacin de manera fcil, que consolo leerla podramos entender qu es lo que se quiere lograr sin esforzarnos demasiado. Ademsde ser un framework que sigue el patrn MVC nos brinda otras posibilidades como la vinculacinde datos en dos vas y la inyeccin de dependencia. Sobre estos trminos estaremos tratando msadelante.

PlantillasAngularJS nos permite crear aplicaciones de una sola pgina, o sea podemos cargar diferentes partesde la aplicacin sin tener que recargar todo el contenido en el navegador. Este comportamientoes acompaado por un motor de plantillas que genera contenido dinmico con un sistema deexpresiones evaluadas en tiempo real.El mismo tiene una serie de funciones que nos ayuda a escribir plantillas de una forma organizaday fcil de leer, adems de automatizar algunas tareas como son: las iteraciones y condicionespara mostrar contenido. Este sistema es realmente innovador y usa HTML como lenguaje para lasplantillas. Es suficiente inteligente como para detectar las interacciones del usuario, los eventos delnavegador y los cambios en los modelos actualizando solo lo necesario en el DOM y mostrar elcontenido al usuario.

Estructura MVCLa idea de la estructura MVC no es otra que presentar una organizacin en el cdigo, donde elmanejo de los datos (Modelo) estar separado de la lgica (Controlador) de la aplicacin, y a su vezla informacin presentada al usuario (Vistas) se encontrar totalmente independiente. Es un procesobastante sencillo donde el usuario interacta con las vistas de la aplicacin, stas se comunican conlos controladores notificando las acciones del usuario, los controladores realizan peticiones a losmodelos y estos gestionan la solicitud segn la informacin brindada. Esta estructura provee unaorganizacin esencial a la hora de desarrollar aplicaciones de gran escala, de lo contrario sera muydifcil mantenerlas o extenderlas.

(Model ViewController) Estructura deModelo, Vista y Controlador introducido en los 70 y obtuvo su popularidad en el desarrollo de aplicacionesde escritorio.

Doccument Object Model

AngularJS y sus caractersticas 6

Vinculacin de datosDesde que el DOM pudo ser modificado despus de haberse cargado por completo, libreras comojQuery hicieron que la web fuera ms amigable. Permitiendo de esta manera que en respuesta alas acciones del usuario el contenido de la pgina puede ser modificado sin necesidad de recargarel navegador. Esta posibilidad de modificar el DOM en cualquier momento es una de las grandesventajas que utiliza AngularJS para vincular datos con la vista.Pero eso no es nuevo, jQuery ya lo haca antes, lo innovador es, Que tan bueno sera si pudiramoslograr vincular los datos que tenemos en nuestros modelos y controladores sin escribir nada decdigo? Seria increble verdad, pues AngularJS lo hace de unamanera espectacular. En otras palabrasnos permite definir que partes de la vista sern sincronizadas con propiedades de Javascript deforma automtica. Esto ahorra enormemente la cantidad de cdigo que tendramos que escribirpara mostrar los datos del modelo a la vista, que en conjunto con la estructura MVC funciona demaravillas.

DirectivasSi vienes del dominio de jQuery esta ser la parte donde te dars cuenta que el desarrollo avanza deforma muy rpida y que seleccionar elementos para modificarlos posteriormente, como ha venidosiendo su filosofa, se va quedando un poco atrs comparndolo con el alcance de AngularJS. jQueryen si es una librera que a lo largo de los aos ha logrado que la web en general se vea muy biencon respecto a tiempos pasados. A su vez tiene una popularidad que ha ganado con resultadosdemostrados y posee una comunidad muy amplia alrededor de todo el mundo.Uno de los complementos ms fuertes de AngularJS son las directivas, stas vienen a remplazarlo que en nuestra web hara jQuery. Ms all de seleccionar elementos del DOM, AngularJS nospermite extender la sintaxis de HTML. Con el uso del framework nos daremos cuenta de una grancantidad de atributos que no son parte de las especificaciones de HTML.AngularJS tiene una gran cantidad de directivas que permiten que las plantillas sean fciles de leery a su vez nos permite llegar a grandes resultados en unas pocas lneas. Pero todo no termina ah,AngularJS nos brinda la posibilidad de crear nuestras propias directivas para extender el HTML yhacer que nuestra aplicacin funcione mucho mejor.

Inyeccin de dependenciaAngularJS est basado en un sistema de inyeccin de dependencias donde nuestros controladorespiden los objetos que necesitan para trabajar a travs del constructor. Luego AngularJS los inyectade forma tal que el controlador puede usarlo como sea necesario. De esta forma el controlador nonecesita saber cmo funciona la dependencia ni cules son las acciones que realiza para entregar losresultados.

AngularJS y sus caractersticas 7

As estamos logrando cada vezms una organizacin en nuestro cdigo y logrando lo que es unamuybuena prctica: Los controladores deben responder a un principio de responsabilidad nica. Enotras palabras el controlador es para controlar, o sea recibe peticiones y entregar respuestas basadasen estas peticiones, no genera el mismo las respuestas. Si todos nuestros controladores siguen estepatrn nuestra aplicacin ser muy fcil de mantener incluso si su proceso de desarrollo es retomadoluego de una pausa de largo tiempo.Si no ests familiarizado con alguno de los conceptos mencionados anteriormente o no te hanquedado claros, no te preocupes, todos sern explicados en detalle ms adelante. Te invito a quecontines ya que a mi modo de pensar la programacin es ms de cdigo y no de tantos de conceptos.Muchas dudas sern aclaradas cuando lo veas en la prctica.

Captulo 1: Primeros pasosEn este captulo daremos los primeros pasos para el uso de AngularJS. Debemos entender que no esuna librera que usa funciones para lograr un fin, AngularJS est pensado para trabajar por mdulos,esto le brida una excelente organizacin a nuestra aplicacin. Comenzaremos por loms bsico comoes la inclusin de AngularJS y sus plantillas en HTML.

Vas para obtener AngularJSExisten varias vas para obtener el framework, mencionar tres de ellas:La primera forma es descargando el framework desde su web oficial http://www.angularjs.orgdonde tenemos varias opciones, la versin normal y la versin comprimida. Para desarrollar terecomiendo que uses la versin normal ya que la comprimida est pensada para aplicaciones enestado de produccin adems de no mostrar la informacin de los errores.La segunda va es usar el framework directamente desde el CDN de Google. Tambin encontrarla versin normal y la comprimida. La diferencia de usar una copia local o la del CDN se pone enprctica cuando la aplicacin est en produccin y un usuario visita cualquier otra aplicacin queuse la misma versin de AngularJS de tu aplicacin, el CDN no necesitar volver a descargar elframework ya que ya el navegador lo tendr en cache. De esta forma tu aplicacin iniciar msrpido.En tercer lugar es necesario tener instalado en la pc npm y Bower. Npm es el gestor de paquetes deNodeJS que se obstine instalando Nodejs desde su sitio oficial http://nodejs.org. Bower es un gestorde paquetes para el frontend. No explicar esta va ya que est fuera del alcance de este libro, peroesta opcin esta explicada en varios lugares en Internet, as que una pequea bsqueda te llevara aobtenerlo.Nosotros hemos descargado la versin normal desde el sitio oficial y la pondremos en un directorio/lib/angular.js para ser usado.

Incluyendo AngularJS en la aplicacinYa una vez descargado el framework lo incluiremos simplemente como incluimos un archivoJavascript externo:

http://www.angularjs.orghttp://nodejs.org

Captulo 1: Primeros pasos 9

1

Si vamos a usar el CDN de Google seria de la siguiente forma:

1 \2

De esta forma ya tenemos el framework listo en nuestra aplicacin para comenzar a usarlo.

Atributos HTML5ComoAngularJS tiene un gran entendimiento del HTML, nos permite usar las directivas sin el prefijodata por ejemplo, obtendramos el mismo resultado si escribiramos el cdigo data-ng-app que siescribiramos ng-app. La diferencia est a la hora de que el cdigo pase por los certificadores que alver atributos que no existen en las especificaciones de HTML5 pues nos daran problemas.

La aplicacinDespus de tener AngularJS en nuestra aplicacin necesitamos decirle donde comenzar y esdonde aparecen las Directivas. La directiva ng-app define nuestra aplicacin. Es un atributo declave=valor pero en casos de que no hayamos definido un mdulo no ser necesario darle unvalor al atributo. Ms adelante hablaremos de los mdulos ya que sera el valor de este atributo, porahora solo veremos lo ms elemental.AngularJS se ejecutar en el mbito que le indiquemos, es decir abarcar todo el entorno dondeusemos el atributo ng-app. Si lo usamos en la declaracin de HTML entonces se extender por todoel documento, en caso de ser usado en alguna etiqueta como por ejemplo en el body su alcance sever reducido al cierre de la misma. Veamos el ejemplo.

Ejemplo No.1 Archivo: App/index.html

1 2 3 4 5 Respuesta {{ respuesta }}6 7 8 9 Entiendes el contenido de este libro?10

Captulo 1: Primeros pasos 10

11 12 Me esforzare ms!13 14 15 Felicidades!16 17 18 19 20

En este ejemplo encontramos varias directivas nuevas, pero no hay que preocuparse, explicaremostodo a lo largo del libro. Podemos observar lo que analizbamos del mbito de la aplicacin en elejemplo anterior, en la lnea 5 donde definimos el ttulo de la pgina hay unos {{ }}, en angular se usapara mostrar la informacin del modelo que declaramos en la lnea 10 con la directiva ng-model.Vamos a llamarlo variables para entenderlo mejor, cuando definimos un modelo con ng-modelcreamos una variable y en el ttulo estamos tratando de mostrar su contenido con la notacin {{ }}.Podemos percatarnos que no tendremos el resultado esperado ya que el ttulo est fuera del mbitode la aplicacin, porque ha sido definida en la lnea 7 que es el body. Lo que quiere decir que todolo que est fuera del body no podr hacer uso de nuestra aplicacin. Prueba mover la declaracin deng-app a la etiqueta de declaracin de HTML en la lnea 2 y observa que el resultado es el correctoya que ahora el ttulo est dentro del mbito de la aplicacin.

Cuidado.Slo se puede tener una declaracin de ng-app por pgina, sin importar que los mbitosestn bien definidos.

Ya has comenzado a escribir tu primera aplicacin con AngularJS, a diferencia de los clsicos HolaMundo! esta vez hemos hecho algo diferente. Se habrn dado cuenta lo sencillo que fue interactuarcon el usuario y responder a los eventos del navegador, y ni siquiera hemos escrito una lnea deJavascript, interesante verdad, pues lo que acabamos de hacer es demasiado simple para la potenciade AngularJS, veremos cosas ms interesantes a lo largo del Libro.A continuacin se analizar las dems directivas que hemos visto en el Ejemplo No.1. Para entenderel comportamiento de la directiva ng-model necesitamos saber qu son los scopes en AngularJS.Pero lo dejaremos para ltimo ya que en ocasiones es un poco complicado explicarlo por ser unacaracterstica nica de AngularJS y si vienes de usar otros frameworks como Backbone o EmberJSesto resultar un poco confuso.En el Ejemplo No.1 hemos hecho uso de otras dos directivas, ng-show y ng-hide las cuales sonempleadas como lo dice su nombre para mostrar y ocultar contenidos en la vista. El funcionamientode estas directivas es muy sencillo muestra u oculta un elemento HTML basado en la evaluacin

Captulo 1: Primeros pasos 11

de la expresin asignada al atributo de la directiva. En otras palabras evala a verdadero o falso laexpresin para mostrar u ocultar el contenido del elemento HTML. Hay que tener en cuenta que unvalor falso se considerara cualquiera de los siguientes resultados que sean devueltos por la expresin.

f 0 false no n []

Preste especial atencin a este ltimo porque nos ser de gran utilidad a la hora de mostrar u ocultarelementos cuando un arreglo est vaco.Esta directiva logra su funcin pero no por arte de magia, es muy sencillo, AngularJS tiene un ampliomanejo de clasesCSS las cuales vienen incluidas con el framework. Un ejemplo es .ng-hide, que tienela propiedad display definida como none lo que indica a CSS ocultar el elemento que ostente estaclase, adems tiene una marca !important para que tome un valor superior a otras clases que tratende mostrar el elemento. Las directivas que muestran y ocultan contenido aplican esta clase en casoque quieran ocultar y la remueven en caso que quieran mostrar elementos ya ocultos.Aqu viene una difcil, Scopes y su uso en AngularJS. Creo que sera una buena idea ir viendo sucomportamiento y su uso a lo largo del libro y no tratar de definir su concepto ahora, ya que soloconfundira las cosas. Se explicar de forma sencilla segn se vaya utilizando. En esencia el scope esel componente que une las plantillas (Vistas) con los controladores, creo que por ahora ser suficientecon esto. En el Ejemplo No.1 en la lnea 10 donde utilizamos la directiva ng-model hemos hecho usodel scope para definir una variable, la cual podemos usar como cualquier otra variable en Javascript.Realmente la directiva ng-model une un elemento HTML a una propiedad del $scope en elcontrolador. Si esta vez $scope tiene un $ al comienzo, no es un error de escritura, es debido aque $scope es un servicio de AngularJS, otro de los temas que estaremos tratando ms adelante.En resumen el modelo respuesta definido en la lnea 10 del Ejemplo No.1 estara disponible en elcontrolador como $scope.respuesta y totalmente sincronizado en tiempo real gracias a el motor deplantillas de AngularJS.

Tomando el ControlVeamos ahora un ejemplo un poco ms avanzado en el cual ya estaremos usando Javascript ydefiniremos el primer controlador.Esta es la parte de la estructura MVC que maneja la lgica de nuestra aplicacin. Recibe lasinteracciones del usuario con nuestra aplicacin, eventos del navegador, y las transforma enresultados para mostrar a los usuarios.Veamos el ejemplo:

Captulo 1: Primeros pasos 12

Ejemplo No.2

1 2 3 {{ mensaje }}4 5 6 function miCtrl ($scope) {7 $scope.mensaje = 'Mensaje desde el controlador';8 }9 10 11

En este ejemplo hemos usado una nueva directiva llamada ng-controller en la lnea 2. Esta directivaes la encargada de definir que controlador estaremos usando para el mbito del elemento HTMLdonde es utilizada. El uso de esta etiqueta sigue el mismo patrn de mbitos que el de la directivang-app. Como has podido notar el controlador es una simple funcin de Javascript que recibe unparmetro, y en su cdigo slo define una propiedad mensaje dentro del parmetro.Esta vez no es un parmetro lo que estamos recibiendo, AngularJS interpretar el cdigo con lainyeccin de dependencias, como $scope es un servicio de el framework, crear una nueva instanciadel servicio y lo inyectar dentro del controlador hacindolo as disponible para vincular los datoscon la vista. De esta forma todas las propiedades que asignemos al objeto $scope estarn disponiblesen la vista en tiempo real y completamente sincronizado. El controlador anterior hace que cuandousemos {{ mensaje }} en la vista tenga el valor que habamos definido en la propiedad con el mismonombre del $scope.Habrn notado que al recargar la pgina primero muestra la sintaxis de {{ mensaje }} y despusmuestra el contenido de la variable del controlador. Este comportamiento es debido a que elcontrolador an no ha sido cargado en el momento que se muestra esa parte de la plantilla. Lomismo que pasa cuando tratas de modificar el DOM y este an no est listo. Los que vienen deusar jQuery saben a qu me refiero, es que en el momento en que se est tratando de mostrar lavariable, an no ha sido definida. Ahora, si movemos los scripts hacia el principio de la aplicacinno tendremos ese tipo de problemas ya que cuando se trate de mostrar el contenido de la variable,esta vez si ya ha sido definido.Veamos el Ejemplo No.2.1:

Captulo 1: Primeros pasos 13

Ejemplo No.2.11 2 3 4 function miCtrl ($scope) {5 $scope.mensaje = 'Mensaje desde el controlador';6 }7 8 9 {{ mensaje }}10 11

De esta forma el problema ya se ha resuelto, pero nos lleva a otro problema, que pasa si tenemosgrandes cantidades de cdigo y todos estn en el comienzo de la pgina. Les dir que pasa,simplemente el usuario tendr que esperar a que termine de cargar todo los scripts para que comiencea aparecer el contenido, en muchas ocasiones el usuario se va de la pgina y no espera a que terminede cargar. Claro, no es lo que queremos para nuestra aplicacin, adems de que es una mala prcticaponer los scripts al inicio de la pgina. Como jQuery resuelve este problema es usando el eventoready del Document, en otras palabras, el estar esperando a que el DOM est listo y despusejecutara las acciones pertinentes.Con AngularJS podramos hacer lo mismo, pero esta vez usaremos algo ms al estilo de AngularJS,es una directiva: ng-bind=expresion. Esencialmente ng-bind hace que AngularJS remplace elcontenido del elemento HTML por el valor devuelto por la expresin. Hace lo mismo que ** {{ }} **pero con la diferencia de que es una directiva y no se mostrara nada hasta que el contenido no estlisto.Veamos el Ejemplo No.2.2:Ejemplo No.2.21 2 3 4 5 6 function miCtrl ($scope) {7 $scope.mensaje = 'Mensaje desde el controlador';8 }9 10 11

Captulo 1: Primeros pasos 14

Como podemos observar en el Ejemplo No.2.2 ya tenemos los scripts al final y no tenemos elproblema de mostrar contenido no deseado. Al comenzar a cargarse la pgina se crea el elementoH1 pero sin contenido, y no es hasta que Angular tenga listo el contenido listo en el controlador yvinculado al $scope que se muestra en la aplicacin.Debo destacar que con el uso de la etiqueta ng-controller estamos creando un nuevo scope para sumbito cada vez que es usada. Lo anterior, significa que cuando existan tres controladores diferentescada uno tendr su propio scope y no ser accesible a las propiedades de uno al otro. Por otra parte,los controladores pueden estar anidados unos dentro de otros, de esta forma tambin obtendrn unscope nuevo para cada uno, con la diferencia de que el scope del controlador hijo tendr acceso a laspropiedades del padre en caso de que no las tenga definidas en s mismo.Veamos el Ejemplo No.3Ejemplo No.31 2 3 4 Padre5 6 Hijo7 8 Nieto9 10 11 12 13 14 function padreCtrl ($scope) {15 $scope.padre = 'Soy el padre';16 $scope.logPadre = function(){17 console.log($scope.padre);18 }19 }20 function hijoCtrl ($scope) {21 $scope.hijo = 'Soy el primer Hijo';22 $scope.edad = 36;23 $scope.logHijo = function(){24 console.log($scope.hijo, $scope.edad);25 }26 }27 function nietoCtrl ($scope) {28 $scope.nieto = 'Soy el nieto';29 $scope.edad = 4;

Captulo 1: Primeros pasos 15

30 $scope.logNieto = function(){31 console.log($scope.nieto, $scope.edad, $scope.hijo);32 }33 }34 35 36

Ops, quizs se haya complicado un poco el cdigo, pero lo describiremos a continuacin. Paracomenzar veremos que hay una nueva directivang-click=. Esta directiva no tiene nada demisterio,por si misma se explica sola, es la encargada de especificar el comportamiento del evento Click delelemento y su valor es evaluado. En cada uno de los botones se le ha asignado un evento Click paraejecutar una funcin en el controlador.Como han podido observar tambin cada uno de los controladores estn anidados uno dentro deotros, el controlador nietoCtrl dentro de hijoCtrl y este a su vez dentro de padreCtrl. Veamos el con-tenido de los controladores. En cada uno se definen propiedades y una funcin que posteriormentees llamada por el evento Click de cada botn de la vista. En el padreCtrl se ha definido la propiedadpadre en el $scope y sta es logeada a la consola al ejecutarse la funcin logPadre.En el hijoCtrl se ha definido la propiedad hijo y edad que igualmente sern logueadas a la consola. Enel nietoCtrl se han definido las propiedades nieto y edad, de igual forma se loguearan en la consola.Pero en esta ocasin trataremos de loguear tambin la propiedad hijo la cual no est definida en el$scope, as que AngularJS saldr del controlador a buscarla en el $scope del padre.El resultado de este ejemplo se puede ver en el navegador con el uso de las herramientas de desarrolloen su apartado consola.Quizs te habrs preguntado si el $scope del padreCtrl tiene un scope padre. Pues la respuesta es siel $rootScope. El cual es tambin un servicio que puede ser inyectado en el controlador mediante lainyeccin de dependencias. Este rootScope es creado con la aplicacin y es nico para toda ella, o seatodos los controladores tienen acceso a este rootScope lo que quiere decir que todas las propiedadesy funciones asignadas a este scope son visibles por todos los controladores y este no se vuelve a crearhasta la pgina no es recargada.Estars pensando que el rootScope es la va de comunicacin entre controladores. Puede ser usadocon este fin, aunque no es una buena prctica, para cosas sencillas no estara nada mal. Pero noes la mejor forma de comunicarse entre controladores, ya veremos de qu forma se comunican loscontroladores en prximos captulos.

Captulo 2: EstructuraAngularJs no define una estructura para la aplicacin, tanto en la organizacin de los ficheros comoen los mdulos, el framework permite al desarrollador establecer una organizacin donde mejorconsidere y mas cmodo se sienta trabajando.

Estructura de ficheros.Antes de continuar con el aprendizaje del framework, creo que es importante desde un principio,tener la aplicacin organizada ya que cuando se trata de ordenar una aplicacin despus de estaralgo avanzado, se tiene que parar el desarrollo y en muchas ocasiones hay que reescribir partes delcdigo para que encajen con la nueva estructura que se quiere usar.Con respecto a este tema es recomendado organizar la aplicacin por carpetas temticas. Los mismosdesarrolladores de Angular nos proveen de un proyecto base para iniciar pequeas aplicaciones. Esteproyecto llamado angular-seed est disponible para todos en su pgina de Github: https://github.com/angular/angular-seed y a continuacin veremos una breve descripcin de su organizacin.A lo largo del tiempo que se ha venido desarrollando este proyecto, angular-seed a cambiadomuchoen su estructura. En este momento en que estoy escribiendo este captulo la estructura es la siguiente.

App components version interpolate-filter.js version-directive.js version.js view1 view1.html view1.js view2 view2.html view2.js app.css app.js index.html

Al observar la organizacin de angular-seed veremos que en su app.js declaran la aplicacin yadems requieren como dependencias cada una de las vistas y la directiva. Si la aplicacin tomara

Captulo 2: Estructura 17

un tamao considerable, la lista de vistas en los requerimientos del mdulo principal seria un pocoincmoda de manejar. Dentro de cada carpeta de vista existe un archivo para manejar todo lorelacionado con la misma. En ste crean un nuevo mdulo para la vista con toda su configuracin ycontroladores.Realmente es una semilla para comenzar a crear una aplicacin. Un punto de partida para tener unaidea de la organizacin que esta puede tomar. A medida que la aplicacin vaya tomando tamaose puede ir cambiando la estructura. Si es una pequea aplicacin podrs usar angular-seed sinproblemas. Si tu punto de partida es una aplicacin mediana o grande ms adelante se explicanotras opciones para organizar tu aplicacin.A continuacin abordaremos la organizacin que se debe seguir para las medianas aplicaciones ylos grupos de trabajo para localizar las porciones de cdigo de forma fcil.

App css img index.html js app.js Config Controllers Directives Filters Models Services partials

En esencia sta es la estructura de directorios para una aplicacin mediana. En caso de que se fueraa construir una aplicacin grande es recomendable dividirla por mdulos, para ello se usara estaestructura por cada mdulo:

App css img index.html js app.js Registro Registro.js Config Controllers Directives

Captulo 2: Estructura 18

Filters Models Services Blog Blog.js Config Controllers Directives Filters Models Services Tienda Tienda.js Config Controllers Directives Filters Models Services Ayuda Ayuda.js Config Controllers Directives Filters Models Services partials Registro Blog Tienda Ayuda

Como podemos observar al establecer esta estructura en nuestro proyecto, no importa cuntoeste crezca, siempre se mantendr organizado y fcil de mantener. En este libro utilizaremos laestructura para una aplicacin mediana, est disponible en el repositorio de Github https://github.com/mriverodorta/ang-starter y viene con ejemplos.Al observar el contenido de la estructura nos podemos percatar de lo que significa cada unos de susarchivos. Ahora analizaremos algunos de ellos.En el directorio app/js es donde se guarda todo el cdigo de nuestra aplicacin, con excepcin de lapgina principal de entrada a la aplicacin y las plantillas (partials), que estarn a un nivel superiorjunto a los archivos de estilos y las imgenes. En el archivo app.js es donde declararemos la aplicacin

Captulo 2: Estructura 19

(mdulo) y definiremos sus dependencias. Si has obtenido ya la copia de ang-starter desde https://github.com/mriverodorta/ang-starter, veras varios archivos con una configuracin inicial para laaplicacin. A continuacin describir el objetivo de cada uno de ellos.

Estructura de la aplicacinPor lo general en trminos de programacin al crear una aplicacin y sta ser iniciada enmuchas ocasiones, necesitamos definir una serie de configuraciones para garantizar un correctofuncionamiento en la aplicacin en general. En muchos casos se necesita que estn disponibles desdeel mismo inicio de la aplicacin, para que los componentes internos que se cargan despus puedanfuncionar correctamente.AngularJS nos permite lograr este tipo de comportamiento mediante el mtodo run() de losmdulos. Estemtodo es esencial para la inicializacin de la aplicacin. Solo recibe una funcin comoparmetro o un arreglo si utilizamos inyeccin de dependencia. Este mtodo se ejecutar cuandola aplicacin haya cargado todos los mdulos. Para el uso de esta funcionalidad se ha dispuesto elarchivo Bootstrap.js, donde podremos definir comportamientos al inicio de la aplicacin. En caso deque se necesite aislar algn comportamiento del archivo Bootstrap.js se puede hacer perfectamenteya que AngularJS permite la utilizacin del mtodo run() del mdulo tantas veces como seanecesario.Un ejemplo de el aislamiento lo veremos en el archivo Security.js, donde haremos uso de el mtodorun() para configurar la seguridad de la aplicacin desde el inicio de la misma.En la mayora de las aplicaciones se necesitan el uso de las constantes. Los mdulos de AngularJSproveen un mtodo constant() para la declaracin de constantes y son un servicio con una formamuy fcil de declarar. Este mtodo recibe dos parmetros,nombre y valor, donde el nombre es el queutilizaremos para inyectar la constante en cualquier lugar que sea necesario dentro de la aplicacin,el valor puede ser una cadena de texto, nmero, arreglo, objeto e incluso una funcin. Las constanteslas definiremos en el archivo Constants.js.Como he comentado en ocasiones, AngularJS tiene una gran cantidad de servicios que los hace dis-ponibles mediante la inyeccin de dependencias. Muchos de estos servicios pueden ser configuradosantes de ser cargando el mdulo, para cuando ste est listo ya los servicios estn configurados. Paraesto existe el mtodo config() de los mdulos. Este mtodo recibe como parmetro un arreglo ofuncin para configurar los servicios. Como estamos tratando con aplicaciones de una sola pgina,el manejo de rutas es esencial para lograrlo. La configuracin del servicio $routeProvider donde sedefinen las rutas debe ser configurado con el mtodo config() del mdulo, ya que necesita estar listopara cuando el mdulo este cargado por completo. Estas rutas las podremos definir en el archivoRoutes.js del cual hablaremos ms adelante.Las aplicaciones intercambia informacin con el servidor mediante AJAX, por lo que es importantesaber queAngularJS lo hace a travs del servicio $http. El mismo puede ser configuradomediante suproveedor $httpProvider para editar los headers enviados al servidor en cada peticin o transformar

Captulo 2: Estructura 20

la respuesta del mismo antes de ser entregada por el servicio. Este comportamiento puede serconfigurado en el archivo HTTP.js.En esencia, ste es el contenido de la carpeta App/Config de igual forma se puede continuarcreando archivos de configuracin segn las necesidades de cada aplicacin y a medida que sevayan usando los servicios. La configuracin de los mdulos de terceros deben estar situados enApp/Config/Packages para lograr una adecuada estructura.Los directorios restantes dentro de la carpeta App tienen un significado muy simple: Contro-llers, Directives y Filters sern utilizados para guardar los controladores, directivas y filtrosrespectivamente. La carpeta de Services ser utilizada para organizar toda la lgica de nuestraaplicacin que pueda ser extrada de los controladores, logrando de esta forma tener controladorescon responsabilidades nicas. Y por ltimo en la carpetaModels se maneja todo lo relacionado condatos en la aplicacin.Si logramos hacer uso de esta estructura obtendremos como resultado una aplicacin organizada yfcil de mantener.

Captulo 3: MdulosHasta ahora hemos estado declarando el controlador como una funcin de javascript en el entornoglobal, para los ejemplos estara bien, pero no para una aplicacin real. Ya sabemos que el uso delentorno global puede traer efectos no deseados para la aplicacin. AngularJS nos brinda una formamuy inteligente de resolver este problema y se llamaMdulos.

Creando mdulosLos mdulos son una forma de definir un espacio para nuestra aplicacin o parte de la aplicacin yaque una aplicacin puede constar de varios mdulos que se comunican entre s. La directiva ng-appque hemos estado usando en los ejemplos anteriores es el atributo que define cual es el mdulo queusaremos para ese mbito de la aplicacin. Aunque si no se define ningn mdulo se puede usarAngularJS para aplicaciones pequeas pero no es recomendable.En el siguiente ejemplo definiremos el primer mdulo y lo llamaremos miApp, a continuacinharemos uso de l.

Ejemplo No.4

1 2 3 {{ mensaje }}4 5 6 7 angular.module('miApp', [])8 .controller('miCtrl', function ($scope) {9 $scope.mensaje = 'AngularJS Paso a Paso';10 });11 12

En el ejemplo anterior tenemos varios conceptos nuevos. Comencemos por mencionar que alincluir el archivo angular.js en la aplicacin, ste hace que est disponible el objeto angu-lar en el entorno global o sea como propiedad del objeto window, lo podemos comprobarabriendo la consola del navegador en el ejemplo anterior y ejecutando console.dir(angular) oconsole.dir(window.angular)

Captulo 3: Mdulos 22

A travs de este objeto crearemos todo lo relacionado con la aplicacin.Para definir un nuevomdulo para la aplicacin haremos uso del mtodomodule del objeto angularcomo se puede observar en la lnea 7. Este mtodo tiene dos funcionalidades: crear nuevos mduloso devolver un mdulo existente. Para crear un nuevo mdulo es necesario pasar dos parmetrosal mtodo. El primer parmetro es el nombre del mdulo que queremos crear y el segundo unalista de mdulos necesarios para el funcionamiento del mdulo que estamos creando. La segundafuncionalidad es obtener un mdulo existente, en este caso slo pasaremos un primer parmetro almtodo, que ser el nombre del mdulo que queremos obtener y este ser devuelto por el mtodo.

Minificacin y CompresinEn el ejemplo anterior donde crebamos el mdulo comenzamos a crear los controladores fuera delespacio global, de esta forma no causar problemas con otras libreras o funciones que hayamosdefinido en la aplicacin. En esta ocasin el controlador es creado por un mtodo del mdulo querecibe dos parmetros. El primero es una cadena de texto definiendo el nombre del controlador, o unobjeto de llaves y valores donde la llave sera el nombre del controlador y el valor el constructor delcontrolador. El segundo parmetro ser una funcin que servir como constructor del controlador,este segundo parmetro lo usaremos si hemos pasado una cadena de texto como primer parmetro.Hasta este punto todo marcha bien, pero en caso de que la aplicacin fuera a ser minificadatendramos un problema ya que la dependencia $scope seria reducida y quedara algo as como:.controller('miCtrl',function(a){AngularJS no podra inyectar la dependencia del controlador ya que a no es un servicio deAngularJS. Este problema tiene una solucin muy fcil porque AngularJS nos permite pasarun arreglo como segundo parmetro del mtodo controller. Este arreglo contendr una lista dedependencias que son necesarias para el controlador y como ltimo elemento del arreglo la funcinde constructor. De esta forma al ser minificado nuestro script no se afectaran los elementos delarreglo por ser solo cadenas de texto y quedara de la siguiente forma:.controller('miCtrl',['$scope',function(a){AngularJS al ver este comportamiento inyectar cada uno de los elementos del arreglo a cada unode las dependencias del controlador. En este caso el servicio $scope ser inyectado como a en elconstructor y la aplicacin funcionar correctamente.Es importante mencionar que el orden de los elementos del arreglo ser el mismo utilizado porAngularJS para inyectarlos en los parmetros del constructor. En caso de equivocarnos a la horade ordenar las dependencias podra resultar en comportamientos no deseados. En lo adelante paraevitar problemas de minificacin el cdigo ser escrito como en el Ejemplo No.4.1

Minificar es el proceso por el que se someten los script para reducir tamao y as aumentar la velocidad de carga del mismo.

Captulo 3: Mdulos 23

Ejemplo No.4.1

1 2 angular.module('miApp', [])3 .controller('miCtrl', ['$scope', function ($scope) {4 $scope.mensaje = 'AngularJS Paso a Paso';5 }]);6

Configurando la aplicacinEn el ciclo de vida de la aplicacin AngularJS nos permite configurar ciertos elementos antes de quelos mdulos y servicios sean cargados. Esta configuracin la podemos hacer mediante el mduloque vamos a utilizar para la aplicacin. El mdulo posee un mtodo config() que aceptar comoparmetro una funcin donde inyectaremos las dependencias y configuraremos. Este mtodo esejecutado antes de que el propio mdulo sea cargado.A lo largo del libro estaremos haciendo uso de este mtodo para configurar varios servicios. Esimportante mencionar que un mdulo puede tener varias configuraciones, estas sern ejecutadaspor orden de declaracin. En lo adelante tambin mencionamos varios servicios que pueden serconfigurados en el proceso de configuracin del mdulo y ser refiriendo a ser configuradomedianteeste mtodo.La inyeccin de dependencia en esta funcin de configuracin solo inyectar dos tipos de elementos.El primero sern los servicios que sean definidos con el mtodo provider. El segundo son lasconstantes definidas en la aplicacin. Si tratramos de inyectar algn otro tipo de servicio o valueobtendramos un error. La sintaxis de la configuracin es la siguiente.

1 angular.module('miApp')2 .config(['$httpProvider', function ($httpProvider) {3 // Configuraciones al servicio $http.4 }]);

Mtodo runEn algunas ocasiones necesitaremos configurar otros servicios que no hayan sido declarados con elmtodo provider del mdulo. Para esto el mtodo config del mdulo no nos funcionar ya que losservicios an no han sido cargados, incluso ni siquiera el mdulo. AngularJS nos permite configurarlos dems elementos necesarios de la aplicacin justo despus de que todos los mdulos, servicioshan sido cargados completamente y estn listos para usarse.

Captulo 3: Mdulos 24

El mtodo run() del mdulo se ejecutar justo despus de terminar con la carga de todos loselementos necesarios de la aplicacin. Este mtodo tambin acepta una funcin como parmetroy en esta puedes hacer inyeccin de dependencia. Como todos los elementos han sido cargadospuedes inyectar lo que sea necesario. Este mtodo es un lugar ideal para configurar los eventos yaque tendremos acceso al $rootScope donde podremos configurar eventos para la aplicacin de formaglobal.Otro de los usos ms comunes es hacer un chequeo de autenticacin con el servidor, escucharpara si el servidor cierra la sesin del usuario por tiempo de inactividad cerrarla tambin en laaplicacin cliente. Escuchar los eventos de cambios de la ruta y del servicio $location. La Sintaxises esencialmente igual a la del mtodo config.

1 angular.module('miApp')2 .run(['$rootScope', function ($rootScope) {3 $rootScope.$on('$routeChangeStart', function(e, next,current){4 console.log('Se comenzar a cambiar la ruta hacia' + next.originalPath);5 })6 }]);

Despus de haber visto como obtener AngularJS, la manera de insertarlo dentro de la aplicacin, laforma en que este framework extiende los elementos HTML con nuevos atributos, la definicin, laaplicacin con mdulos y controladores considero que has dado tus primeros pasos. Pero no terminaaqu, queda mucho por recorrer. Esto tan solo es el comienzo.

Dedicado aTabla de contenidos

AgradecimientosTraduccionesPrlogoPara quien es este libroQue necesitas para este libroEntindaseFeedbackErrataPreguntasRecursos

AlcanceCaptulo 1: Primeros pasosCaptulo 2: EstructuraCaptulo 3: MdulosCaptulo 4: ServiciosCaptulo 5: Peticiones al servidorCaptulo 6: DirectivasCaptulo 7: FiltrosCaptulo 8: RutasCaptulo 9: EventosCaptulo 10: RecursosExtra: Servidor API RESTful

IntroduccinEntorno de desarrolloSeleccionando el editorPreparando el servidorGestionando dependencias

AngularJS y sus caractersticasPlantillasEstructura MVCVinculacin de datosDirectivasInyeccin de dependencia

Captulo 1: Primeros pasosVas para obtener AngularJSIncluyendo AngularJS en la aplicacinAtributos HTML5La aplicacinTomando el Control

Captulo 2: EstructuraEstructura de ficheros.Estructura de la aplicacin

Captulo 3: MdulosCreando mdulosMinificacin y CompresinConfigurando la aplicacinMtodo run