AngularJS in Action

Todo el cdigo fuente para los ejemplos en el libro se puede encontrar en este enlace de Github:
https://github.com/angularjs-inaction. La aplicacin de ejemplo para el libro est en este repositorio:
https://github.com/angularjs-in-action/angello. La versin simplificada de la aplicacin se encuentra en este
repositorio: https://github.com/angularjs-inaction/angello-lite

El cdigo fuente tambin se puede descargar desde el sitio web del editor en
www.manning.com/AngularJSinAction.

Requisitos de Software
Para ejecutar las aplicaciones de ejemplo, deber instalar Node.js. Puede encontrar las instrucciones de
instalacin de Node.js en este enlace: https://nodejs.org/. Para ejecutar las pruebas, tambin es necesario
tener Karma instalado para ejecutar las pruebas de unit test. Puede encontrar instrucciones sobre cmo
instalar Karma en su sitio web: http://karma-runner.github.io/0.12/index.html.

Tambin recomendamos instalar el mdulo de servicio npm, un servidor web ligero para mostrar sus
aplicaciones web en el navegador: https://www.npmjs.com/package/serve.

Parte 1. Conozca a AngularJS

Bienvenido al mundo de AngularJS! La Parte 1 de este libro ofrece una visin general de AngularJS
de alto nivel, as como una introduccin suave a AngularJS a travs de la construccin de una
aplicacin web simple pero til.

En el captulo 1 presentamos todas las piezas principales de AngularJS y discutimos lo que hacen y
cmo encajan. Tambin introducimos una versin simplificada de la aplicacin de muestra del libro
y la construimos desde cero. En el captulo 2, discutiremos cmo ensamblar sus aplicaciones
AngularJS utilizando las mejores prcticas para asegurarse de que sus aplicaciones sean
mantenibles y extensibles.

Para el final de la parte 1, usted debe tener una buena comprensin de las piezas principales de
AngularJS y ser conversacional en cmo trabajan todos juntos. Si trabaja a travs de cmo
construir la aplicacin de ejemplo, tambin tendr una buena base para comenzar su viaje de
AngularJS.

AngularJS es un framework muy dinmico y en rpida evolucin. Por favor, consulte el repositorio
de los ltimos ejemplos de cdigo, as como el contenido adicional: https://github.com/angularjs-
inaction. Tambin puede encontrar el cdigo para el primer proyecto aqu:
https://github.com/angularjs-in-action/angello-lite.

1. Hello AngularJS
Este captulo cubre
Por qu necesita AngularJS
Cmo AngularJS hace su vida ms fcil
Comprensin de AngularJS desde un nivel alto
Construccin de su primera aplicacin AngularJS

Hubo un tiempo hace muchos aos Internet cuando cualquier tipo de lgica dentro de una pgina
web tena que ser enviado al servidor para el procesamiento y luego vuelto a renderizar como una
pgina web completamente nueva. Este "llamar y refrescar" arreglo hizo para una experiencia de
usuario inconexa, que slo se exacerb cuando la latencia de la red era especialmente alta.

El paradigma entero fue upended con la introduccin de XMLHttpRequest y la capacidad de hacer

llamadas asincrnicas al servidor sin realmente tener que refrescar la pgina. Esto hizo una
experiencia de usuario mucho ms coherente porque el usuario poda realizar una tarea que
requera una llamada remota y an as interactuar con la aplicacin a medida que se realizaba y
procesaba la llamada. Aqu es donde la primera ola de frameworks de JavaScript aterriz y logr
probar que el trabajo con JavaScript se poda hacer de una manera muy sana y nadie iba a perder
la vida o el miembro.

La mayora de la gente estara de acuerdo en que jQuery gan esa ronda, en parte porque jQuery
hizo un trabajo tan bueno de abstraer toda la locura que rodea las variaciones del navegador, y
permiti a los desarrolladores usar una nica API simplificada para construir sitios web. La
siguiente frontera era hacer que los sitios web se comportaran y funcionaran como si fueran
aplicaciones reales; Esto dio paso a un nuevo conjunto de desafos. Por ejemplo, jQuery ha hecho
un trabajo excepcional de proporcionar herramientas para manipular el DOM, pero no ofrece
ninguna gua real sobre cmo organizar su cdigo en una estructura de aplicacin. Todos hemos
escuchado historias de horror de cmo una "aplicacin" de jQuery se expandi hacia una
monstruosidad que apenas poda mantenerse, mucho menos extendida.

Esta necesidad desesperada de escribir aplicaciones JavaScript grandes y sostenibles ha dado

lugar a un renacimiento del framework JavaScript. En el ltimo par de aos, una gran cantidad de
frameworks ha estallado en la escena, con muchos de ellos silenciosamente desapareciendo en el
olvido. Sin embargo, algunos frameworks han demostrado ser slidas opciones para escribir
aplicaciones web a gran escala que se pueden mantener, ampliar y probar. Uno de los frameworks
ms populares, si no los ms populares, es AngularJS de Google.

AngularJS es un framework de aplicaciones web de cdigo abierto que ofrece bastante a un

desarrollador a travs de una base de cdigo estable, comunidad vibrante y un rico ecosistema.
Vamos a identificar algunas de las ventajas de alto nivel de usar AngularJS antes de entrar en
algunos de los detalles ms tcnicos del framework.

1.1 Ventajas del uso de AngularJS

En esta seccin echaremos un vistazo rpido a lo que hace que AngularJS sea tan grande.

UN FRAMEWORK INTUITIVO HACE FCIL DE ORGANIZAR SU CDIGO

Como se ha indicado anteriormente, existe la necesidad urgente de poder organizar su cdigo de
manera que promueva el mantenimiento, la colaboracin, la legibilidad y la extensin. AngularJS
est construido de tal manera que el cdigo tiene un lugar intuitivo para vivir, con caminos claros
para refactorizar el cdigo cuando ha alcanzado un punto de inflexin. Tiene cdigo que necesita
proporcionar informacin sobre cmo se supone que una interfaz de usuario se ve y se comporta?
Hay un lugar para eso. Tiene cdigo que necesita contener una parte de su modelo de dominio y
estar disponible para el resto de la aplicacin para usar? Hay un lugar para eso. Necesita
programar la manipulacin DOM? Incluso hay un lugar sano para eso tambin!

EL CDIGO TESTABLE LO HACE FACILMENTE PARA DORMIR EN LA NOCHE

El cdigo comprobable no va a ganar premios por ser la caracterstica ms excitante de un
framework, pero es el hroe no reconocido de cualquier framework maduro. AngularJS fue escrito
desde cero para ser comprobable, y probablemente esta caracterstica, junto con las decisiones de
diseo que surgieron de este compromiso, ha jugado un papel enorme en la adopcin de
AngularJS. Cmo saber si su aplicacin funciona? El hecho de que no se ha roto todava es una
respuesta endeble, ya que es slo cuestin de tiempo antes de que el cisne negro aparece en su
puerta.

Nunca se puede mitigar completamente contra los errores, pero realmente puede eliminar ciertas
posibilidades a travs de rigurosas pruebas. Un framework que es propicio para escribir cdigo
testable es un framework en el que vas a escribir pruebas. Y cuando escribes pruebas, pasars
menos tiempo mirando por encima de tu hombro preguntndote cuando todo va a caer. Usted
ser capaz de ir a la cama por la noche y no tiene que preocuparse por una llamada de 2 a.m. de
DevOps que algo ha ido mal y usted necesita arreglarlo inmediatamente.
LA VINCULACIN DE DATOS DE DOS VAS LE AHORRA CINCO DE LNEAS DE CDIGO
La vinculacin de datos bidireccional es la supermodelo del conjunto de caractersticas. Cientos de
aos atrs, cuando estbamos escribiendo aplicaciones jQuery, habramos tenido que usar jQuery
para consultar el DOM para encontrar un elemento especfico, escuchar un evento, analizar el
valor del elemento DOM y luego realizar alguna accin en ese valor. En AngularJS, simplemente
tiene que definir una propiedad JavaScript y luego enlazarla en nuestro HTML, y ya est. Hay
obviamente algunas variaciones a este escenario, pero no es infrecuente or hablar de las
aplicaciones de jQuery siendo reescritas y miles de lneas de JavaScript simplemente
desapareciendo.

Al cortar todo el cdigo de clich que antes era necesario para mantener nuestro cdigo HTML y
JavaScript en sincrona, usted es capaz de realizar ms trabajo en menos tiempo con mucho
menos esfuerzo. Esto le da ms tiempo para hacer ms de lo que te gusta.

ESTRUCTURAS DE DATOS QUE SON SLO JAVASCRIPT HACER LA INTEGRACIN

REALMENTE FCIL
Por otro lado, ser capaz de trabajar con Objetos JavaScript Plain Old (POJOs) hace la integracin
con otras tecnologas increblemente fcil. Al consumir y emitir JavaScript sin tener que envolverlo
y desenrollarlo en mecanismos de framework patentado, puede consumir datos de otras fuentes
mucho ms eficientemente.

Puede procesar los modelos JSON del servidor y consumirlos instantneamente en AngularJS
cuando la aplicacin arranque. Tambin puede tomar el modelo con el que est trabajando y
pasarlo a otra tecnologa, como un servidor de aplicaciones, sin tener que transformarlo en
absoluto.

Hay algunas caractersticas bastante interesantes de AngularJS que son bastante acadmicos en
la naturaleza; Hemos tratado de esbozar algunos puntos importantes de cmo AngularJS hace
nuestras vidas ms fciles en un sentido muy prctico. Al final del da, contar con un framework
que nos permita escribir cdigos estables rpida y eficientemente para que tengamos ms tiempo
y energa para hacer otras cosas significativas es una herramienta que queremos usar!

1.2 Panorama General de AngularJS

Introduciremos AngularJS desde una vista de 10.000 pies y sentaremos las bases para lo que
reforzaremos a lo largo de todo el libro (ver tabla 1.1). Si llegas al final del libro y tienes una
comprensin slida de la figura 1.1 y cmo todas las piezas encajan, habremos tenido xito como
autores. Si han a bsorbido estos conceptos de tal manera que estas piezas forman un
vocabulario en el que empiezan a articular y expresar formas de resolver sus propios problemas,
habremos logrado una forma espectacular!

Tabla 1.1 AngularJS de un vistazo

Component Propsito
e
Module Los mdulos sirven como contenedores para ayudarle a organizar el cdigo
(Mdulos) dentro de su aplicacin AngularJS. Los mdulos pueden contener sub-mdulos,
lo que facilita la composicin de la funcionalidad segn sea necesario.
Config El bloque de configuracin de una aplicacin AngularJS permite que la
(Configuraci configuracin se aplique antes de que la aplicacin se ejecute realmente. Esto
n) es til para configurar rutas, configurar dinmicamente servicios, etc.
Routes Las rutas le permiten definir maneras de navegar a estados especficos dentro
(Rutas) de su aplicacin. Tambin le permiten definir opciones de configuracin para
cada ruta especfica, como la plantilla y el controlador a utilizar.
Views La vista en AngularJS es lo que existe despus de que AngularJS haya
compilado y convertido el DOM en todo el cableado JavaScript en su lugar.
$scope $scope es esencialmente el pegamento entre la vista y el controlador dentro de
 una aplicacin AngularJS. Con la introduccin del controlador como sintaxis, la
necesidad de utilizar explcitamente $scope se ha reducido considerablemente.
Controller El controlador es responsable de definir mtodos y propiedades con los que la
vista puede enlazar e interactuar. Como cuestin de buena prctica, los
controladores deben ser ligeros y slo se centran en la vista que estn
controlando.
Directive Una directiva es una extensin de una vista en AngularJS, ya que permite crear
elementos personalizados y reutilizables que encapsulan el comportamiento.
Usted puede pensar en las directivas como componentes o decoradores para su
HTML. Las directivas se utilizan para ampliar las vistas y para que estas
extensiones estn disponibles para su uso en ms de un lugar.
Service Los servicios proporcionan funcionalidad comn a una aplicacin de AngularJS.
Por ejemplo, si tiene datos que necesitan ms de un controlador, promocionara
esos datos a un servicio y, a continuacin, los pondra a disposicin de los
controladores a travs del servicio. Los servicios amplan los controladores y los
hacen ms accesibles a nivel mundial.

Aunque vamos a entrar en cada uno de estos mecanismos de AngularJS en profundidad en los
siguientes captulos, queramos presentarles a los principales jugadores desde el principio para
que tuvieran una base sobre la que basarse.

1.3 Crea tu primera aplicacin de AngularJS

Ahora que tiene las piezas del juego AngularJS en la mesa, cmo las usa para crear algo til? Este
es el momento perfecto para construir algo fcil con AngularJS. Usted conseguir sus pies mojados
construyendo una versin a escala reducida de la aplicacin de la muestra para el libro; Y, en el
proceso, ver cmo estas piezas AngularJS encajan sin llegar demasiado avanzado. Fiel al ttulo de
este libro, aprenders AngularJS al verlo en accin y reunir ejemplos que se vinculan con una
aplicacin ms grande y totalmente funcional.

La aplicacin de muestra para el libro se llama Angello; Es un clon de Trello que se usa para
administrar historias de usuarios. Qu queremos decir con un clon de Trello? Bueno, como
algunos de ustedes saben, Trello es una herramienta de gestin de proyectos basada en la web y
fundada en una tcnica originalmente popularizada por el fabricante de automviles japons
Toyota en la dcada de 1980. Las unidades de trabajo en un proyecto estn representadas por
tems-historias, si lo desea- que pueden moverse a diferentes posiciones en un tablero
correspondiente al estado de progreso de cada historia. La propia junta representa el proyecto.
Introduciremos correctamente a Angello en el siguiente captulo, pero se puede ver la pantalla
principal de Angello en la figura 1.2 y la versin lite de Angello en la figura 1.3. El cdigo fuente
completo para Angello Lite se puede encontrar en https://github.com/angularjs-in-action/angello-
lite . Descargue la ltima versin a su mquina local siguiendo las instrucciones en el archivo
README.md de esa pgina.

En el curso del libro, vamos a construir Angello, que se puede ver en la figura 1.2. En la parte
izquierda de la pantalla, los elementos de trabajo estn representados por las casillas blancas
denominadas Primera historia y Segunda historia, y el flujo de progreso est representado por las
columnas Hacer, En progreso, Revisin de cdigo, Revisin de calidad y Verificado, Movindose de
izquierda a derecha en la pantalla. A medida que avanza el trabajo, cada cuadro se mueve
arrastrando y soltando para representar su estado de finalizacin dentro del proyecto. Los detalles
de cada elemento de trabajo, cada historia, se pueden ver a la derecha de la pantalla. Como usted
puede haber adivinado, cada historia en Angello representa una unidad del software de
computadora que puede pasar de la creacin a la terminacin como se desarrolla el proyecto.

Empezaremos construyendo una versin simplificada, que se puede ver en la figura 1.3.
ANGELLO LITE Debido a que est extrayendo archivos de un CDN, necesitar ejecutar Angello
Lite desde un servidor web. Hay algunas maneras de hacer esto, pero una de las maneras ms
fciles es utilizar el servicio del paquete del npm.
Los pasos para instalar Angello Lite son los siguientes:
Instalar Node.js. Puede encontrar toda la informacin para hacerlo en http://nodejs.org/.
Instale el paquete de servicio ejecutando npm install -g service desde la lnea de comandos.
Descargue Angello Lite de GitHub, usando la URL dada arriba, y colquela en su mquina
local en un directorio llamado angello-lite.
gitclonehttps://github.com/angularjs-in-action/angello-lite
Navegue hasta el directorio angello-lite desde la lnea de comandos y ejecute el servicio.
cdAngellolite
npminstallgserve
serve
Vaya a http: // localhost: 5000 en su navegador para ver la aplicacin.

Angello Lite es una versin simplificada de la aplicacin de Angello que desarrollamos a partir del
captulo 2 en adelante. Todos los datos que agregue aqu se almacenarn en la memoria solo y no
se mantendrn, por lo que al volver a cargar la pgina, se perder. Para mostrar los detalles de
una historia existente, haga clic en el cuadro que muestra su ttulo y descripcin a la izquierda de
la pantalla. Sus detalles aparecern a la derecha. Utilice estos cuadros de texto y listas
desplegables para alterar o aumentar la historia y estas actualizaciones permanecern durante el
tiempo que la pgina se cargue en el navegador. Para crear una nueva historia, haga clic en el
signo ms a la izquierda. Aparecer un nuevo cuadro de ttulo y descripcin. Coloque un nuevo
ttulo y una descripcin, junto con otros datos, en los cuadros de texto de la derecha y vea cmo el
ttulo y la descripcin en el cuadro de resumen cambian en tiempo real mientras escribe.

Como un resumen de alto nivel, la figura 1.4 muestra las piezas que vamos a construir a medida
que se relacionan con el panorama general. Empezaremos construyendo el mdulo y luego
construyendo la vista y el controlador a travs de index.html y MainCtrl, respectivamente. A partir
de ah vamos a introducir los servicios mediante la creacin de AngelloModel y una directiva
mediante la creacin de la directiva historia.

No vamos a pasar por Angello Lite lnea por lnea, pero vamos a cubrir suficientemente los
aspectos ms destacados de modo que usted estar familiarizado con lo que est sucediendo.
Para cuando termine este captulo, al menos ser capaz de fingir su camino a travs de una cena
de AngularJS!

La cosa a tener en cuenta al construir Angello Lite es que es una interfaz masterdetail, que
aparece en casi todas las aplicaciones web en una forma u otra. La comprensin de cmo armar
una interfaz de maestro-detalle es uno de los mejores fundamentos para aprender a construir
aplicaciones web en general.
1.3.1 The module
Los mdulos en AngularJS sirven como contenedores para ayudarle a organizar su aplicacin en
unidades lgicas. Los mdulos le indican a AngularJS cmo se configura una aplicacin y cmo se
supone que se comportar. Usted puede ver cmo encaja en el cuadro grande en la figura 1.5.
En nuestro cdigo, crearemos un mdulo llamado Angello y lo asignaremos a la variable
myModule:

//app.js
varmyModule=angular.module(Angello,[]);

El segundo parmetro es una array que acepta otros sub-mdulos para proporcionar funcionalidad
adicional, si es necesario. Se considera la mejor prctica dividir las caractersticas en submdulos
y luego inyectarlas en el mdulo de aplicacin principal. Esto hace que sea mucho ms fcil mover
un mdulo alrededor, as como probarlo.

Ahora puede definir los componentes necesarios para Angello Lite en la propiedad myModule. Por
ejemplo, aqu definimos dos servicios llamados AngelloHelper y AngelloModel, as como un
controlador llamado MainCtrl y una directiva llamada story:

//app.js
varmyModule=angular.module(Angello,[]);
myModule.factory(AngelloHelper,function(){});
myModule.service(AngelloModel,function(){});
myModule.controller(MainCtrl,function(){});
myModule.directive(story,function(){});

Con el mdulo Angello definido y todas las piezas necesarias, ahora puede arrancar su aplicacin
AngularJS, utilizando Angello como punto de partida. La forma ms fcil de arrancar una aplicacin
AngularJS es agregar el atributo ng-app al elemento HTML donde desea que resida la aplicacin
AngularJS. En nuestro caso, queremos que nuestra aplicacin utilice toda la pgina, por lo que
aadiremos ng-app = "Angello" a la etiqueta html. Esto arrancar el AngularJS con el mdulo
Angello:

<!index.html>
<htmlngapp="Angello">

A partir de aqu, detallaremos las piezas restantes con comentarios sobre cmo funcionan.
1.3.2 Views and controllers
Uno de los conceptos ms crticos para entender cuando se aprende AngularJS es la separacin del
estado de los DOM. AngularJS es oficialmente un modelo-View-Whatever (MVW) framework- "Lo
que sea" puede ser cualquier patrn que te ayuda a ser ms productivo. En aras de la
conversacin, supongamos que AngularJS sigue el modelo de diseo Model-View-View-Model
(MVVM), como se establece en la figura 1.6.

Vamos a llegar a la parte Modelo en la seccin de servicios; Pero por ahora vamos a enfocarnos en
las partes View y ViewModel de este patrn. La Vista en el patrn MVVM es la vista en AngularJS
(naturalmente), y el controlador reproduce la parte del ViewModel, como se puede ver en la figura
1.7.
El controlador es responsable de proporcionar el estado para la vista a enlazar y comandos que la
vista puede emitir de nuevo al controlador para hacer las unidades de trabajo. Esto libera la vista
de tener que mantener el estado (ya que slo tiene que mostrar cualquier estado en el
controlador) y libera la vista de tener que hacer cualquier trabajo (como la vista siempre difiere al
controlador).

Para ilustrar esto en accin, primero instanciaremos el MainCtrl aadindolo al DOM con la
directiva ng-controller. Utilizamos la sintaxis de controlador-como declarando el controlador
MainCtrl como principal, lo que significa que vamos a hacer referencia a MainCtrl como principal
en el archivo HTML en adelante:

<!index.html>
<divngcontroller="MainCtrlasmain">
</div>

Hacer una propiedad disponible para vincularse dentro de la vista es slo cuestin de declararla
en el controlador. Por ejemplo, puede declarar una propiedad en MainCtrl, como this.title, y luego
enlazarla inmediatamente en la vista usando dobles llaves como esta: <h1> {{main.title}} </
h1>. Cualquier cambio en la propiedad del ttulo se reflejara de forma instantnea en el DOM. La
vinculacin a una propiedad de cadena simple es bastante simplista, as que hagamos algo ms
en profundidad y nos unamos a una coleccin real. Crearemos una array que contenga varios
objetos de la historia y la definiremos como historias en MainCtrl:
 THIS. Por convencin comn, nos gusta almacenar una referencia al nivel superior de este
objeto en caso de que lo necesitamos ms tarde; Esto tiene el hbito de cambiar el
contexto basado en el alcance del nivel de la funcin. Tambin nos gusta nombrar la
referencia a este mismo nombre, declaramos el controlador -como en la vista- como en
main para MainCtrl como main. Esto hace que sea ms fcil de leer y conectar los puntos a
medida que salta entre el HTML y el JavaScript.

Mostraremos la coleccin main.stories como una lista de elementos que comprenden la parte
maestra de la vista de detalle maestro. Lo primero que debemos hacer es repetir sobre el array
principal de .stories y crear un elemento de visualizacin individual para cada elemento de la
historia en la matriz. La directiva ng-repeat cumple esto pasando por cada elemento de la
coleccin main.stories y creando una copia del elemento HTML en el que fue declarado y todos sus
elementos secundarios. As que al declarar ngrepeat="storyinmain.stories" en nuestra div de
llamada, estamos esencialmente diciendo a AngularJS que realice bucle a travs de main.stories
y haga referencia a cada tem individual como story, a lo que podemos vincularnos dentro de los
elementos child:
Cada objeto de story tiene una propiedad de ttulo y descripcin, a la que podemos enlazar a
travs de {{story.title}} y {{story.description}}. AngularJS es realmente bueno en
proporcionar el contexto dentro de cada instancia de plantilla, por lo que no tiene que preocuparse
de que la instancia de story se sobrescriba con cada iteracin. Esto es importante cuando
queremos empezar a hacer cosas como ng-click = "main.setCurrentStory (story)", en el que
cada instancia especficada de story importa mucho.

Este es un paso perfecto para ir ms all de la vinculacin a las propiedades y aprender a vincular
a las expresiones. Tambin puede poner los mtodos a disposicin de la vista declarndolos en el
controlador. Por ejemplo, vamos a definir un mtodo llamado main.createStory que empuja un
nuevo objeto de historia en el array main.stories:

Ahora que createStory est definido en MainCtrl, est disponible para ser llamado desde la
vista. Entonces podemos llamar a main.createStory desde la vista usando ng-click en una
etiqueta de ancla:
El uso de un ViewModel invierte el flujo de aplicaciones que tradicionalmente exista en
aplicaciones jQuerystyle. En jQuery, habras consultado el DOM y adjunto un detector de eventos.
Cuando se dispar ese evento, intentara interpretar el evento y analizar el DOM para el estado
para que pudiera realizar alguna operacin imperativa. Esto obliga a un estrecho acoplamiento
entre el HTML y el JavaScript que lo impulsa. Al introducir un ViewModel, usted es capaz de romper
esta relacin. El controlador ya no es responsable de escuchar la vista, sino que la vista es
responsable de emitir comandos especficos al controlador en el que opera.

MVVM. Una discusin completa sobre el patrn MVVM est fuera del alcance de este libro, pero le
recomendamos leerlo aqu: http://en.wikipedia.org/wiki/Model_View_ViewModel. Tener una clara
separacin entre el marcado declarativo y la lgica imperativa conduce a un cdigo mejor y ms
estable que es ms fcil de probar.

1.3.3 Services
Si los controladores deben ser ligeros y especficos para la vista de la que son responsables, qu
sucede si dos controladores necesitan compartir la misma informacin? Los controladores
definitivamente no deben saber el uno del otro. Entonces, qu sucede si alguna informacin
comienza en un controlador y te das cuenta de que necesita estar disponible en otro controlador?
La respuesta a estas preguntas es un servicio de AngularJS. Promueves (extraes) los datos
comunes del controlador y lo ponen a disposicin de toda la aplicacin exponindolo a travs de
un servicio. Como se puede ver en la figura 1.8, se trata de la parte Modelo del modelo Model-
View-ViewModel.

En la seccin anterior, hemos poblado nuestra coleccin de historias directamente en MainCtrl,

pero ahora promoveremos esa coleccin al servicio AngelloModel y la pondremos a disposicin
de MainCtrl. Declararemos una propiedad de story en AngelloModel y luego la poblaremos con
la misma coleccin que usamos en MainCtrl:
Desde aqu, haremos AngelloModel disponible para MainCtrl pasndolo a la funcin constructor
como un parmetro. AngularJS utiliza la inyeccin de dependencia (DI) para proporcionar
dependencias donde se necesitan. La inyeccin de dependencia es ms sofisticada en nombre que
en la implementacin. AngularJS puede detectar que necesitamos una instancia de AngelloModel,
por lo que crea una instancia para su uso y la inyecta en MainCtrl, cumpliendo as esa
dependencia:

Ahora podemos rellenar main.stories asignndole el valor de retorno de AngelloModel.getStories

(). La belleza de este arreglo es que MainCtrl es completamente ajeno a donde los datos de
historias viene o cmo lo conseguimos. Vamos a entrar en esto en mucha mayor profundidad en
los siguientes captulos, pero podramos haber hecho tan fcilmente una llamada a un servidor
remoto y poblado los datos de esa manera.

Un ejemplo ms rpido, y luego pasaremos a las directivas. Los servicios de AngularJS no son slo
para almacenar estado comn, sino tambin para compartir funciones comunes, como funciones
de utilidad. Por ejemplo, necesitamos un mtodo buildIndex muy general para tomar un array y
crear un ndice basado en un parmetro de propiedad. De esa manera no tendramos que hacer un
bucle sobre el array cada vez que necesitbamos encontrar un objeto en ella. Este tipo de funcin
general podra utilizarse en ms de un lugar, por lo que lo ponemos en un servicio AngelloHelper:
Este tipo de cdigo finamente graneado es mucho ms fcil de mantener y probar porque est
aislado y no depende de algn otro contexto de ejecucin.

1.3.4 Directivas
Las directivas son una de las cosas ms poderosas y emocionantes de AngularJS. De hecho, ya has
visto algunas directivas en accin en las secciones anteriores. Por ejemplo, cuando se conecta ng-
click a un elemento, se utiliza una directiva AngularJS integrada para aumentar el comportamiento
de ese elemento especfico. Cuando agrega ng-app o ng-controller a la pgina, est utilizando las
directivas de AngularJS para proporcionar un nuevo comportamiento a una pgina de otra forma
esttica. En la figura 1.9, puede ver cmo encajan en el cuadro general.

Introduciremos una directiva sencilla a Angello Lite para mojarnos los pies. Crearemos una
directiva a story que represente una historia en la pgina. Las directivas se definen de forma
similar a los controladores y servicios en que toman un nombre y una funcin que definen su
comportamiento:
La funcin devuelve un objeto de definicin de directiva (DDO) que define cmo debe configurarse
la directiva. Estamos diciendo a AngularJS que cada instancia de esta directiva obtiene un nuevo
mbito y que la plantilla que definimos reemplaza al elemento en el que se defini la directiva. El
marcado de plantilla debe ser familiar, ya que es el mismo cdigo que usamos anteriormente para
mostrar el ttulo y la descripcin del elemento de la historia actual.

Ahora que hemos definido la directiva, actualizamos el HTML en nuestra pgina para usar una
etiqueta de historia y no una etiqueta div. Una etiqueta de la historia? Hay tal cosa? Hay ahora!

A pesar de que este es un pequeo ejemplo de cmo extender HTML para hacer cosas nuevas
mediante directivas, queremos iniciar las ruedas girando en qu tipo de aplicaciones escribira si
pudiera crear etiquetas HTML y atributos para hacer lo que quera.

1.4 Resumen
Esto concluye nuestro tour de Angello Lite. Ahora que has visto a la mayora de los jugadores ms
importantes de la figura 1.1 en accin, pasaremos el resto del libro explorando estos conceptos
mucho ms profundo y en un contexto ms til cuando comencemos a trabajar con Angello.
Vamos a hacer una revisin rpida antes de terminar este captulo y dirigirnos a la siguiente:
AngularJS fue creado como un framework diseado para facilitar la escritura y organizacin
de grandes aplicaciones JavaScript.
AngularJS fue escrito desde cero para ser comprobable; Como resultado, es mucho ms fcil
escribir un cdigo limpio y estable que pueda escalar.
La vinculacin de datos le ahorra escribir literalmente miles, si no decenas de miles de
lneas de cdigo, ya que ya no tiene que escribir tedioso boilerplate alrededor de los
eventos DOM.
Debido a que las plantillas de AngularJS son slo HTML, es fcil aprovechar los conjuntos de
habilidades existentes para crear interfaces de usuario en AngularJS.
Los objetos JavaScript antiguos llanos facilitan la integracin con otros sistemas.
Los mdulos AngularJS son contenedores para organizar su aplicacin.
Las vistas en AngularJS se compilan y se representan HTML con un controlador adjunto.
Un controlador es ViewModel para la vista y es responsable de proporcionar datos y
mtodos para que la vista se pueda enlazar.
 Los servicios encapsulan y proporcionan funcionalidad comn en una aplicacin de
AngularJS.
Una directiva es un componente o atributo personalizado que extiende HTML para hacer
cosas nuevas y poderosas.
2. Estructuracin de su aplicacin AngularJS
Este captulo cubre
Introduccin a Angello
Cmo estructurar un proyecto AngularJS para que pueda escalar
Presentacin de rutas bsicas y navegacin
Creacin de la estructura bsica para iniciar una aplicacin web
Algunas prcticas bsicas para desarrollar aplicaciones AngularJS

2.1 Hola Angello

En el captulo anterior, usando un ejemplo limitado, usted vio cmo las piezas principales de
AngularJS encajan juntas para crear aplicaciones web. Aunque Angello Lite es un gran lugar para
familiarizarse con AngularJS, es nuestro deseo mostrarle cmo una aplicacin AngularJS no trivial
encaja en el mundo real. Para ello, nos gustara presentarles la aplicacin oficial de muestra del
libro-Angello.

POR QU ANGELLO? Una de las primeras aplicaciones web realmente impresionantes que
recordamos haber visto fue Trello, y siempre ha tenido un lugar especial en nuestros corazones.
Como recordatorio, Trello es una aplicacin web que le permite organizar listas dentro de listas y
afirma tener "todo lo necesario para organizar proyectos de cualquier tamao". Por eso queramos
usar Trello como inspiracin para construir una versin de AngularJS De Trello para el libro, para la
organizacin de proyectos de codificacin. Por eso tambin se llama Angello.

El cdigo fuente de Angello se puede encontrar en GitHub en el repositorio

https://github.com/angularjs-in-action/angello, y tambin puedes consultar una versin en vivo de
Angello en http://www.angelloinaction.com/.

Mucho pensamiento ha ido en el proceso de cubrir adecuadamente la comunicacin del lado del
servidor mientras que permaneca enfocado en AngularJS y que minimiza la sobrecarga cognitiva
que viene con girar encima de un servidor del desarrollo. En el momento de escribir este artculo,
hay dos opciones bastante indoloras para ejecutar un servidor back-end.

La primera y ms fcil opcin es utilizar Firebase como el back-end. Esto se puede configurar e
integrar en tan slo unos minutos de una cuenta totalmente gratuita. La segunda opcin es usar la
API Node.js que est en el sitio AngularJS en Accin GitHub. Recomendamos probar ambos porque
proporcionan oportunidades de aprendizaje igualmente valiosas. Revise los apndices para
obtener instrucciones detalladas sobre cmo configurar el back-end de su eleccin.

Hay cuatro secciones principales para Angello: la pantalla de inicio de sesin, la pantalla de inicio
o de guin grfico, la pantalla de usuario y la pantalla del tablero de instrumentos.
La pantalla de inicio de sesin (ver figura 2.1) es donde los usuarios se autentican antes de poder
navegar en cualquier otro lugar de la aplicacin. Esta ser la pantalla de inicio si es un usuario
desconectado. Para utilizar Angello, debe crear un nombre de usuario. Si an no lo ha hecho,
rellene el formulario de registro y haga clic en Registrarse.

La pantalla de inicio (ver figura 2.2) es donde tiene lugar la mayor parte de la interaccin dentro
de Angello. Los usuarios pueden crear y administrar historias de usuarios, visualizndolas como
tarjetas divididas en travesaos. Usted trabaja en estas historias de usuario mediante la creacin
de software que pasar por un proceso de pruebas y validacin y aceptacin final; Las tarjetas que
representan estas unidades de trabajo se colocarn en la pantalla de una manera que refleje este
proceso.

La pantalla de usuario (ver figura 2.3) es donde se pueden agregar nuevos usuarios o actualizar
usuarios existentes. Tambin hay una pantalla secundaria (que cubriremos en el captulo de
enrutamiento) que le permite ver todas las historias asignadas a ese usuario.
La pantalla del tablero de mandos (ver figura 2.4) le permite visualizar historias de usuarios por
estado y tipo en forma de grfico. Cubriremos cmo sucede esto en el captulo 5.

El objetivo con Angello es cubrir tantas tareas comunes de desarrollo como sea posible con cdigo
y tcnicas que se pueden modificar rpidamente para adaptarse a sus necesidades. Utilizaremos
Angello como contexto, pero trate de pensar en las maneras en que puede aplicar las cosas que
est aprendiendo al trabajo que est haciendo ahora mismo.
2.2 Estructura de la aplicacin de AngularJS
Con esto en mente, lo primero que merece una discusin cuando se construyen aplicaciones web
es la siguiente: cmo alguien realmente estructura su aplicacin para que no vivan para
arrepentirse a medida que aumenta la complejidad? Lo interesante de una buena estructura de
archivos es que tiene casi los mismos requisitos que un buen cdigo. De hecho, no es raro ver un
paralelo distinto entre la estructura de archivos y la organizacin de cdigo de una aplicacin.

Estructura del archivo

Una buena estructura de archivos facilita la navegacin, el mantenimiento y la ampliacin.
Tambin es importante que la estructura de archivos se auto-documenta e indica
claramente la intencin. Alguien debera ser capaz de ver la estructura de archivos y tener
rpidamente una comprensin de alto nivel de qu elementos componen la aplicacin y
qu hace la aplicacin.

CDIGO LIMPIO Uno de nuestros libros de programacin favoritos es Clean Code: A Handbook of
Agile Software Craftmanship de Robert C. Martin (2009, Pearson Education).
Recomendamos que todo el mundo lo lea. Una vez al ao.

Recuerdas las cuatro caractersticas principales de Angello que discutimos anteriormente? Mire la
figura 2.5 y vea si nota algo interesante.

En la carpeta angello, hay una carpeta para cada una de las caractersticas de Angello. Tambin
hay una carpeta de aplicaciones que contiene todas las funciones comunes que deben
compartirse con todas las caractersticas especficas.

Existen dos enfoques comunes para estructurar una aplicacin AngularJS: por tipo o por funcin.
Por ejemplo, si organizas tus archivos por tipo, pondrs todos tus controladores en una carpeta,
todos tus servicios en una carpeta y as sucesivamente. Si est organizando por caracterstica,
pondr todos los archivos que admiten una sola caracterstica en ese directorio. Un enfoque
hbrido tambin ha surgido que tienden a favorecer a organizar la estructura de archivos por
caractersticas y, a continuacin, dentro de la caracterstica, organizar por tipo. Esto permite un
diseo modular, pero hace que sea ms fcil para los nuevos desarrolladores para ponerse al da
rpidamente en un proyecto. Si est utilizando Grunt o Gulp, esto se convierte en menos de un
detalle de implementacin, todos sus archivos de origen estn concatenados en la distribucin de
todos modos. Vase la figura 2.6.
HACER LO QUE ES BUENO PARA USTED. Las mejores prcticas tienen una forma de convertirse
en temas religiosos, y animamos a todos a evitarlo por completo. Creemos que debemos favorecer
una convencin que nos ayude a construir las cosas mejor y ms rpidas. Elija una solucin que
funcione mejor para usted y su equipo y siga con ella. La consistencia es ms importante que
estar "bien".

2.3 Colocacin de la Fundacin Angello

El primer tema que abordaremos al comenzar a construir Angello es cmo encajan los mdulos
AngularJS. Los mdulos son los bloques de construccin de su aplicacin, y la comprensin de
cmo estos se ajustan har que la adicin de nuevas funcionalidades en el futuro ms fcil. De
hecho, a menudo visualizamos nuestras aplicaciones desde un nivel alto por su estructura de
mdulos.

En cada aplicacin de AngularJS, habr un solo mdulo de nivel superior que servir como punto
de inicializacin para cada otro mdulo de la aplicacin. Generalmente, este mdulo de nivel
superior no har otra cosa que conectar los submdulos apropiados y aplicar algunos ajustes de
configuracin de toda la aplicacin. En Angello, nuestro mdulo de nivel superior se llama
apropiadamente Angello. Lo usaremos para arrancar nuestra aplicacin en el archivo index.html a
travs de ng-app = "Angello":

En nuestro archivo Angello.js, crearemos el mdulo Angello y declararemos sus dependencias de

submdulo. Debido a que estamos utilizando el enrutamiento AngularJS y animaciones, vamos a
inyectar los Submdulos ngRoute y ngAnimate. Como se mencion anteriormente, ofrecemos
dos opciones para el manejo de la comunicacin y autenticacin de back-end: Firebase y Node.js.
Para habilitarlos, necesitamos inyectar los submdulos firebase, auth0, angular-jwt y angular-
storage. Por ltimo, pero no menos importante, utilizaremos el Submdulo ngMessages para la
validacin de formularios:

Tambin tenemos un Submdulo para cada caracterstica de Angello, incluyendo uno para la
funcionalidad comn que se comparte entre las caractersticas. Esto nos permite ver cmo se est
construyendo el mdulo Angello y establecer rpidamente una imagen mental de las piezas que
componen la aplicacin. Parece que Angello es realmente servir como una plataforma en la que
estamos adjuntando un montn de aplicaciones ms pequeas y ms especficas; Eso es por
diseo.

Has visto cmo se configura el mdulo de nivel superior, pero qu pasa con un submdulo?
Vamos a examinar el mdulo Angello.Storyboard para ver cmo se construye. Se construye
utilizando la misma llamada al mtodo angular.module que toma el nombre del nuevo mdulo
como una cadena y una matriz de sus dependencias:

El mdulo Angello.Storyboard necesita tener acceso a las historias de usuarios, pero tambin lo
hacen todos los otros mdulos, por lo que el StoriesModel es parte de Angello.Common. En
general, los modelos entrarn en el mdulo comn para que puedan compartirse en toda la
aplicacin. Una vez que hayamos inyectado Angello.Common en el mdulo Angello.Storyboard,
ahora podemos hacer llamadas al StoriesModel, como se puede ver en el StoryboardCtrl:

Puedes ver en el siguiente cdigo que StoriesModel est siendo declarado en Angello.Common:

POR FAVOR TEN CUIDADO Para obtener un mdulo AngularJS, llamars angular.module sin el
segundo parmetro. Por desgracia, hemos encontrado un comportamiento impredecible al colocar
accidentalmente un array vaco como el segundo parmetro, que sobreescribir la definicin del
mdulo y crear uno nuevo. Es fcil cometer este error cuando ests cansado.

2.4 Rutas bsicas y navegacin

Con los mdulos en su lugar, el siguiente paso es configurar la capacidad de navegar de una
caracterstica a otra. Comenzaremos con ngRoute, ya que es increblemente simple (aunque
limitado) para implementar dentro de una aplicacin.

NO QUIERES MANTENERLE SIMPLE? Slo cubrimos ngRoute en el libro, pero recomendamos

que busques en ui-router tambin, porque es un potente y completo router. Puede leerlo aqu:
https://github.com/angular-ui/ui-router.

Las rutas le permiten definir y enrutar un estado nico de la aplicacin basado en la URL actual.
Por ejemplo, si quisiramos vincular a un colega directamente a la seccin de usuarios de la
aplicacin, podramos enviarles un enlace como http://angelloinaction.com/#/users y esperar que
Angello pudiera enviar a nuestro colega a La parte de la solicitud....
Apndice A
Configurando Karma
Karma es un corredor de pruebas de JavaScript creado por el equipo de AngularJS. Es importante
tener en cuenta que no es un framework de pruebas. Le permite especificar informacin acerca
del entorno de prueba, como qu navegador(es) utilizar, qu archivos incluir, etc. A continuacin,
especifique qu framework de pruebas desea utilizar (Jasmine, en nuestro caso) y escriba sus
pruebas utilizando ese marco en particular.

Instale Node.js y Node Package Manager (npm)

Lo primero es lo primero. Si an no ha instalado Node.js, pare! Aqu hay un par de recursos para
hacer rodar la pelota:
https://nodejs.org/download/
Tienes suerte: Node.js viene con npm!

Instalar paquetes
Si tiene Node.js y npm, bienvenido! Primero, instale karma-cli globalmente para que tenga acceso
a l en cualquier directorio:

npminstallgkarmacli

A continuacin, asegrese de estar en el directorio de angello y, a continuacin, instale karma y

gurdelo como una dependencia de dev:

npminstallkarmasavedev

Ahora, instale sus complementos necesarios. Estos incluyen los complementos para su framework
de pruebas de eleccin, as como los navegadores que usted necesita para integrarse. En este
libro, utilizamos Jasmine como nuestro framework de pruebas y Chrome para nuestro navegador.
Apndice B
Configuracin de un servidor Node.js
Puede ejecutar Angello de dos maneras: con Firebase o Node.js. Le mostraremos cmo
instalar Node.js e integrarlo con Angello.

Instalar Node.js (con Node Package Manager, a.k.a. npm) y MongoDB

Si no tiene Node.js y npm, aqu hay algunos recursos para empezar:

Git (http://git-scm.com/)
Node.js (https://nodejs.org/download/)
Tienes suerte: Node.js viene con npm!

Para instalar MongoDB, vaya a http://docs.mongodb.org/manual/installation/ y siga las

instrucciones para su plataforma especfica.

cd<yourprojectsfolder>
gitclonehttps://github.com/angularjsinaction/angelloexpressapi
cdangelloexpressapi
npminstall
nodeserver.js

En pocas palabras, estos comandos descargan una copia del cdigo del servidor en el
directorio de proyectos, instalan todas las dependencias necesarias y ponen en marcha
un servidor que escucha en http://localhost: 4000.

NOTA El cdigo que se ejecuta en localhost: 4000 no es la aplicacin principal de

Angello; Es slo el API de back-end que proporciona persistencia de datos. Si desea
configurar localmente la aplicacin principal, consulte el apndice D.
Apndice C
Configuracin de un servidor Firebase
Angello viene con Firebase ya configurado. Sin embargo, le recomendamos
encarecidamente que configure su propia cuenta con Firebase para que pueda ver y
manipular todos sus datos.

Configurar una cuenta con Firebase

Vaya a https://www.firebase.com/ y haga clic en Iniciar Hacking. Una vez que te hayas registrado,
te llevarn a tu flamante tablero de instrumentos.

Crea tu primera aplicacin

En el lado izquierdo del panel de control, ver un formulario para crear nuevas
aplicaciones. Rellnalo con un nombre como mi-primer-angello (o algn otro nombre
descriptivo que te sorprenda). A continuacin, haga clic en Crear nueva aplicacin para
darle vida a su nueva aplicacin.

Bootstrap tu aplicacin de Firebase a Angello

Si todava no ha descargado el cdigo de Angello, dirjase al apndice D para
configurarlo.

Una vez que tenga el cdigo, vuelva a su navegador y vea la aplicacin creada. Haga clic
en la URL de Firebase proporcionada; Esto le llevar a la vista de su aplicacin. Copie la
URL completa en su barra de direcciones; A continuacin, abra EndpointConfigService.js,
busque el objeto PointMap final y actualice su propiedad URI en su URL de Firebase.
Asegrese de que hay una barra al final. En el mismo archivo, asegrese de que
.constant
('CURRENT_BACKEND', 'firebase') (lnea 3 a la fecha de esta escritura) es uncommented y
.constant ('CURRENT_BACKEND', 'node') (lnea dos como de este escrito) es comentado.
Inicie la aplicacin Angello, cree un usuario y una historia, y luego regrese a su URL de
Firebase y vea la magia que es informacin en tiempo real.
Apndice D
Ejecucin de la aplicacin
Ejecutar la aplicacin es un proceso sper simple. Para empezar, necesitar Git (http://git-
scm.com/) y, si no tiene un servidor web local, necesitar Node.js y npm
(https://nodejs.Org/download/).

Obtenga el cdigo
Una vez que haya instalado Git, vaya a su terminal y ejecute lo siguiente:

cd<yourprojectsfolder>
gitclonehttps://github.com/angularjsinaction/angello
cdAngello

Estos comandos descargarn todo el cdigo de la aplicacin de aplicaciones para usuario en la

carpeta de proyectos.

Iniciar el servidor
Si dispone de un servidor web local, utilice el directorio de cliente del proyecto. Si no lo hace,
ejecute los siguientes comandos en su terminal. Asegrese de haber instalado Node.js y npm y
que est en el directorio angello que acaba de clonar.

npminstallgserve
serveclient/

Estos comandos instalan el paquete de servicio en su sistema globalmente y luego sirven el

directorio de cliente de la aplicacin de Angello para su placer visual.

Ver la aplicacin
Ahora tiene una copia local de Angello ejecutndose en http://localhost:3000. Simplemente
navegue a esa URL en su navegador favorito y recibir una pgina de autenticacin donde puede
crear una cuenta y usar la aplicacin.