Angular

Angular
2.1 Primera aplicacin

Ahora vamos a poner en marcha la primera aplicacin en Angular. Para ver que
funciona lo que haremos simplemente es darle valor a una variable en JavaScript y
mostrar dicho valor en la pgina HTML. Vers que hay algunas cosas que poner
inicialmente pero al ser la primera aplicacin no quedarn totalmente claras ahora
mismo. No te preocupes, es la primera aplicacin y a lo largo del curso quedarn
totalmente claras ya que dedicaremos temas completos a cada parte.
El ejemplo consta de dos ficheros:
index.html
script.js
?
index.html
1
2
3 <!DOCTYPE html>
4 <html ng-app="app">
5
<head>
6 <script
7 src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"
8 ></script>
9 <script src="script.js"></script>
1 </head>
0
<body ng-controller="PruebaController">
1 <h1>{{mensaje}}</h1>
1 </body>
1
2 </html>
1
3
Lnea 2: La primera cosa que nos encontramos es un atributo desconocido

llamado ng-app. Este nuevo atributo se llama en angular una directiva y
durante todo el curso veremos muchas directivas que existen en angular. El valor
de la directiva (o el valor del atributo) es app. El valor que le demos es
indiferente ya que simplemente hace referencia al nombre de nuestra aplicacin.
Realmente no hace referencia al nombre de la aplicacin sino al mdulo
principal de nuestra aplicacin. Pero ya veremos ms adelante que es un
mdulo.
Lnea 5:Carga la librera de angular. La hemos cargado directamente desde los
servidores de google pero no hay problema en descargarla y tenerla en nuestro
propio proyecto.
Lnea 9 incluye la directiva de angular ng-controller. Esta directiva tiene el
valor de PruebaController. Este es el nombre de una funcin JavaScript que
deberemos crear. Con sto le decimos a angular que ejecute la funcin
PruebaController cuando se muestre el html. A esa funcin en angular la
llamamos controlador, y por ello el mtodo de llama PruebaController.
Durante todo el curso a las funciones JavaScript que sean controladores las
llamaremos con el sufijo Controller.
Lnea 10: Tenemos dentro del tag <h1> el valor {{ mensaje }}. Esta es
realmente la parte interesante del ejemplo. Lo que estamos diciendo aqu es que
se muestre el valor de la variable de JavaScript mensaje dentro del tag <h1>.
Mirad lo sencillo que es ahora mostrar informacin desde JavaScript en HTML.
Slo tenemos que incluir entre llaves {{ }} el nombre de nuestra variable.
Realmente no es tan bonito como cualquier variable de JS sino slo los valores
que estn dentro de una variable especial de angular. Ahora mismo explicamos
sto al ver el JavaScript.
?
script.js
1var app=angular.module("app",[]);
2
3function PruebaController($scope) {
4 $scope.mensaje="Hola Mundo";
5}
Lnea 1: Llamamos al mtodo angular.module. Este mtodo nos permite crear

mdulos en angular 1) y el nuevo mdulo se asigna a la variable app que por
ahora no vamos a usarlo. El nombre de nuestro mdulo es app. Este nombre
debe ser el mismo que el que pusimos en el atributo ng-app en el index.html.
Como segundo parmetro le estamos pasando un array vacio. Por ahora recuerda
que es obligatorio pasar el array al crear un nuevo mdulo.
Lnea 3: Es la funcin con el controlador de Angular. Lo raro es que le pasamos
un argumento llamado $scope. Lo primero es que no debe confundirnos el signo
del dolar $. Angular usa mucho el dolar $ para indicar que son cosas propias
suyas pero realmente a nivel de JavaScript es simplemente una carcter ms de
la propia variable.
Lnea 4: Aadimos una propiedad llamada mensaje al $scope con el valor
Hola Mundo. Fjate que mensaje es el nombre de la variable que se muestra
en el HTML
En todas las aplicaciones que he hecho siempre he llamado al mdulo principal app,
nunca le llamo realmente tienda o banco o lo que sea. El por qu de ello es que creo
que realmente no aporta nada poner un nombre descriptivo y tener siempre en toda la
aplicacin disponible una variable llamada app con el mdulo principal de la aplicacin
me resulta muy til.
Recuerda que al crear el mdulo hay que aadir un segundo parmetro con un array
vacio:
?
Si no lo haces as angular dar un error diciendo que no existe el mdulo app.En el
tema de mdulos explicaremos por qu es necesario el array.
$scope
Pasemos ahora a explicar con un poco ms de detalle qu es el $scope ya que es de las
cosas ms importantes de Angular.
El $scope es LA VARIABLE de Angular donde debemos guardar toda la informacin

de JavaScript de nuestra pgina. Ya no vamos a crear nuevas variable de la forma:
?
1var i=5;
sino que ahora deberemos hacer siempre:
?
1$scope.i=5;
Por qu hacer sto? Porque angular slo muestra la informacin en el HTML mediante
{{ }} de aquellas propiedades del $scope y no de cualquier variable de JavaScript.
Podemos seguir creando variable con var pero no las podremos mostrar en el HTML si
no estn en el $scope 2).
Ahora podramos preguntarnos el porqu de esa limitacin de obligarnos a usar el

$scope. El motivo es porque angular hace magia con el $scope. Lo impresionante es
que si posteriormente hacemos alguna modificacin en el $scope, angular la detectar y
volver a modificar el HTML automticamente 3).As que angular est monitorizando el
$scope para ver si cambia algo y de esa forma actualizar el HTML. Pero lo que no
podra es monitorizar todas las variables de JavaScript , as que si queremos que se
enlacen el mundo de javaScript y el de HTML deremos usar el $scope.
Si no acabas de entender el $scope, no te preocupes, seguiremos hablando de l a lo

largo de curso. En mi opinin es de las cosas que ms cuestan de ver, aunque no sea de
las mas difciles.
databinding
El Data-binding es el concepto mas importante de angular y lo que hace es relacionar el
HTML con nuestro modelo de datos. Es lo que acabamos de ver de poner las {{ }} en
el HTML y que se transforme con los datos del JavaScript
La generacin del HTML se produce una nica vez 4) al generar la pgina

Modelo: Son las variables JavaScript con las informacin (modelo) que
queremos mostrar en la pgina HTML
Plantilla: es la pgina HTML que escribimos nosotros. Se llama plantilla ya que
lo que escribimos no es realmente lo que se muestra ya que no queremos mostrar
por ejemplo las llaves {{ }}
HTML : El el resultado de modificar la plantilla con los datos del modelo. Es lo
que finalmente ve el usuario.
Qu hace Angular? Une la informacin del modelo y de la plantilla para generar el

HTML que ve finalmente el usuario. Este concepto es similar a cualquier modelo de
plantillas como pueda ser JSP o ASP. Lo importante por ahora es que este enlace se
hace una sola vez 5) al cargar la pgina.
En los siguientes temas seguiremos viendo ms caractersticas del Data-binding de

AngularJS
Eventos
Hemos visto cmo indicando un mensaje en el $scope podemos mostrarlo fcilmente
en el HTML mediante {{ }}. Pero la gracia de angular es que si modificamos el
mensaje se actualiza automticamente el HTML. Para poder cambiar el mensaje
debemos incluir una nueva directiva 1) llamada ng-click que permite ejecutar una
funcin JavaScript al pulsar sobre un elemento HTML.
El ejemplo ahora quedara as:
index.html
2
<!DOCTYPE html>
3
<html ng-app="app">
4
5
<head>
6 <script
></script>
9 </head>
1
0
<body ng-controller="PruebaController">
1
<h1>{{mensaje}}</h1>
1
<button ng-click="cambiarMensaje()">Cambio</button>
1
2 </body>
1
3 </html>
1
4
Lnea 11: Est la nueva directiva ng-click que permite especificar una funcin
JavaScript que se ejecutar al pulsar sobre el elemento. El mtodo a ejecutar es
cambiarMensaje().
Desgraciadamente el mtodo no puede ser una simple funcin JavaScript llamada

cambiarMensaje. Al igual que ocurre con las variables que deben estar en el $Scope, la
funcin cambiarMensaje tambien deber ser una funcin definida en el $scope.
?
script.js
1
var app=angular.module("app",[]);
2
3 function PruebaController($scope) {
6 $scope.cambiarMensaje=function() {
7 $scope.mensaje="Adios mundo cruel :-)";
}
8
9
}
10
Lineas 6-8: Vemos cmo hemos definido una nueva propiedad llamada
cambiarMensaje cuyo valor es una funcin annima en JavaScript y que no tiene
parmetros. El cuerpo de la funcin es simplemente cambiar el texto de la propiedad
mensaje al nuevo valor Adios mundo cruel .
Puede parecer un poco extrao la forma de definir una funcin en el $scope pero lo que
hacemos es crear la funcin , sin nombre, y luego se la asignamos a la propiedad
cambiarMensaje. De esa forma la propiedad cambiarMensaje realmente es una funcin y
podra se llamada de la siguiente forma:
1$scope.cambiarMensaje();
Si lo pulsamos veremos que en la pgina HTML ha cambiado el texto al nuevo valor.
sto, que parece una cosa de poca importancia, es una de las cosas ms fascinantes de
AngularJS. Antes de AngularJS si cambibamos el valor de una variable en JavaScript debamos
llamar explicitamente a alguna funcin creada por nosotros que actualizara el HTML y rezar
para que no se nos olvidara llamarlo ya que sino el HTML no se actualizara. Ahora con
AngularJs podemos olvidarnos de ello. Siempre que cambiamos el valor de una variable 2)
AngularJS automticamente actualiza el HTML. La de lneas de cdigo y dolores de cabeza que
nos vamos a ahorrar con sto.
databinding
Seguimos con el Data-binding y vemos ahora que al modificar el modelo
automticamente se regenera el HTML.
La generacin del HTML se produce tambin cada vez que cambia el modelo
Qu hace Angular? Como ya vimos en el tema anterior, angular genera el HTML a

partir del modelo y la plantilla , pero si se modifica el modelo , AngularJS
automticamente vuelve a regenerar el HTML. Esto es algo que con JSP o ASP implica
un refresco de pgina con todos los problemas que lleva implcitos. Con angular es
simplemente cambiar un valor en JavaScript: $scope.mensaje=Adios mundo cruel
;
En el siguiente tema seguiremos viendo la ltima caractersticas del Data-binding de

AngularJS
Otros eventos
Al igual que ng-click existen otras directivas de tratamiento de eventos:
ng-dblclick:Cuando se produce el evento doble click.

ng-blur:Cuando se produce el evento blug.
ng-change:Cuando se cambia el tag <input> o select> pero no cuando se cambia a
consecuencias del propio modelo.
ng-cut:Cuando se produce el evento cut.
Eventos de teclado
ng-keydown:Cuando se produce el evento keydown.

ng-keyup:Cuando se produce el evento keyup.
ng-keypress:Cuando se produce el evento keypress.
Eventos de ratn
ng-mousedown:Cuando se produce el evento mousedown

ng-mouseenter:Cuando se produce el evento mouseenter
ng-mouseleave:Cuando se produce el evento mouseleave
ng-mousemove:Cuando se produce el evento mousemove
ng-mouseover:Cuando se produce el evento mouseover
ng-mouseup:Cuando se produce el evento mouseup
Si lo nico que quieres es comprobar como cambia el valor de una propiedad del $scope ,
siempre que puedas no utilices ninguno de los eventos anteriores , para comprobar si cambia
el valor de una propiedad del $scope est la funcin $watch
Ejemplo
2.3 Entrada de datos
Por ahora hemos visto cmo generar informacin desde JavaScript y mostrarla en la
pgina HTML. En este tema vamos a ver cmo usando el tag <input> podemos pasar la
informacin desde el HTML a las variables de JavaScript. Es decir, vamos a modificar
la variable mensaje del $scope desde la propia pgina HTML mediante el tat <input>.
El ejemplo ahora quedara as:
index.html
3
<!DOCTYPE html>
4
<html ng-app="app">
5
6
<head>
7
<script
></script>
9
<script src="script.js"></script>
1 </head>
0
1
1 <body ng-controller="PruebaController">
<h1>{{mensaje}}</h1>
1
2 <button ng-click="cambiarMensaje()">Cambio</button>
1 <br>
3 Mensaje:<input ng-model="mensaje" >
1
4
</body>
1
5
</html>
1
6
1
7
Linea 13: Lo nico que hemos aadido es un <input> pero con la directiva de angular
ng-model. Esta directiva indica qu variable del $scope est asociado a este
<input>. Si ejecutas el ejemplo vers cmo al escribir texto en el <input>
automticamente se modifica el texto del ttulo <h1> en la pgina HTML. Tambin
prueba a pulsar en el botn Cambia y mira lo que ocurre.
script.js
1
2
3 function PruebaController($scope) {
6 $scope.cambiarMensaje=function() {
7 $scope.mensaje="Adios mundo cruel :-)";
}
8
9
}
10
El fichero script.js no lo hemos modificado nada.
databinding
Seguimos con el Data-binding y vemos ahora que al escribir el usuario en el <input> se
modifica el modelo (la variable JavaScript), lo que hace que se vuelva a regenerar el
HTML.
La modificacin del HTML en el <input> modifica el modelo, lo que a su vez

regenera otra vez el HTML
Ahora es cuando podemos decir que el sistema de Data-binding y plantillas de
AngularJS no se genera una vez sino que constantemente se est regenerando en cuanto
cambia alguna parte del modelo o del HTML. sta es una diferencia muy importante
respecto a otros motores de plantillas. Ya no es necesario que nosotros hagamos nada
para sincronizar el HTML y el modelo. Angular lo hace todo por nosotros!!!! Se acab
el programa en el que una parte de la pantalla no estaba actualizada porque se nos haba
olvidado decir que se refrescara esa parte con los nuevos datos.
Es decir que el Data-binding funciona en ambas direcciones.
Modelo > HTML

HTML > Modelo
Y lo mejor de todo es que no cuesta nada hacer las modificaciones en nuestro modelo de
JavaScript. Es tan sencillo como modificar una variable de JavaScript y el HTML se
actualiza.La de tiempo de manejar el DOM que vas a ahorrarte!
El precio
Por ahora son todo ventajas pero como todo en la vida todo tiene un precio. Cul es el
precio por sincronizar automticamente el modelo y el HTML?
Antes de responder a la pregunta hay que ver cmo hace AngularJS esta sincronizacin.
Lo que hace angular es antes de cualquier evento en angular (por ejemplo un ng-click)
guardarse el estado del $scope y cuando acaba el evento comprueba que se ha
modificado del $scope respecto a su copia original. De esa forma sabe que tiene que
actualizar.
Pero so tiene 2 inconvenientes, que son el precio a pagar:

Rendimiento: AngularJS tiene problemas de rendimiento y en ciertos caso son tablas
excesivamente largas. so suele darse en el tpico scroll sin fin en el que vamos
aadiendo datos a la pgina.
Eventos externos a AngularJS: Si se produce un evento fuera de Angular, l no se
enterar y no se actualizar nada. so nos obliga a que todo lo que ocurra en AngularJS
tiene que pasar por l. El problema es que algunas cosas de jQuery dejarn de
funcionar a no ser que le digamos a AngularJS que ha ocurrido algo.
Para ambos problemas realmente hay solucin. Lo nico es que cuando tengamos que
resolverlos se perder parte de la sencillez de AngularJS , pero como se deca antes:
Nadie da duros 1) a 4 pesetas.
Para los problemas de rendimiento podemos ver una posible solucin en : Optimizing
AngularJS: 1200ms to 35ms y para los problemas de jQuery veremos durante el curso
los trucos a usar.
2.4 Formulario
Ahora que ya tenemos un conocimiento inicial de angular , ya podemos empezar a hacer
un ejemplo un poco ms real.El objetivo de este tema es crear un formulario (AngularJS
tiene muchas ms funcionalidades relativas a formularios que veremos ms adelante)
que permita la entrada de datos de un hipottico seguro mdico.
Modelo
Ya hemos visto la importancia del modelo de datos para AngularJS as que vamos a
definir nuestro modelo del ejemplo del seguro mdico:
?
index.html
<!DOCTYPE html>
2 <head>
3 <script
></script>
6 </head>
7 <body ng-controller="SeguroController">
8 <form>
<fieldset>
9
<legend>Seguro Mdico</legend>
1 <label for="nif">NIF:</label><input id="nif" name="nif"
0 type="text" ng-model="seguro.nif" /><br>
<label for="nombre">Nombre:</label><input id="nombre"
1 name="nombre" type="text" ng-model="seguro.nombre" /><br>
1 <label for="ape1">1 Apellido:</label><input id="ape1"
1 name="ape1" type="text" ng-model="seguro.ape1" /><br>
2 <label for="edad">Edad:</label><input id="edad" name="edad"
type="text" ng-model="seguro.edad" /><br>
1 <label for="sexo">Sexo:</label><select id="sexo" name="sexo"
3 type="checkbox" ng-model="seguro.sexo" ><option value="">--Elige
1 opcion--</option><option value="H">Hombre</option><option
4 value="M">Mujer</option></select><br>
1 <label for="casado">Casado:</label><input id="casado"
name="casado" type="checkbox" ng-model="seguro.casado" /><br>
5 <label for="numHijos">N Hijos:</label><input id="numHijos"
1 name="numHijos" type="text" ng-model="seguro.numHijos" /><br>
6 <label for="embarazada">Embarazada:</label><input
1 id="embarazada" name="embarazada" type="checkbox" ng-
model="seguro.embarazada" /><br>
7 <label for="fechaCreacion">Fecha de
1 creación:</label><input id="fechaCreacion" name="fechaCreacion"
8 type="text" ng-model="seguro.fechaCreacion" /><br>
1 </fieldset>
9 <fieldset>
<legend>Coberturas</legend>
2 <label for="oftalmologia">Oftalmologia:</label><input
0 id="oftalmologia" name="oftalmologia" type="checkbox" ng-
2 model="seguro.coberturas.oftalmologia" /><br>
1 <label for="dental">Dental:</label><input id="dental"
2 name="dental" type="checkbox" ng-model="seguro.coberturas.dental"
/><br>
2 <label for="fecundacionInVitro">Fecundacion In
2 Vitro:</label><input id="fecundacionInVitro" name="fecundacionInVitro"
3 type="checkbox" ng-model="seguro.coberturas.fecundacionInVitro" /><br>
2 </fieldset>
<fieldset>
4 <legend>Enfermedades</legend>
2 <label for="corazon">Corazon:</label><input id="corazon"
5 name="corazon" type="checkbox" ng-model="seguro.enfermedades.corazon"
2 /><br>
6 <label for="estomacal">Estomacal:</label><input
id="estomacal" name="estomacal" type="checkbox" ng-
2 model="seguro.enfermedades.estomacal" /><br>
7 <label for="rinyones">Riñones:</label><input
2 id="rinyones" name="rinyones" type="checkbox" ng-
8 model="seguro.enfermedades.rinyones" /><br>
<label for="alergia">Alergia:</label><input id="alergia"
2 name="alergia" type="checkbox" ng-model="seguro.enfermedades.alergia"
9 /><br>
3 <label for="nombreAlergia">Nombre de la
0 alergia:</label><input id="nombreAlergia" name="nombreAlergia"
3 type="text" ng-model="seguro.enfermedades.nombreAlergia" /><br>
</fieldset>
1 </form>
3 </body>
2 </html>
3
3
3
4
3
5
3
6
3
7
Lnea 15: Se puede ver cmo hemos usado el tag <select> en vez de un
<input>. AngularJS reconoce perfectamente el tag <select> y no hay que
hacer nada especial con l 1). Lo que aparece en el atributo value de los tag
<option> es lo que se guardar como valor en JavaScript. En este caso los
valores son H y M.
Lnea 16: Al igual que con el <option> ahora hacemos uso de un tag <input>
del tipo checkbox. Si lo marcamos en JavaScript se guardar un true y si lo
desmarcamos se guardar un false. Es decir, que no hace falta hacer nada
especial para usar un booleano.
* Lnea 19: Vemos cmo la fecha se muestra en formato ingls. Este problema ya lo
arreglaremos ms adelante ya que el tratamiento de fechas no es sencillo.
?
script.js
1
2
3 var app=angular.module("app",[]);
4
5 function SeguroController($scope) {
6 $scope.seguro={
7 nif:"",
nombre:"",
8 ape1:"",
9 edad:undefined,
10 sexo:"",
11 casado:false,
numHijos:undefined,
12 embarazada:false,
13 coberturas: {
14 oftalmologia:false,
15 dental:false,
16 fecundacionInVitro:false
},
17 enfermedades:{
18 corazon:false,
19 estomacal:false,
20 rinyones:false,
alergia:false,
21 nombreAlergia:""
22 },
23 fechaCreacion:new Date()
24 }
25}
26
27
Lnea 4: Lo ms importante aqu es que todas las propiedades de nuestro modelo
no estn en el $scope sino que creamos un nuevo objeto con las propiedades de
nuestro modelo y ste se asigna al $scope.
Lneas 13 y 18: Vemos cmo hemos creado otros objetos dentro del objeto
principal. sto es algo normal en cualquier lenguaje para poder organizar las
propiedades de nuestro modelo. As ,por ejemplo, para acceder a propiedad
alergia tendrs que escribir:
?
1$scope.seguro.enfermedades.alergia
En AngularJS hay un dicho que dice: Si el valor de tu directiva ng-model no incluye
un punto es que est mal.
Qu quiere decir so? Que nunca pongas propiedades con valores directamente en el
$scope sino que crees un objeto con las propiedades que necesites y asignes dicho
objeto al $scope
Por qu necesitamos hacer so? El motivo es que Angular en ciertas directivas crear
nuevos scopes que heredarn de tu $scope y si pones las propiedades directamente en el
$scope fallarn en ciertos casos y te costar descubrir qu ha pasado.
En el ejemplo anterior todos las propiedades de la directiva ng-model empiezan por

seguro. , es decir, que siempre llevan un punto, por lo que es correcto.
Lo que estara mal sera haber hecho:
?
1$scope.nif="";
En ese caso la directiva ng-model tiene el valor nif, es decir que NO tendra punto,
por lo que sera incorrecta.
2.5 Directiva ng-disabled
La directiva ng-disabled nos permite habilitar o deshabilitar un elemento de entrada
de datos como un <input> un <select> o un <button>.
Lo importante de la directiva es que habilita o deshabilita el elemento en funcin de

cualquier valor del $scope y por lo tanto de nuestro modelo.
En nuestro ejemplo del seguro mdico tenemos el campo Nombre de la alergia. Este
campo slo tiene sentido que est habilitado cuando el usuario ha marcado que tiene
alguna alergia, as que vamos a hacer que slo est habilitado el <input> del nombre de
la alergia cuando el valor $scope.seguro.enfermedades.alergia valga true. Es decir
que si marcamos que tenemos alergia , entonces se habilitar el nombre de la alergia y si
no marcamos que tenemos alergia se deshabilitar el campo del nombre de la alergia.
index.html
1 <!DOCTYPE html>
3 <head>
4 <script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"
5 ></script>
</head>
7
<body ng-controller="SeguroController">
8
<form>
9
<fieldset>
1
0
<label for="nif">NIF:</label><input id="nif" name="nif"
1
name="ape1" type="text" ng-model="seguro.ape1" /><br>
1
1
type="checkbox" ng-model="seguro.sexo" ><option value="">--Elige
1 <label for="casado">Casado:</label><input id="casado"
6 name="casado" type="checkbox" ng-model="seguro.casado" /><br>
<label for="numHijos">N Hijos:</label><input id="numHijos"

1
name="numHijos" type="text" ng-model="seguro.numHijos" /><br>
7
<label for="embarazada">Embarazada:</label><input
8 model="seguro.embarazada" /><br>
creación:</label><input id="fechaCreacion" name="fechaCreacion"
9
type="text" ng-model="seguro.fechaCreacion" /><br>
2 </fieldset>
0
<fieldset>
2
1
<label for="oftalmologia">Oftalmologia:</label><input

/><br>
2
<label for="fecundacionInVitro">Fecundacion In
4 Vitro:</label><input id="fecundacionInVitro" name="fecundacionInVitro"
type="checkbox" ng-model="seguro.coberturas.fecundacionInVitro" /><br>
2
5 </fieldset>
2 <fieldset>
/><br>
2
<label for="estomacal">Estomacal:</label><input
8
id="estomacal" name="estomacal" type="checkbox" ng-
id="rinyones" name="rinyones" type="checkbox" ng-
0
<label for="alergia">Alergia:</label><input id="alergia"
1 /><br>
<label for="nombreAlergia">Nombre de la
3
alergia:</label><input ng-
2 disabled="seguro.enfermedades.alergia===false" id="nombreAlergia"
3 name="nombreAlergia" type="text" ng-

model="seguro.enfermedades.nombreAlergia" /><br>
3
</fieldset>
</form>
3 </body>
4 </html>
3
5
3
6
3
7
Lnea 33: Se puede ver que hemos incluido la directiva ng-disabled. Su valor es la
expresin en JavaScript seguro.enfermedades.alergia===false. En caso de
que la anterior expresin sea verdadera se deshabilitar el <input>.
script.js
$scope.seguro={
4
nif:"",
5
nombre:"",
6
ape1:"",
7
edad:undefined,
8 sexo:"",
9 casado:false,
10 numHijos:undefined,
12 coberturas: {
oftalmologia:false,
13
dental:false,
14
fecundacionInVitro:false
15
},
16
enfermedades:{
17 corazon:false,
18 estomacal:false,
19 rinyones:false,
20 alergia:false,
21 nombreAlergia:""
},
22
fechaCreacion:new Date()
23
}
24
}
25
26
27
El fichero script.js no se ha modificado desde el ejemplo anterior.
Expresin de la directiva
Hemos visto en el ejemplo anterior que en ng-disabled se ha usado la expresin
seguro.enfermedades.alergia===false. Pero, qu se puede poner realmente como
valor del atributo?. La respuesta sencilla es que se puede poner cualquier expresin
JavaScript pero se evaluar referida al $scope. La respuesta un poco ms complicada es
que realmente no es JavaScript sino un subconjunto de l. Es AngularJS el que se
encarga de interpretar las expresiones por lo que no podremos usar cualquier expresin
de JavaScript sino slo aquello que haya implementado AngularJS en su interprete de
las expresiones.
Alguno de los motivos por el que AngularJS ha creado su propio interprete de expresiones es:
Hacer que siempre sean referidas al $scope

Evitar problemas de seguridad al no permitir toda la potencia de JavaScript
Ejemplos de expresiones usando nuestro modelo podran ser:
1seguro.edad>15
1seguro.nif===null || seguro.nif===""
1seguro.nombre==="Carlos"
1seguro.sexo==="H" && sexo.embarazada===true

Llamando a Funciones
Tambin podemos llamar a funciones si creamos dicha funcin en el $scope.
Por ejemplo si definimos la siguiente funcin:
1$scope.disabledNombreAlergia=function() {
2 return ($scope.seguro.enfermedades.alergia===false)
3}
podremos llamar a la funcin desde la directiva, quedando de la siguiente forma:
?
<input ng-disabled="disabledNombreAlergia()" id="nombreAlergia"
1name="nombreAlergia" type="text" ng-
model="seguro.enfermedades.nombreAlergia" />
Ahora desde la directiva llamamos a la funcin disabledNombreAlergia() pero slo

porque dicha funcin est definida en el $scope.
Funciones con parmetros
Otra posibilidad es que a la funcin se le pueden pasar parmetros, tanto literales como
valores del $Scope o incluso el resultado de otras funciones. Todo sto recordad que se
evalua referido siempre al $scope.
Un ejemplo un poco rebuscado para ver so es el siguiente:
1 $scope.suma=function(a,b) {
return a+b;
2
}
3
4
$scope.isNegativo=function(c) {
5
if (c<0) {
6
return true;
7
} else {
8 return false;
9 }
10}
11
Hemos definido la funcin suma que acepta dos parmetros y la funcin isNegativo
que acepta uno.
?
<input ng-disabled="isNegativo(suma(seguro.edad,10))"
1id="nombreAlergia" name="nombreAlergia" type="text" ng-
model="seguro.enfermedades.nombreAlergia" />
Ahora vemos cmo desde la directiva se llama a la funcin isNegativo pasndole

como argumento el resultado de llamar a la funcin suma. A la funcin suma se le pasan
2 argumentos, uno es el valor del propio $scope correspondiente a seguro.edad y el
otro es el valor 10.
Ahora si ponemos una edad negativa se deshabilita el campo nombreAlergia.

Obviamente esto no es de ninguna utilidad pero sirve de ejemplo de como llamar a
funciones con argumentos.
Una referencia completa de que se puede poner como expresin la tenemos en

angular_expressions_cheatsheet.pdf
Reglas de negocio del Interfaz de usuario

Una cosa que se debe remarcar es la posibilidad de crear fcilmente reglas de negocio
relativas al funcionamiento del interfaz de usuario.
En nuestro ejemplo hemos definido la siguiente regla de negocio relativa al interfaz de

usuario:
Si el campo alergia est desactivado, el campo nombre de la alergia debe

deshabilitarse
Antes de AngularJS 1) debamos comprobar todas las veces que cambibamos el valor
de alergia yacordarnos de ejecutar la regla que deshabilitaba el campo nombre de la
alergia. sto resultaba un problema ya que era fcil que olvidramos ejecutar dicha
reglas.
Aunque pueda parecer sencillo, el tema se complicaba mucho al haber muchas reglas y
muchos valores que disparaban esa reglas. Estas reglas suelen ser del tipo:
SI Se modifica el valor X1 o X2,Xn ENTONCES Hacer la accin sobre Y
El problema era que las reglas se deban programar tras el cdigo que modifica X1 y
tras el cdigo que modifica X2 y tras el cdigo que modifica Xn y si cada uno de
ellos se modifica en varios sitios, hacerlo en cada uno de ellos, cuando lo realmente
cmodo sera poner la regla una nica vez y que se llamara automticamente cuando
hiciera falta.
Gracia a AngularJS ahora slo es necesario poner la regla una nica vez y ya se llamar
cada vez que se modifique alguno de los valores de los que depende. so simplifica
significativamente nuestro cdigo ya que ahora slo ponemos la regla una nica vez
independientemente de cuntos valores dependa y de en cuntos sitios se modifique
cada uno de esos valores.
2.6 Directiva ng-show
La directiva ng-show permite que un elemento de la pgina se haga visible o invisible
en funcin de cualquier valor del $scope y por lo tanto de nuestro modelo. Es muy
similar a la directiva ng-disabled pero en vez de deshabilitar lo que hace es mostrar el
elemento si la expresin es true o hacerlo invisible si la expresin es false.
La forma que tiene angular de hacer invisible el elemento es incluyendo el estilo CSS de
display:none.
En nuestro ejemplo slo tiene sentido que est la cobertura de Fecundacin In Vitro si el
sexo de la persona es mujer.As que slo va a estar visible la cobertura de Fecundacin
In Vitro si el sexo es M.
?
index.html
1 <!DOCTYPE html>
<head>
3 <script
5 ></script>
7 </head>
8 <form>
9 <fieldset>
1 <legend>Seguro Mdico</legend>
0 <label for="nif">NIF:</label><input id="nif" name="nif"
type="text" ng-model="seguro.nif" /><br>
1 <label for="nombre">Nombre:</label><input id="nombre"
2 name="ape1" type="text" ng-model="seguro.ape1" /><br>
1 type="checkbox" ng-model="seguro.sexo" ><option value="">--Elige
<label for="casado">Casado:</label><input id="casado"
5
name="casado" type="checkbox" ng-model="seguro.casado" /><br>
1 <label for="numHijos">N Hijos:</label><input id="numHijos"
9 </fieldset>
2 <fieldset>
0 <label for="oftalmologia">Oftalmologia:</label><input
/><br>
2 <label ng-show="seguro.sexo==='M'"
3 for="fecundacionInVitro">Fecundacion In Vitro:</label><input ng-
2 show="seguro.sexo==='M'" id="fecundacionInVitro"
4 name="fecundacionInVitro" type="checkbox" ng-
model="seguro.coberturas.fecundacionInVitro" /><br>
2 </fieldset>
5 <fieldset>
/><br>
7 <label for="estomacal">Estomacal:</label><input
2 id="estomacal" name="estomacal" type="checkbox" ng-
3 <label for="alergia">Alergia:</label><input id="alergia"
3 /><br>
3 model="seguro.enfermedades.nombreAlergia" /><br>
3 </fieldset>
3 </form>
</body>
4 </html>
3
5
3
6
3
7
Lnea 25: Vemos como tanto al tag <label> como al tag <input> se les ha
incluido la directiva ng-show con el valor seguro.sexo==='M'. Por lo tanto esos
dos tags slo se mostrarn cuando el sexo sea Mujer.
?
script.js
2
4 $scope.seguro={
nif:"",
5 nombre:"",
6 ape1:"",
7 edad:undefined,
8 sexo:"",
casado:false,
11 coberturas: {
13 dental:false,
14 },
15 enfermedades:{
16 corazon:false,
17 estomacal:false,
rinyones:false,
18 alergia:false,
19 nombreAlergia:""
20 },
22 }
}
23
24
25
26
27
El fichero script.js no se ha modificado desde el ejemplo anterior.
La expresin que se puede poner en la directiva es del mismo tipo que la expresin de la
directiva ng-disabled
Recuerda que una referencia completa de lo que se puede poner como expresin est en

Al igual que con las reglas de negocio del interfaz de usuario de ng-disabled debemos
pensar que ahora slo es necesario indicar cada regla de negocio de interfaz de usuario
una nica vez y AngularJS llamar a dicha regla cada vez que se modifiquen los datos
de los que depende.
2.7 Directiva ng-hide
La directiva ng-hide permite que un elemento de la pgina se haga invisible o visible
en funcin de cualquier valor del $scope y por lo tanto de nuestro modelo. Es la opuesta
a la directiva ng-show pero lo que hace es ocultar el elemento si la expresin es true o
hacerlo visible si la expresin es false.
En este caso no vamos a poner un ejemplo ya que funciona como la directiva ng-show
pero al revs.
La expresin que se puede poner en la directiva es del mismo tipo que la expresin de la
directiva ng-disabled
Recuerda que una referencia completa de lo que se puede poner como expresin est en

Al igual que con las reglas de negocio del interfaz de usuario de ng-disabled debemos
pensar que ahora slo es necesario indicar cada regla de negocio de interfaz de usuario
una nica vez y AngularJS llamar a dicha regla cada vez que se modifiquen los datos
de los que depende.
ng-show o ng-hide
Aunque tampoco es muy importante usar uno u otro , s que viene bien decir cundo
usar ng-show o ng-hide por coherencia en el proyecto.
Mi recomendacin es usar el contrario a lo que ocurre por defecto. Me voy a explicar:
Si inicialmente o lo normal es que el tag est visible y lo que queremos es que se haga
invisible cuando ocurra cierta condicin, mi recomendacin entonces es usar ng-hide
ya que as estamos indicando que la regla/accin es ocultarlo cuando ocurre cierto
evento pero que si no ocurriera estara visible.
El caso contrario sera que si inicialmente o por defecto el tag est oculto y lo que
queremos es que se haga visible cuando ocurra cierta condicin, mi recomendacin
entonces es usar ng-show ya que as estamos indicando que la regla/accin es mostrarlo
cuando ocurre cierto evento pero que si no ocurriera estara invisible.
Otro caso que suele pasar es que realmente no hay una accin que muestre u oculte el
elemento sino que en funcin del estado de otro campo est o no visible. En ese caso no
tiene sentido preguntarse por el concepto de normal o inicialmente. En este ltimo caso
lo mejor es usar el que evite una condicin negativa que siempre es un poco ms difcil
de entender.
Veamos un ejemplo de esto ltimo:
En nuestro ejemplo anterior de ng-show tenamos el siguiente tag <input>:
?
<input ng-show="seguro.sexo==='M'" id="fecundacionInVitro"
1name="fecundacionInVitro" type="checkbox" ng-
model="seguro.coberturas.fecundacionInVitro" />
La condicin para mostrar el elemento era:
1seguro.sexo==='M'
Si usramos ng-hide quedara de la siguiente forma:
?
<input ng-hide="seguro.sexo!=='M'" id="fecundacionInVitro"
1name="fecundacionInVitro" type="checkbox" ng-
model="seguro.coberturas.fecundacionInVitro" />
La condicin para ocultar el elemento quedara entonces:
1seguro.sexo!=='M'
Personalmente siempre me gustan ms las condiciones con === que con !== , ya
que creo que un programador las entiende mejor.
2.8 Modulos
Por ahora hemos visto unas cuantas directivas de angular 1). Pasemos a explicar qu son
los mdulos en AngularJS.
En todos los ejemplo que hemos visto ya hemos hecho uso de los mdulos en
AngularJS con la siguiente lnea:
Pero, qu es un mdulo? Podramos verlo como un paquete de Java. Es como una

forma de agrupar funcionalidades de Angular. Por ejemplo, podramos crear varias
directivas relacionadas con google Maps. Lo normal sera agrupar todas esas directivas
en un nico mdulo y luego al crear nuestra aplicacin decir que vamos a usar dicho
mdulo.
Sigamos viendo lo que es un mdulo mediante los mtodos de JavaScript que ofrece
AngularJS.
Usando mdulos
Veamos ahora distintas operaciones sobre los mdulos.
Crear un mdulo
Podemos crear un mdulo llamado AA mediante la siguiente lnea:
1angular.module("AA",[]);
Al ejecutarlo se crea el mdulo AA. Aunque no contiene ninguna funcionalidad, ser

necesario aadirla posteriormente.
Por qu debemos incluir los corchetes? Desgraciadamente no existe un mtodo para

obtener una referencia a un mdulo y otro distinto para crear . En ambos casos se usa el
mtodo module(). Si incluimos un segundo parmetro con los corchetes, estamos
indicando que se est creando , pero si no incluimos el segundo parmetro lo que
hacemos es pedir un mdulo que ya existe.
Recuerda poner los corchetes al crear un mdulo:
1angular.module("AA",[]);
Obtener un mdulo
Para obtener una referencia a un mdulo ya creado usaremos la siguiente lnea:
1var moduloAA=angular.module("AA");
Ahora en la variable de JavaScript moduloAA tenemos una referencia al mdulo llamado

AA, el cual exista previamente.
Crear y obtener un mdulo
Lo normal no es crear un mdulo y luego obtener una referencia a l sino hacerlo todo
en la misma lnea:
1var moduloAA=angular.module("AA",[]);
Ahora en la variable de JavaScript moduloAA tenemos una referencia al mdulo llamado

AA, el cual acabamos de crear.
Se entiende ahora la primera lnea de todos los ejemplos de AngularJS?
Artefactos
En los mdulos se pueden definir diversos artefactos 2) que permitirn configurar
nuestra aplicacin.
Un artefacto es por ejemplo una directiva o un controlador , teniendo que definir estos
artefactos en mdulos de AngularJS.
Controladores
Por ahora hemos visto que crear un controlador es simplemente crear una funcin
JavaScript con el nombre de dicho controlador. Esta no es una forma adecuada de crear
un controlador, lo correcto es aadir el controlador al mdulo de nuestra aplicacin.
3app.controller("PruebaController",function($scope) {
5});
Lnea 1: La variable app contiene una referencia al mdulo que acabamos de crear
llamado app. Esta variable app contiene ,entre otros, un mtodo llamado
controller que nos permite aadir controladores a nuestro mdulo.
Lnea 3: Creamos un controlador llamado PruebaController, el cual aadimos al
mdulo app.
El mtodo controller acepta dos parmetros, el primero es el nombre del controlador

y el segundo la funcin 3) con el cdigo JavaScript del controlador.
Todos los controladores que usemos en nuestra aplicacin deben siempre definirse dentro de
un mdulo y no como funciones sueltas. es importante ya que a partir de la versin 1.3 de
AngularJS no funcionarn los controladores que no estn dentro de un mdulo.
Directivas
Hemos visto algunas directivas en AngularJS pero nosotros podemos crear nuestras
propias directivas, para ello deberemos usar el mtodo directive del mdulo.
1app.directive('mapa', function() {
3});
Ya veremos ms adelante cmo crear nuevas directivas pero por ahora simplemente
recordad que al igual que los controladores, las directivas deben aadirse a un mdulo.
Otros artefactos
Hasta ahora hemos visto que AngularJS dispone de 2 artefactos :
Controladores
Directivas
AngularJs dispone de otros tipos de artefactos que iremos viendo a lo largo del curso y
que tambin deben aadirse a los mdulos:
Filtros
Constantes
Servicios
Factorias
Providers
Config
Run
Etc.
Es decir y para acabar con la explicacin de qu es un mdulo:

Un mdulo es donde se aaden los distintos artefactos que usaremos en nuestra
aplicacin.
Dependencias
En cualquier aplicacin que desarrollemos acabaremos organizando nuestro cdigo en
distintos mdulos o usando mdulos de terceros.
Cmo indicamos que AngularJS debe cargar el cdigo de los otros mdulos? Es decir,
cmo le decimos que nuestro mdulo depende de otros mdulos? Por fin vamos a
explicar el significado de los corchetes al crear un mdulo. Si sabes algo de JavaScript
ya habrs deducido que los 2 corchetes corresponden a un array vaco. Pero, qu
significado tiene dicho array? Pues son la lista de nombre de mdulos de los que
dependemos.
Veamos un ejemplo:
1var moduloA=angular.module("A",[]);
2var moduloB=angular.module("B",[]);
4var app=angular.module("app",["A","B"]);
Lnea 1: Se crea el mdulo A

Lnea 2: Se crea el mdulo B
Lnea 4: Se crea el mdulo app pero indicamos que depende de los mdulos A y
B.
Qu implicaciones tiene que el mdulo app dependa de los mdulos A y B?
AngularJS por defecto slo nos permite usar los artefactos que hemos definido en
nuestro mdulo principal ,es decir, en el que hemos indicado en la directiva ng-app en
el tag <html> que en nuestros ejemplos es el mdulo app. El resto de mdulos aunque
los creemos no se podrn utilizar ya que el mdulo principal no depende de ellos. Por
ello la dependencia de mdulos permite que podamos usar los artefactos de otros
mdulos.
Transitividad
La carga de mdulos es transitiva , veamos un ejemplo:
1var moduloT=angular.module("T",[]);
2
3var moduloA=angular.module("A",["T"]);
4var moduloB=angular.module("B",[]);
5
var app=angular.module("app",["A","B"]);
6
Lnea 1: Ahora creamos un nuevo mdulo llamado T

Lnea 3: El mdulo A ahora depende del mdulo T
Ahora el mdulo app depende de los mdulos A y B pero el mdulo A a su vez

depende del mdulo T. Qu implica sto? Que en nuestra aplicacin podremos usar
cualquier artefacto definido en los mdulos app, A, B y T.
Carga de mdulos
Llegados a este punto , parece que los mdulos son una cosa muy til para organizar
nuestro cdigo JavaScript y con las relaciones transitivas nos podemos ahorrar mucho
trabajo.
Pero hay un asunto en el que no habrs cado: para que funcione todo sto, todo el
cdigo JavaScript debe estar cargado en la pgina. Cmo? S, te estoy diciendo que
an debes seguir aadiendo manualmente todos tus ficheros js con todo el cdigo
JavaScript.
AngularJS no va a ahorrarte cosas como lo siguiente:
1<script type='text/javascript' src='T.js'></script>
2<script type='text/javascript' src='A.js'></script>
3<script type='text/javascript' src='B.js'></script>
4<script type='text/javascript' src='app.js'></script>
Es decir , suponiendo que cada mdulo y todos sus artefactos estn en un nico fichero ,
deberemos cargar los 4 ficheros explcitamente en el index.html.
Sin embargo , aunque AngularJS no tenga nada referido a la carga de ficheros

JavaScript s hay otros proyectos que pueden ayudarnos como:
RequireJS
angularjs-loader
Aunque hay que tomarlos con cautela ya que an no hay una solucin definitiva a la
carga de ficheros JavaScript.
Recuerda que siempre debes cargar todos los ficheros JavaScript con la etiqueta <script>.
AngularJS no se encarga de ello aunque cree las relaciones entre los mdulos.
Varios mdulos
Entonces , para qu sirve tener ms de un mdulo? Si ests haciendo una librera

JavaScript con artefactos de Angular , como por ejemplo directivas para usar Google
Maps en AngularJS debes de aadirlas a un mdulo y como no puedes saber el nombre
del mdulo de la aplicacin principal debers crearte tu propio mdulo. ste es el
primer motivo para crear nuevos mdulos. Por otro lado dentro del cdigo de la propia
aplicacin, tiene sentido tener varios mdulos? Discutiremos ste tema en nico
mdulo
La mayor utilidad de los mdulos es si est haciendo una librera que ser usada por terceros.
Espacio de nombres
Una ltima caracterstica de los mdulos es el espacio de nombres. Hemos visto que al
aadir un controlador a un mdulo le indicamos su nombre, pues bien. Para AngularJS
da igual el mdulo en el que definamos el controlador, siempre nos referiremos a l por
su nombre independientemente del mdulo en el que se haya definido.
sto tiene la ventaja de que no debemos preocuparnos por saber en qu mdulo se

defini el controlador (o cualquier otro artefacto) pero la parte negativa es que no
podremos tener 2 controladores con el mismo nombre aunque estn en distintos
mdulos. Por lo tanto en un equipo grande de desarrollo se debern coordinar los
nombres de todos los artefactos de AngularJS.
Mi opinin personal y mi recomendacin es que en unos aos acabaremos teniendo nombres

de mdulos y artefactos como las FQCN 4) de Java.
Es decir que el nombre de un controlador 5) acabar siendo:

com.miempresa.miapp.subsistema.NombreControlador y de esa forma evitaremos los
solapamientos.
Y lo mismo con el nombre de los mdulos que se llamarn

com.miempresa.miapp.subsistema
Ejemplo
Seguimos ahora con nuestro ejemplo y vamos a definir nuestro controlador en el
mdulo de nuestra aplicacin.
index.html
1 <!DOCTYPE html>
3 <head>
4 <script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"
5 ></script>
</head>
7
8
<form>
9
<fieldset>
1
0
<label for="nif">NIF:</label><input id="nif" name="nif"
1
name="ape1" type="text" ng-model="seguro.ape1" /><br>
1
1
<label for="sexo">Sexo:</label><select id="sexo" name="sexo"
4
type="checkbox" ng-model="seguro.sexo" ><option value="">--Elige
value="M">Mujer</option></select><br>
5
<label for="casado">Casado:</label><input id="casado"
1 name="casado" type="checkbox" ng-model="seguro.casado" /><br>
6
<label for="numHijos">N Hijos:</label><input id="numHijos"
8
<label for="fechaCreacion">Fecha de
2 </fieldset>
0 <fieldset>
2 <legend>Coberturas</legend>
1
<label for="oftalmologia">Oftalmologia:</label><input
model="seguro.coberturas.oftalmologia" /><br>
2
<label for="dental">Dental:</label><input id="dental"
3 /><br>
2 <label ng-show="seguro.sexo==='M'"
4 for="fecundacionInVitro">Fecundacion In Vitro:</label><input ng-
show="seguro.sexo==='M'" id="fecundacionInVitro"
2 name="fecundacionInVitro" type="checkbox" ng-
5 model="seguro.coberturas.fecundacionInVitro" /><br>
</fieldset>
2
6 <fieldset>
name="corazon" type="checkbox" ng-model="seguro.enfermedades.corazon"
2 /><br>
8
<label for="estomacal">Estomacal:</label><input
2 id="estomacal" name="estomacal" type="checkbox" ng-
3 <label for="alergia">Alergia:</label><input id="alergia"

/><br>
3
model="seguro.enfermedades.nombreAlergia" /><br>
3
</fieldset>
4
</form>
3
</body>
5
</html>
3
6
3
7
El fichero index.html no se ha modificado
script.js
3 app.controller("SeguroController",function($scope) {
4 $scope.seguro={
5 nif:"",
6 nombre:"",
ape1:"",
7
edad:undefined,
8
sexo:"",
9
casado:false,
10
numHijos:undefined,
12 coberturas: {
14 dental:false,
},
16
enfermedades:{
17
corazon:false,
18
estomacal:false,
19
rinyones:false,
20 alergia:false,
21 nombreAlergia:""
22 },
24 }
});
25
26
27
Lnea 3: Vemos cmo el controlador ya no es una funcin con nombre sino que ahora
es una funcin annima que se pasa al mtodo controller junto con el nombre del
controlador que sigue siendo SeguroController. Es decir que ahora el controlador
se define dentro del mdulo.
3.1 Servicios
Por ahora hemos visto 2 artefactos de AngularJS , los controladores y las directivas. En
esta unidad vamos a ver otro conjunto de nuevos artefactos: los servicios.
Aunque hablamos de servicios de forma genrica, AngularJS tiene realmente 5 tipos

distintos de servicios:
Constantes
Valores
Servicios
Factorias
Proveedores
Estos 5 tipos corresponden a 5 mtodos que existen en la clase Modulo. Aunque

repito que se suele hablar de todos ellos simplemente como servicios.
Qu es un servicio?
Es un objeto JavaScript que nos permite obtener informacin. Aparentemente nada
nuevo que entender, sera por ejemplo un DAO en Java o un servicios de Java. Lo
importante de sto es que un servicio nunca 1) interacciona con la propia pgina, slo
con otros servicios o con un servidor de datos que pueda estar en otro Host.
Ejemplos de servicios seran:
El servicio $http de AngularJS. Este servicio hace la tpica llamada AJAX a un servidor
para obtener informacin de l. Como vemos, cumple perfectamente la definicin de
obtener informacin.
Un servicio que se conecta a un host que nos retorna el valor del Euribor.
Un posible servicio de clculo de Hipoteca que dados los datos de una hipoteca
(Importe del prstamo, aos, diferencial ,etc) nos calculara cunto hay que pagar
mensualmente.
Un servicio que nos hiciera las operaciones de CRUD sobre el servidor.
Un servicio que transformara los String con una fecha en un objeto Date.
El servicio $log de Angular que nos permite generar un log de nuestra aplicacin.
Etc.
Una caracterstica importante de los servicios es que slo hay una nica instancia de ellos
aunque los usemos ms de una vez,es decir que son un singleton.
Ventajas
Y qu tiene sto de especial? Por qu Angular tiene esos artefactos si quizs t ya
tengas clases JavaScript que actan como servicios? qu ventajas nos ofrecen?
Las ventajas son las siguientes:

Facilitar el TDD
Permitir decorar los servicios
Facilitar las relaciones entre servicios
Modificar las implementaciones
Facilitar el TDD
Aunque en este curso no se trata el tema del Desarrollo guiado por pruebas o TDD, todo
AngularJs est diseado para facilitar el TDD. Un ejemplo de ello es que las instancias
de los servicios no se obtienen directamente sino que se obtienen mediante Inyeccin de
Dependencias. Es decir, en un controlador u otro servicio le diremos que deseamos una
instancia de un servicio, pero no lo crearemos mediante la palabra reservada de
JavaScript de new. Esto nos permitir al hacer TDD modificar los servicios por objetos
Mock y poder hacer pruebas unitarias de nuestros controladores o servicios.
Es decir, al ser el servicio un artefacto de Angular , podremos cambiarlo por una

implementacin vaca que facilita el TDD.
Permitir decorar los servicios
Angular nos permite decorar los servicios. sto significa que permite que interceptemos
la creacin del servicio para poder aadir mtodos os modificar su funcionamiento. sto
es muy til, por ejemplo, para poder hacer modificaciones en servicios de terceros que
no podemos modificar.
Facilitar las relaciones entre servicios
Cuando la aplicacin se vuelve compleja empiezan a depender unos servicios de otros.

En los ejemplos de servicios que hemos visto en este tema, est el servicio de clculo de
hipoteca que dependera del servicio de obtencin del euribor.
Cuando la cosa se complica podra pasar que se dependiera de un servicio que an no ha

sido inicializado. Angular tiene los 5 tipos de servicios que hemos enumerado formando
una jerarqua que permite evitar esos problemas.
Modificar las implementaciones
Podramos tener 2 mdulos que implementen el mismo servicio aunque de 2 formas

distintas. Cambiar de una implementacin a otra sera tan sencillo como hacer que
dependiera de un mdulo u otro (Pero no de los 2 a la vez).
En nuestro ejemplo de servicio de obtencin del Euribor se podra haber creado un

mdulo llamado BBVA que incluyera el servicio del euribor de forma que se conecte
al Banco BBVA para obtener el valor del Euribor. En caso de que no nos interesara por
cualquier motivo seguir usando el BBVA podramos crear otro mdulo llamado
Santander en el que estuviera tambin el servicio de obtener el Euribor.
Cambiar de un servicio a otro sera tan sencillo como cambiar en el mdulo de nuestra
aplicacin del mdulo BBVA a Santander.
Usando servicios
La primera caracterstica de los servicios es que tienen un nombre (al igual que los
controladores) y como ya dijimos en Espacio de nombres dicho nombre es
independiente del mdulo en el que fueron aadidos. As que para usar un servicio slo
necesitamos saber su nombre.
Un servicio sencillo de AngularJS es el servicio de $log. Este servicio simplemente

llama a console.log pero nos abstrae por si no existe el objeto console. $log dispone
de varios mtodos pero por ahora nos quedaremos con el mtodo debug que permite
pasarle un mensaje para que se muestre por la consola del navegador.
Continuando ahora con nuestro ejemplo del seguro mdico vamos a aadir un mensaje
de log cuando se configura el $scope.
Cmo obtenemos una instancia del servicio de $log en el controlador? Debemos

aadir un nuevo parmetro a nuestra funcin del controlador con el nombre del servicio,
que como ya hemos dicho en nuestro caso es $log. Si tuviramos que solicitar ms
servicios se aadiran como ms parmetros.
script.js
2
app.controller("SeguroController",function($scope,$log) {
3
$scope.seguro={
4
nif:"",
5
nombre:"",
6
ape1:"",
7 edad:undefined,
8 sexo:"",
9 casado:false,
embarazada:false,
11
coberturas: {
12
oftalmologia:false,
13
dental:false,
14
15
},
16 enfermedades:{
17 corazon:false,
18 estomacal:false,
rinyones:false,
19
alergia:false,
20
nombreAlergia:""
21
},
22
fechaCreacion:new Date()
23 }
24
25 $log.debug("Acabamos de crear el $scope");

26
27});
28
29
30
Lnea 3: Vemos que la funcin del controlador ahora tiene 2 parmetros, el $scope y
el $log.
Lnea 28: Usamos el objeto $log llamando al mtodo debug.
Si mostramos la consola de chrome (CTRL+SHIFT+J) veremos el mensaje de

Acabamos de crear el $scope
Es decir que en vez de pedir nosotros las instancias de los servicios, se incluyen como
parmetros de nuestra funcin del controlador y cuando AngularJS llame al controlador
nos inyectar las instancias de los servicios que hemos solicitado.
Minimizando el JavaScript
Para mejorar el rendimiento u ofuscar el cdigo javaScript se suele recurrir a

herramientas que minimizan el cdigo JavaScript. Estas herramientas entre otras cosas
renombran las variables. El problema es que si se renombra la variable del servicio del
$log o incluso el nombre del $scope, entonces AngularJS no reconocer lo que le
pedimos y fallar.
Es decir, al minimizar nuestra funcin se queda de la siguiente forma (Hemos omitido

aqu el cuerpo de la funcin para mejorar la legibilidad):
?
app.controller("SeguroController",function(a,b) {
1
});
2
Tras minimizar el cdigo, los parmetros se llamaran a y b por lo que AngularJS nos
dir que no conoce ningn servicio llamado a ni ningn servicio llamado b y fallar
nuestro cdigo.
Los creadores de AngularJS conocedores de este problema han creado una solucin. En
vez de pasar la funcin , pasamos un array en el que los n primeros elementos son
Strings con el nombre de los servicios a inyectar y el ltimo parmetro del array ser
la propia funcin.
Veamos ahora cmo debera ser nuestro cdigo:
?
app.controller("SeguroController",['$scope','$log',function($scope,$l
1
og) {
2}]);
Vemos cmo se pasa un array con 3 elementos. El primero de ellos es un String con el
texto $scope , el segundo parmetro es otro String con el texto $log y el tercer
parmetro es la propia funcin.
Ntese que ahora hay que cerrar el corchete del array al acabar la funcin
Si ahora minimizramos el cdigo quedara de la siguiente forma:
1app.controller("SeguroController",['$scope','$log',function(a,b) {
2}]);
Los parmetros al minimizarlos se llaman a y b. Pero ahora so no es un problema para

angular porque l sabe que el primer parmetro corresponde a $scope ya que es el texto
del primer elemento del array y el segundo parmetro corresponde al servicio $log ya
que es el texto del segundo elemento del array.
Es decir que el texto de cada elemento del array 2) se corresponde con el nombre de lo
que queremos inyectar en la funcin del controlador.
Al inyectar objetos en el controlador (o cualquier otra funcin en la que AngularJS inyecte

valores , recuerda siempre pasar un array con el nombre de lo que hay que inyectar y como
ltimo parmetro la funcin , en vez de pasar nicamente la funcin.
Es necesario hacerlo siempre as ya que nunca sabes si alguien va a querer minimizar tu

cdigo JavaScript.
Finalmente el ejemplo quedara de la siguiente forma:

?
script.js
1
2
3
app.controller("SeguroController",['$scope','$log',function($scope,$l
4 og) {
$scope.seguro={
5
nif:"",
6
nombre:"",
7
ape1:"",
8
edad:undefined,
9 sexo:"",
1 casado:false,
0
numHijos:undefined,
1
embarazada:false,
1
coberturas: {
1
oftalmologia:false,
2
dental:false,
1
1 },
4 enfermedades:{
1 corazon:false,
5 estomacal:false,
1 rinyones:false,
6
alergia:false,
1
nombreAlergia:""
7
},
1
}
1
9

0
2 }]);
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
Lnea 3: Ahora vemos que se pasa el array con el nombre de las instancias a inyectar y
como ltimo parmetro la propia funcin.
Lnea 30: Tambien hay que cerrar el array con el ]
Recuerda cerrar el array con ] despus de cerrar la funcin con } y por ltimo la llamada a
la funcin controller con ).
Es decir que acabar siempre con }]);

3.2 $http
El servicio $http permite hacer peticiones AJAX al servidor. Es realmente como el
objeto XMLHttpRequest o el mtodo ajax() de JQuery. La diferencia con estos dos
ltimos es que est integrado con Angular como un servicio (con todas las ventajas de
ellos conlleva) pero principalmente porque notifica a AngularJS que ha habido un
cambio en el modelo de JavaScript y actualiza la vista y el resto de dependencias
adecuadamente.
Como en otros apartados de AngularJS es obligatorio usar las funciones de AngularJS

como $http para que AngularJS sepa que se han modificado los datos.
Si quieres saber mas sobre JSON puede ir al tema 10.2 JSON Y si quieres saber sobre
HTTP puede ir al tema http
Para explicar el servicio de $http vamos a seguir con nuestro ejemplo del seguro
mdico en el que vamos a obtener unos datos iniciales del seguro desde el servidor para
mostrarlos en el formulario. Los datos se obtienen en formato JSON desde la url
datos.json. Este fichero contendr simplemente texto en formato JSON para que
podamos obtener la informacin del servidor. Ms adelante en el curso, obtendremos
los datos mediante REST desde la base de datos , pero por ahora y para aprender a usar
$http ser simplemente un fichero esttico.
El contenido del fichero datos.json es el siguiente:
?
datos.json
1
2
3 {
"nif":"12345678Z",
4
"nombre":"Carlos",
5 "ape1":"Cano",
6 "edad":41,
7 "sexo":"H",
8 "casado":true,
"numHijos":3,
9 "embarazada":false,
10 "coberturas": {
11 "oftalmologia":true,
12 "dental":false,
13 "fecundacionInVitro":false
},
14 "enfermedades":{
15 "corazon":true,
16 "estomacal":false,
17 "rinyones":false,
"alergia":true,
18 "nombreAlergia":"Acaros"
19 }
20}
21
22
No est el campo fechaCreacion ya que las fechas son un tema complejo que
trataremos ms adelante.
La instancia
Lo primero que tenemos que hacer es obtener una referencia al servicio $http. Como
ya hemos explicado en el tema anterior, tenemos que incluirlo como parmetro de
nuestro controlador para que nos lo inyecte al crearlo.
?
script.js
2
app.controller("SeguroController",['$scope','$log','$http',function($s
3cope,$log,$http) {
4
5
6}]);
No hemos mostrado el resto de lneas del controlador para mejorar la legibilidad
Lnea 3: Vemos cmo ahora se inyecta el nuevo servicio , $http. Fjate hemos
puesto el nombre del servicio como parmetro de la funcin y como tercer
parmetro del array.
config
$http acepta como parmetro un nico objeto llamado config con todas las propiedades
que necesita para la peticin.
Veamos ahora alguna de las propiedades:
method: El mtodo HTTP para hacer la peticin. Sus posibles valores son: GET,
POST, PUT, DELETE, etc.
url: La URL de donde queremos obtener los datos.
data: Si usamos el mtodo POST o PUT aqu pondremos los datos a mandar en el
body de la peticin HTTP
params: Un objeto que se pondr como parmetros de la URL.
El objeto config contiene mas propiedades pero no vamos a explicarlas en este curso.
Puedes ver la lista completa en $http Usage
Ahora vamos a hacer una llamada mediante GET a la URL datos.json y sin
parmetros.
?
script.js
1
2app.controller("SeguroController",['$scope','$log','$http',function($s
3cope,$log,$http) {
var config={
4 method:"GET",
5 url:"datos.json"
6 }
7
8}]);
9
Lnea 4: Creamos el objeto JavsScript llamado config.

Lnea 5: Aadimos la propiedad method para indicar que el mtodo HTTP es
GET.
Lnea 6: Indicamos la url al fichero datos.json
respuesta
Teniendo el objeto config ya podemos llamar al servicio $http. La llamada nos
retornar un objeto response.
?
script.js
1
3
4 app.controller("SeguroController",['$scope','$log','$http',function($
5 scope,$log,$http) {
6 varmethod:"GET",
config={
7 url:"datos.json"
8 }
9
1 var response=$http(config);
0
1 }]);
1
Lnea 9: Se llama al servicio $http al que se le pasa toda la configuracin y nos

responde con un objeto response.
Realmente no nos responde con un objeto response sino con un objeto promise pero ya
veremos ms adelante en el curso los objetos promise.
Los datos
Si todo ha funcionado correctamente podremos obtener el objeto JavaScript
correspondiente al String JSON que nos han pasado. Para ello llamaremos a la funcin
success(fn) que acepta como nico parmetro una funcin nuestra que ser llamada
cuando se obtengan los datos.
La funcin que le pasaremos tendr 4 argumentos que son los siguientes:
data: Un objeto JavaScript correspondiente a los datos JSON que ha recibido

status: Es el estado HTTP que ha retornado. Su valor siempre ser entre 200 y
299 ya que si se llama a esta funcin significa que la peticin ha tenido xito.
headers:Es una funcin que acepta como nico parmetro el nombre de una
cabecera HTTP y nos responde su valor.
config: El mismo objeto config que usamos para configurar la peticin.
Recuerda que headers no es un objeto con la cabeceras sino una funcin que permite
obtener el valor de una cabecera.
?
script.js
1
2
3
5
8 var config={
9 method:"GET",
url:"datos.json"
1 }
0
1
1 response.success(function(data, status, headers, config) {
2 $scope.seguro=data;
1 });
3
}]);
1
4
1
5
Lnea 11: Llamamos a la funcin success pasndole como parmetro nuestro

propia funcin.
Lnea 12: Asignamos los datos del servidor a nuestro objeto $scope.seguro
para que se muestren en la pgina HTML.
La lnea 12 tiene mucha ms importancia de la que parece, slo que AngularJS nos lo
hace todo muy sencillo. Como ya hemos dicho, el parmetro data contiene el objeto
con los datos del servidor. Al asignrselo a la propiedad $scope.seguro modificamos
nuestro modelo de datos por lo que automticamente se modificarn los tag <input> de
la pgina HTML ya que el formato del objeto es exactamente el mismo que el que
tenemos en $scope.seguro.
El que se actualice automticamente el modelo es lo que hace que tengamos que usar
$http. Si hubiramos usado directamente el objeto XMLHttpRequest o el mtodo
ajax() de JQuery , AngularJS no se habra enterado de los cambios y no se habra
actualizado la pgina HTML.
Recuerda que la llamada a nuestra funcin de la lnea 11 se hace de forma asncrona tal
y como se hacen las peticiones AJAX
El error
Si ocurre algn error, es decir si se retorna un 400, 500 ,etc, no se llamar a la funcin
de success .Para poder controlar el error debemos llamar a una nuev funcin llamada
error(fn) que al igual que success acepta como nico parmetro una funcin la cual
tiene los mismos argumentos que success.
No vamos a extendernos mas en esta funcin ya que funciona igual que success.
?
script.js
1
2
3
4
5
7
var config={
1 method:"GET",
0 url:"datos.json"
1 }
1
2
1 response.success(function(data, status, headers, config) {
$scope.seguro=data;
3 });
1
4 response.error(function(data, status, headers, config) {
1 alert("Ha fallado la peticin. Estado HTTP:"+status);
5 });
1
6
1 }]);
7
1
8
1
9
2
0
Lnea 15: Llamamos a la funcin error y le pasamos nuestra funcin.

Lnea 16: Mostramos al usuario un mensaje de error indicando el valor del
estado HTTP.
Hacer un alert no es la mejor forma de tratar los errores pero a efectos de aprender lo
vamos a poner as.
Uniendo todo el cdigo

Ya hemos visto cmo funciona pero el cdigo nos ha quedado un poco largo. Lo hemos
hecho as para ir explicando todo poco a poco, pero vamos a condensarlo todo para que
quede ms corto y legible.
Un detalle a comentar antes es que las funciones success o error retornan el mismo
objeto response , con lo que podemos concatenar las llamadas.
El cdigo finalmente quedara as:
?
script.js
1
2
3
5
8
9 $http({
1 method: 'GET',
url: 'datos.json'
0 }).success(function(data, status, headers, config) {
1 }).error(function(data, status, headers, config) {
});
2
1
3
}]);
1
4
1
5
Vemos cmo hemos puesto la configuracin directamente en la llamada en vez de crear

un objeto config. Hemos incluido la llamada a success tras llamar a $http sin crear
una nueva variable response y finalmente como success retorna el mismo objeto que
$htpp podemos a su vez llamar a error.
El poner en el controlador la llamada a $http es con fines educativos. Realmente

debera estar dentro de un servicio y que dicho servicio se llamara desde el controlador.
El ejemplo correcto se explicar en 3.10 Ejemplo servicio
Ejemplo
Finalmente el controlador completo quedara de la siguiente forma:
?
script.js
1
2
5 $scope.seguro={
6 nif:"",
7 nombre:"",
ape1:"",
8 edad:undefined,
9 sexo:"",
1 casado:false,
embarazada:false,
1 coberturas: {
1 dental:false,
1 },
enfermedades:{
3 corazon:false,
1 estomacal:false,
4 rinyones:false,
1 alergia:false,
nombreAlergia:""
5 },
6 }
1
1
8 $http({
method: 'GET',
1 url: 'datos.json'
9 }).success(function(data, status, headers, config) {
0 }).error(function(data, status, headers, config) {
});
1
2 }]);
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6
3
7
3
8
3
9
Como ya hemos explicado hemos aadido en la lnea 3 la referencia al objeto $http y

hemos aadido en las lneas 30 a 37 la llamada a $http.

Angular

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Angular

Transféré par

Droits d'auteur :

Formats disponibles

Angular

2.1 Primera aplicacin

El ejemplo consta de dos ficheros:

Lnea 2: La primera cosa que nos encontramos es un atributo desconocido

Lnea 1: Llamamos al mtodo angular.module. Este mtodo nos permite crear

El $scope es LA VARIABLE de Angular donde debemos guardar toda la informacin

sino que ahora deberemos hacer siempre:

Ahora podramos preguntarnos el porqu de esa limitacin de obligarnos a usar el

Si no acabas de entender el $scope, no te preocupes, seguiremos hablando de l a lo

La generacin del HTML se produce una nica vez 4) al generar la pgina

Qu hace Angular? Une la informacin del modelo y de la plantilla para generar el

En los siguientes temas seguiremos viendo ms caractersticas del Data-binding de

El ejemplo ahora quedara as:

Desgraciadamente el mtodo no puede ser una simple funcin JavaScript llamada

7 $scope.mensaje="Adios mundo cruel :-)";

Si lo pulsamos veremos que en la pgina HTML ha cambiado el texto al nuevo valor.

Qu hace Angular? Como ya vimos en el tema anterior, angular genera el HTML a

En el siguiente tema seguiremos viendo la ltima caractersticas del Data-binding de

ng-dblclick:Cuando se produce el evento doble click.

ng-keydown:Cuando se produce el evento keydown.

ng-mousedown:Cuando se produce el evento mousedown

El ejemplo ahora quedara as:

7 $scope.mensaje="Adios mundo cruel :-)";

El fichero script.js no lo hemos modificado nada.

La modificacin del HTML en el <input> modifica el modelo, lo que a su vez

Es decir que el Data-binding funciona en ambas direcciones.

Modelo > HTML

Pero so tiene 2 inconvenientes, que son el precio a pagar:

En el ejemplo anterior todos las propiedades de la directiva ng-model empiezan por

Lo que estara mal sera haber hecho:

Lo importante de la directiva es que habilita o deshabilita el elemento en funcin de

<label for="numHijos">N Hijos:</label><input id="numHijos"

2 <label for="dental">Dental:</label><input id="dental"

3 name="nombreAlergia" type="text" ng-

El fichero script.js no se ha modificado desde el ejemplo anterior.

Hacer que siempre sean referidas al $scope

Ejemplos de expresiones usando nuestro modelo podran ser:

1seguro.sexo==="H" && sexo.embarazada===true

Tambin podemos llamar a funciones si creamos dicha funcin en el $scope.

Por ejemplo si definimos la siguiente funcin:

podremos llamar a la funcin desde la directiva, quedando de la siguiente forma:

Ahora desde la directiva llamamos a la funcin disabledNombreAlergia() pero slo

Funciones con parmetros

Un ejemplo un poco rebuscado para ver so es el siguiente:

Ahora vemos cmo desde la directiva se llama a la funcin isNegativo pasndole

Ahora si ponemos una edad negativa se deshabilita el campo nombreAlergia.

Una referencia completa de que se puede poner como expresin la tenemos en

Reglas de negocio del Interfaz de usuario

En nuestro ejemplo hemos definido la siguiente regla de negocio relativa al interfaz de

Si el campo alergia est desactivado, el campo nombre de la alergia debe

SI Se modifica el valor X1 o X2,Xn ENTONCES Hacer la accin sobre Y

El fichero script.js no se ha modificado desde el ejemplo anterior.

Reglas de negocio del Interfaz de usuario

Reglas de negocio del Interfaz de usuario

Mi recomendacin es usar el contrario a lo que ocurre por defecto. Me voy a explicar:

En nuestro ejemplo anterior de ng-show tenamos el siguiente tag <input>:

La condicin para mostrar el elemento era:

Si usramos ng-hide quedara de la siguiente forma:

La condicin para ocultar el elemento quedara entonces:

Pero, qu es un mdulo? Podramos verlo como un paquete de Java. Es como una

Podemos crear un mdulo llamado AA mediante la siguiente lnea:

Al ejecutarlo se crea el mdulo AA. Aunque no contiene ninguna funcionalidad, ser

Por qu debemos incluir los corchetes? Desgraciadamente no existe un mtodo para

Recuerda poner los corchetes al crear un mdulo: