AngularJS express

Emilio Grande <emilio@jsjutsu.com>

ndice de contenido
1 Por qu un framework JavaScript?..................................................................................................5
2 Por qu AngularJS?..........................................................................................................................6
3 Comenzando la Aplicacin................................................................................................................7
4 Creando nuestra aplicacin desde abajo. Los Servicios..................................................................10
5 Sistema de rutas...............................................................................................................................12
6 Controladores..................................................................................................................................16
7 Directivas.........................................................................................................................................23
8 Filtros...............................................................................................................................................25
9 Testing.............................................................................................................................................27
10 Resumen........................................................................................................................................30

Introduccin. Cmo usar este libro.

En este libro aprenders los fundamentos de AngularJS de una manera directa, sin
rodeos ni explicaciones tericas. Hay mucha informacin comprimida en poco
espacio.
Si quieres empezar con AngularJS viendo cmo se hace una aplicacin completa,
directo al grano, este es tu libro.
Si buscas algo que te explique los entresijos de AngularJS en profundidad, aqu no lo vas
a encontrar. Este libro est pensado para ponerte en marcha con AngularJS en un tiempo
rcord.
NOTA: este libro est escrito para las versiones 1.x de AngularJS (las estables en este
momento, Marzo de 2015).
Sigues aqu? Perfecto entonces! Esto es lo que vamos a hacer:

En los dos primeros captulos te dar un par de pinceladas de por qu puede

resultarte til un framework JavaScript, y por qu AngularJS puede ser una buena
opcin.

En el tercer captulo montaremos la base para el proyecto que vamos a realizar y

veremos cmo introducir AngularJS.

En el cuarto empezaremos la aplicacin propiamente dicha, comenzando por la

capa de acceso a los datos.

En el quinto captulo introduciremos las rutas.

En el sexto captulo veremos los controladores.

En el sptimo captulo se vern los filtros, componentes con los que podremos
aislar cierta lgica de presentacin.

El el octavo captulo hablaremos de las directivas, un interesante concepto de

AngularJS para aislar piezas de cdigo.

Finalmente en el ltimo captulo se ver como hacer testing.

Algunos apuntes ms:

Para seguir este libro se presupone que sabes JavaScript, HTML y has hecho
algo de desarrollo web.

Para que puedas ver las cosas de primera mano sin picarte todo el cdigo (aunque
se aprende ms), tienes a tu disposicin este repositorio de Github. Cada
captulo est tageado, de forma que puedas ver lo que se hace de un paso a otro
sin problemas. En el tercer captulo te explicar como conseguir el cdigo.
Si eres nuevo con esto de los frameworks JavaScript, te recomiendo que vayas

viendo los pasos del repositorio y te lo tomes con calma.

Tendrs que tener instalado Node.js y Git, as como saber abrir una terminal.
Para instalar Node.js puedes usar este tutorial.

1 Por qu un framework JavaScript?

No s t, pero a m me gusta utilizar webs que vayan rpido y no me hagan esperar.
Esto, en los ltimos tiempos se ha conseguido en buena medida gracias al uso extensivo
de JavaScript con AJAX. Esto permite hacer peticiones de datos desde JavaScript al
servidor web, y que as el navegador no redibuje la pgina completa cada vez que se
necesiten datos.
Esto, llevado al extremo de que slo cargas la pgina por completo una vez se conoce
con las siglas SPA Single Page Application

Las SPA son el futuro presente

En las SPA la comunicacin con el servidor se realiza completamente mediante un API
REST. Disear las aplicaciones as presenta una gran ventaja: el poder usar el mismo
backend con mltiples tecnologas.
Ahora tenemos smartphones, tablets, smartwatches y vete tu a saber qu chismes
sacarn en el futuro. Todas estas plataformas pueden utilizar el mismo backend.
Una API N clientes, desarrollados cada uno con una tecnologa diferente.

Frameworks JavaScript
Alguna vez has hecho una aplicacin web y has metido JavaScript, (normalmente con
jQuery) para lograr esa interactividad y rapidez?
Si lo has hecho, y has tenido que seguir metiendo ms y ms JavaScript en tu aplicacin,
habrs notado que, o lo haces con cuidado, o se puede convertir en un horror de cdigo.
Esta situacin est cambiando poco a poco y ahora tenemos herramientas que nos
permiten organizara muy bien el cdigo de aplicaciones JavaScript.
Una de estas herramientas son los frameworks JavaScript. Nos permiten crear una Web
App con un patrn MVC o similar teniendo nuestro cdigo organizado.
Si quieres subirte al carro, aprender AngularJS te ayudar.
Vamos a ello!

Por qu AngularJS?

Hay muchos frameworks JavaScript. Tantos que es imposible conocerlos todos. Algunos
de los ms conocidos son Ember, Backbone (este es ms una biblioteca que un
framework), ExtJS, Dojo... y por supuesto AngularJS.

Por qu AngularJS?

Muy opinionado. Esto es bueno o malo segn se mire. Opinionado (mi traduccin
libre de opinionated :D ) es que tiene una manera muy marcada de hacer las
cosas. Tiene mucha magia pero pierdes flexibilidad. Si te gusta y se adapta a lo
que quieres hacer, perfecto. Si no, mejor que hagas las cosas de otra forma.
En general, por la experiencia que tengo AngularJS puede funcionar bien con
muchos tipos de proyectos, pero est pensado para aplicaciones que trabajan ms
con datos que con grficos. Es ideal para aplicaciones CRUD ( Create, retrieve,
update, delete) clsicas.

Comunidad. Es de los frameworks ms usados y tienes respuestas a montones en

StackOverflow. Si no te quieres romper la cabeza esto es fundamental.

Google. AngularJS lo lleva Google, y esto es algo que da cierta tranquilidad a ms

de uno (y que otros odian).

3 Comenzando la Aplicacin
Para el propsito de este minilibro vamos a hacer una aplicacin muya bsica de
personajes de Dragon Ball :D. Yo he partido de una aplicacin vaca creada con este
generador de Yeoman.
Si no conoces Yeoman, te invito a que le eches un vistazo. A m me encanta. Te monta un
proyecto bsico con un solo comando. Para hacer prototipos es de lo ms til.
La aplicacin que haremos quedar as:

Para comenzar, abre una terminal y clona el repositorio de Github.

gitclonehttps://github.com/er1x/dbzdb
Despus, tendrs que instalar las dependencias. Con Node.js es muy sencillo.
En primer lugar, instala los paquetes globales de Grunt y Bower. De la siguiente manera:
npminstallgruntclibowerg
Si tienes problemas con esos comandos es posible que tengas que ejecutarlos como
administrador.
Una vez listo esto, ejecuta:
cddbzdb

npminstall
bowerinstall
Si todo funciona como debiera, tendrs todo listo para trabajar. Para ejecutar un servidor
de pruebas escribe lo siguiente:
gruntserve

Ahora podrs ver la web entrando en tu navegador en http://localhost:9000

Todo bien? Seguimos pues.
Posicinate en el tag cap3.
gitcheckoutcap3
Ahora el cdigo corresponde a la aplicacin recin creada y con AngularJS instalado.
Lo que nos interesa a nosotros est en la carpeta app.

Como vers es una estructura normal y corriente. Un index.html y el resto de carpetas

para CSS, JavaScript, etc.
Veamos el contenido de index.html

En este index tenemos las siguientes cosas:

1. Hemos agregado el script de AngularJS.
2. Hemos agregado un atributo ng-app=dbzDb, en la etiqueta html. As es como
creamos una aplicacin de AngularJS.
3. Hemos agregado el script app.js, que ser el fichero JavaScript de nuestra
aplicacin.

Simple, no? Veamos qu contiene el fichero app.js.

Aqu hemos creado el mdulo principal de nuestra aplicacin AngularJS, con:

1. El nombre como primer parmetro de la funcin. Tiene que coincidir con el ngapp.
2. Las dependencias de nuestro mdulo como segundo parmetro. En este caso no
tenemos.
El sistema de mdulos de AngularJS es muy til. Nos permite utilizar mdulos de terceros
como dependencias. Tambin podemos crear nuestros propios mdulos y que sean
usados por otros mdulos AngularJS. As vamos construyendo nuestra aplicacin
separadamente.

Con esto ya hemos creado nuestra base para la aplicacin.

4 Creando nuestra aplicacin desde abajo. Los

Servicios.
En este captulo vamos a hablar de los servicios. Los servicios son mecanismos de
AngularJS que nos permiten aislar lgica de nuestra aplicacin y compartimentarla en
mdulos independientes.
En el caso de la aplicacin que estamos haciendo, utilizaremos los servicios para
recuperar la informacin de los personajes de Dragon Ball Z de la base de datos.
Para empezar, sitate en el tag cap4.
gitcheckoutcap4
Los cambios relevates en este tag son los siguientes:

Hemos creado un fichero JavaScript services.js

Lo hemos agregado al index.html

Hemos agregado las imgenes de nuestros personajes en una carpeta img.

Hemos agregado los datos en forma de un fichero data.json en una carpeta data.

En este caso nuestra base de datos ser un simple fichero, pero la mecnica es igual para
conectar a una API REST.
Veamos el contenido de nuestro fichero services.js.

Como ves, la forma de definir nuestros servicios es como un nuevo mdulo AngularJS
llamado dbzDb.services. La sintaxis es bastante fea en mi opinin, pero es as.

Dentro de este mdulo, creamos una factory. Una factory es un tipo de servicio.
AngularJS ofrece varios tipos de servicios: factory, service y provider. El ms sencillo es
la factora , que nos provee un simple objeto JavaScript y es que el que utilizaremos aqu.
Cuando lo utilicemos nos retornar un objeto como el que ves arriba. En este caso
nuestra factora nos devuelve un objeto que tiene un mtodo list, con el que listaremos
a nuestros personajes de Dragon Ball, provenientes de un fichero JSON que hace las
veces de base de datos.
Como la operacin list tiene que ir a buscar un fichero y devolver su contenido,
necesitamos algo que nos permita hacerlo. Para ello inyectamos la dependencia $http,
que nos permite realizar peticiones HTTP a recursos externos. Es el equivalente de
AngularJS al tradicional $.ajax de jQuery.
La sintaxis es siempre igual.
1. Declarar un mdulo, con sus dependencias entre los corchetes.
2. Declarar los componentes que nos provee este mdulo (servicio, factora,
controlador...). A su vez con sus dependencias.

Por ltimo, tenemos que indicar que nuestra aplicacin dbzDb va a depender de este
mdulo, por tanto lo indicaremos en el fichero app.js, de este modo.

Con esto tenemos todo lo que necesitamos para recuperar la informacin de la base de
datos, en este caso un simple fichero JSON.
Ms adelante veremos cmo utilizar este servicio. A continuacin veremos el sistema de
rutas, con el que crearemos diferentes vistas y haremos la navegacin entre ellas.

5 Sistema de rutas
La mayora de frameworks nos permiten definir rutas en la URL que se asocian a
diferentes vistas. AngularJS no es diferente.
En nuestra mini aplicacin de Dragon Ball vamos a tener las siguientes rutas.
/

el index, con un listado general de los personajes.

/:id una pgina de detalle para una personaje con determinado ID.

Sitate en el tag cap5 y vamos a ver lo que ha cambiado.

gitcheckoutcap5

Cambios:

Hemos agregado alguna info extra a nuestros datos en el JSON. Irrelevante para
este captulo.

Tenemos una carpeta nueva, partials. Contiene los HTML de las diferentes vistas
de nuestra aplicacin. Una para el listado y otra para el detalle de un personaje.

En el index.html hay novedades. Una barra de navegacin y una etiqueta main

con la directiva ng-view. Ms adelante veremos para qu.

En app.js hemos configurado nuestras rutas.

Hemos metido unos pequeos cambios en el CSS. Irrelevante.

Veamos con ms detalle qu hemos puesto en nuestro index.html:

Podis ver que ahora tenemos una pequea barra de navegacin en la etiqueta nav. Y lo
ms importante, hemos incluido un div con una directiva ng-view. Qu quiere decir
esto? Pues muy sencillo. Que las vistas que vayamos poniendo se irn cargando dentro
de este ng-view.
Por ltimo, para que las rutas funcionen, hay que agregar una dependencia nueva. sta
va en un fichero aparte de AngularJS, angular-route.js.

Ms cosillas. Las rutas las configuramos en el fichero app.js, que de momento presenta
este aspecto.

Aqu hemos sacado la aplicacin a una variable, dbzDb, y le hemos agregado la

dependencia ngRoute.
El resto se ve bastante bien: configuramos la aplicacin, ms concretamente el servicio
que nos proporciona las rutas, para que:

En caso de entrar a la direccin /, nos presente la vista de listado, que est en

partials/list.html

En caso de entrar a la direccin /{algn id}, nos ensear la vista

partials/detail.html.

Por ltimo, en caso de introducir una URL que no cuadre con ninguno de esos dos
patrones, nos redirigir a /.

De esta forma, ahora tenemos una pgina tal que as (ten en cuenta que todos las
imgenes y dems estn hardcodeados) :

La cosa va avanzando, verdad? Ahora slo tenemos que cargar los datos de nuestros
personajes del JSON y cambiar el HTML de acuerdo a los mismos. En los siguientes
captulos lo haremos.

6 Controladores
Los controladores de AngularJS se utilizan para manejar los datos que se van a mostrar
en las vistas. Se encarga, junto con el objeto $scope, de mantener los datos de la vista.
Se entiende mucho mejor con el ejemplo. En nuestra aplicacin vamos a crear dos
controladores. Uno para la lista y otro para el detalle.
Nos situamos en el tag cap6.
gitcheckoutcap6
Las novedades:

Hemos creado un fichero controllers.js, y lo hemos agregado al index. Los

controladores son el cdigo intermedio entre la vista (el HTML) y el modelo
(nuestro services.js). Los controladores hacen uso del servicio para obtener los
datos necesarios y se encargan de que estn disponibles para la vista.

Hemos relacionado las vistas con los controladores en el fichero app.js.

Hemos cambiado nuestros HTML para que trabajen con datos proporcionados por
los controladores.

Comenzamos viendo nuestro nuevo fichero de controladores:

Es un poco feo, pero servir para explicar lo bsico sobre controladores.

Veris la declaracin de un nuevo mdulo: dbzDb.controllers. Nada nuevo.

A partir de ah salen dos controllers. Uno para el listado, otro para el detalle.

El controlador de la lista (ListController), depende de $scope y DbzData.

DbzData es el servicio que creamos antes y que nos permite recuperar los datos
de los personajes.
$scope es un objeto muy especial. El $scope es el pegamento entre el controlador
y la vista. Cuando cambia algn atributo del $scope, en la vista se refleja este
cambio automticamente.
Explicado esto es muy sencillo entender qu hace el controlador. Simplemente
llama a la funcin list de nuestro servicio, y si tiene xito (success) guarda en el
$scope el nmero de filas que va a ensear, y los datos de los personajes.

El controlador de detalle (DetailController), tambin depende del scope y de

DbzData, pero adems depende de $routeParams, que es un servicio que nos
proporciona parmetros de la URL, en este caso el ID del personaje.

Este controlador llama una vez ms a la funcin de la lista, y en este caso

simplemente agrega al scope la informacin del personaje concreto.
En una API REST tpica se suene tener una funcin GET al recurso /{id} para
nicamente recoger la informacin concreta, pero por simplicidad nosotros solo
tenemos una de listado.

Ya sabemos cmo funcionan los controladores. Ahora veremos cmo se relacionan con
las vistas. Ello est en app.js.

La nica novedad de este fichero, es la nueva dependencia dbzDb.controllers y atributo

controller de cada una de las rutas, que indica el controlador apropiado para cada una.

Por ltimo. Cmo se usan los datos que nos proporciona $scope en las vistas? Muy
simple, con un pequeo lenguaje de plantillas.
Veamos la vista partials/list.html.

Qu cosas interesantes tenemos aqu? Recordad que en la vista de lista tenamos

asignados al scope los atributos rows (un array de enteros) y characters (un array de
objetos).

ng-repeat: esta pequea directiva nos permite repetir cdigo HTML tantas veces
como lo indique en un array. En este caso hemos puesto:
<divclass="row"ngrepeat="rowinrows">

</div>

Aqu queremos decir que repita la div tantas veces como longitud tenga el array
rows. En la prctica, aqu tendremos 3 divs con la class row.
Tenemos un segundo ng-repeat, anidado con el anterior, de la siguiente forma:
<div class="collg3" ngrepeat="char in characters.slice(row *
4,4+(row*4))">

</div>
Este es un poco ms raro, pero la mecnica es igual. Lo que queremos hacer es que nos
represente unos cuantos personajes en cada fila, en concreto 4 personajes por fila. Para
ello cogemos una porcin del array de personajes de acuerdo a la fila en la que estemos.
Por ejemplo, en la fila 0 cogemos los personajes de 0 a 3, en la fila 1 del 4 al 7 etc...
Pero lo importante de esto es que veas cmo dentro de los ng-... podemos usar

propiedades de $scope. Y con ello modificar lo que se muestra en la pgina.

Cada objeto char, ser un objeto correspondiente con el JSON de personaje, con todos
sus atributos. Por ello, dentro de la div, y entre llaves, podemos acceder a los datos del
personaje.
<divclass="cardpanelpanelprimary">
<divclass="panelheading">
<strong>{{char.nombre}}</strong>
</div>
<divclass="panelbody">
<ahref="/#/{{char.id}}">
<imgsrc="images/{{char.imagen}}">
</a>
</div>
</div>
El aspecto que nos deja este cdigo es el siguiente:

Mola eh? Pues con la vista de detalle es ms sencillo an.

partials/detail.html

Aqu simplemente usamos la doble llave para representar el contenido de character.

Ya tenemos nuestra aplicacin funcionando! Tan slo nos queda ver algunos detalles: las

directivas y los filtros. Y por supuesto el testing. Lo dejamos para los siguientes captulos.

Una nota ms:

No es necesario utilizar las rutas para poder usar controladores. Puedes hacer una
aplicacin AngularJS sencilla con tan slo un controlador (o los que quieras), y
hacer que maneje una porcin de tu aplicacin indicndolo en el HTML, as:
<divngcontroller=miControlador>
{{variable}}
</div>
Dentro de ese div, puedes utilizar variables del $scope dentro de tu controlador, y
estarn aisladas del resto de la aplicacin.

7 Directivas
Las directivas son una de las partes ms poderosas de AngularJS. Nos permiten crear
nuevos elementos HTML cargados de funcionalidad, totalmente independientes del resto
de la aplicacin.
Ya hemos usado directivas en varias ocasiones. Cada vez que ves en HTML ng-algo ests
utilizando una directiva. Hay directivas muy tiles proporcionadas por AngularJS, pero
podemos crear las nuestras propias.
Vamos a ver cmo crear una directiva.
gitcheckoutcap7
En este caso hemos creado una directiva para evitar repetir el cdigo del panel donde
aparece la imagen del personaje. Para ello:

Hemos agregado un fichero directives.js, lo hemos referenciado en el index y

tambin lo agregamos como dependencia en app.js. Nada nuevo.

Hemos creado una plantilla para el panel del personaje, en partials/charcard.html.

Finalmente, hemos sustituido toda la etiqueta div... del personaje por una nueva
etiqueta html <char-card></char-card>.

Veamos el cdigo de directives.js en detalle.

Como veis, hemos creado un nuevo mdulo para las directivas, y hemos creado una
directiva charCard, que podemos utilizar as:

La directiva retorna un objeto que puede tener varios atributos. Aqu tenemos:

restrict: indica si la directiva ser un elemento HTML (E), un atributo (A) o clase (C).

templateUrl: ruta hacia una plantilla HTML.

Existen otros atributos, como link, controller o scope, por si se quiere agregar un
controlador y un scope independientes... etc. Lo mejor es que si quieres crear directivas
ms completas consultes la referencia en https://docs.angularjs.org/guide/directive

Algunas directivas ya disponibles por defecto y muy tiles son:

ng-click: permite ejecutar una funcin definida en el scope al pulsar un elemento

HTML con este atributo. P ej:
<buttonngclick=accion()></button>

ng-if: renderiza HTML dependiendo de una condicin (un atributo del scope, por
ejemplo). P ej:
<divngif=mostrar></button>

ng-class: asigna una clase CSS al elemento que la contenga dependiendo de una
condicin. P ej:
<div ngclass={'miclase': condicion, 'miotraclase':
condicion2}></button>

ng-model: enlaza un atributo del scope con un input, un textarea etc. Cuando el
usuario modifique el valor, este se actualiza automticamente en el scope (y en los
sitios en que aparezca).
<inputngmodel=nombretype=text></input>

Aparte de estas y todas las dems directivas que proporciona AngularJS, existen multitud
de mdulos creados por terceros que nos proporcionan componentes HTML en forma de
directivas: http://ngmodules.org/

8 Filtros
El ltimo de los elementos de AngularJS que vamos a ver son los filtros. Los filtros se
usan para dar formato a valores. Por ejemplo, podemos tener un filtro al que le pasemos
una cadena y nos la devuelva en maysculas. Pueden usarse en vistas, controladores,
servicios...
En nuestra aplicacin vamos a hacer dos cosas:
1. Crear un filtro para que el powerlevel de los personajes se ponga en formato (1k,
2k, etc.).
2. Utilizar un filtro de AngularJS para poner los nombres de los personajes en
mayscula.
gitcheckoutcap8
Los cambios en este caso son:

Nuevo fichero filters.js, incluido en el index y como dependencia en app.js.

En los ficheros detail.html y char-card.html utilizamos los filtros, mediante el

smbolo |, de la forma valor | filtro.

Veamos el fichero filters.js en detalle:

Como veis, un filtro devuelve una funcin que transforma un valor de entrada.
Para su uso, en una vista, es tan simple como lo siguiente:

AngularJS tiene varios filtros predefinidos muy tiles, por ejemplo:

uppercase

orderBy

json

date

Con esto, ya hemos terminado de repasar los elementos bsicos de AngularJS!

El ltimo captulo lo dedicaremos al testing, viendo un ejemplo de cmo podemos
testear el servicio que creamos.

9 Testing
AngularJS pone un gran nfasis en el testing. Gracias a la tcnica de inyeccin de
dependencias, podemos aislar suficientemente cada parte de nuestra aplicacin para
que podamos realizar un testeo automatizado fcilmente. Si no has hecho nunca testing,
es probable que muchas de las palabras que utilice te suenen a chino.
Bsicamente el testing es escribir cdigo para probar nuestro cdigo. Esto es til, por
ejemplo, si otra persona va a modificar tu cdigo, para que pueda aadir cosas
asegurndose de que no se rompe nada.
En este captulo te mostrar las herramientas que necesitas para ponerte con el testing.

AngularJS est preparado para realizar tests unitarios y e2e ( end to end). En este captulo
realizamos una introduccin a los tests unitarios, que son los ms sencillos.
Para que el testeo sea ms ameno los chicos de AngularJS crearon Karma (anteriormente
conocido como testacular, y cuyo nombre cambiaron por razones obvias :P).
Karma es una herramienta que nos permite ejecutar nuestros test con varios
navegadores de forma automtica.
Para instalarlo:
npminstallkarmaclig
Para trabajar, Karma utiliza un fichero de configuracin, en el que hay que indicarle las
rutas de nuestros ficheros JavaScript, el framework de testing que vamos a usar,
formatos de reporte, navegadores...
En nuestro repositorio ya lo tenemos hecho, as que ponte en el tag cap9.
gitcheckoutcap9

Qu novedades tenemos aqu?

karma.conf.js: es el fichero de configuracin del que hemos hablado.

test/services.js: nuestros tests. En este caso slo incluyo un pequeo ejemplo,

para que veis la mecnica.

En el fichero karma.conf.js, las lneas ms relevantes son las siguientes:

Como ves, estn comentadas y son bastante autoexplicativas. Karma coge todos los JS
que se definen en files y los inyecta en el navegador que le digis. Si quieres que los test
se ejecuten sin abrir ninguna ventana, puedes utilizar PhantomJS como navegador, pero
si tienes que depurar algn test es ms til abrirlo con Firefox o Chrome y utilizar sus
herramientas de desarrollo.
El contenido de test/services.js es el siguiente:

Aqu estamos usando el framework de test Mocha. Podis usar cualquier otro, es
indiferente.

Bsicamente creamos bloques con la palabra describe y los test concretos dentro de it.
Esta sintaxis es propia de BDD, behaviour driven development. Desarrollo dirigido por
comportamientos. Primero describimos un componente y luego cosas que debera
hacer. Es casi como si escribiramos: el servicio Dbz debe llamar al backend y recuperar
una lista de personajes.
Lo importante aqu son las lneas de module, que instancia nuestro mdulo de servicios.
Est dentro de un beforeEach, que lo invoca antes de cualquier test.
Despus, dentro del it, utilizamos la funcin inject para inyectar las dependencias que
vamos a testear, en este caso DbzData. Adems inyectamos $httpBackend, que sirve
para interceptar llamadas a un backend y retornar lo que queramos.
Estas funciones, inject y $httpBackend, estn definidas dentro del fichero angularmocks.js, que hemos incluido para hacer los test.

De la misma manera, podemos testear otros cdigos en forma de mdulos aislados,

inyectndolos con inject y utilizando las funciones de comprobacin del framework de
testing que estis usando. Yo por ejemplo, utilizo Mocha (framework de test), Chai
(funciones para hacer comprobaciones).

Y, finalmente, para ejecutar los test hacemos lo siguiente:

Con esto ya sabes cmo empezar con el testing en AngularJS.

10 Resumen
Esto son los conceptos fundamentales que hemos visto:

Hoy en da usamos cada vez ms y ms JavaScript en las aplicaciones web.

Los frameworks JavaScript nos ayudan a organizar el cdigo de nuestras

aplicaciones.

AngularJS es un framework JavaScript fullstack. Facilita mucho las cosas a

costa de unas restricciones muy fuertes.

Una aplicacin AngularJS es un mdulo que depende de otros mdulos.

Los servicios son mdulos que se encargan de la lgica de negocio.

Las vistas son cdigo HTML que presenta informacin al usuario.

Los controladores son el pegamento entre la lgica de negocio y las vistas.

Las directivas son elementos componentes HTML independientes.

Los filtros permiten modificar o formatear valores.

En AngularJS podemos testear fcilmente gracias al diseo modular.

Y con esto hemos acabado el mini-curso de AngularJS! Espero que te haya resultado til.
Recuerda que en JSjutsu podrs encontrar ms material til sobre web y JS.
Nos vemos en el blog!

---Emilio Grande <emilio@jsjutsu.com>