AngularJS

AngularJS

JJD174 Desarrollo WEB con AngularJS- 2014, Netmind SL, Barcelona - 1,0 Junio 2015
 AngularJS

El problema con la forma habitual de operar, es que

tenemos que trabajar con los valores de entrada tal y como
se muestran al usuario.
Por ejemplo, el usuario puede utilizar un formato del tipo
"21-Marzo-2014", mientras que nuestro cdigo debe
manejar objetos "Date" de JavaScript.
AngularJS, desconecta el modelo de la vista.
Esto significa que los elementos de entrada mostrarn los valores,
pero AngularJS actualizar el modelo de acuerdo con lo establecido
para ellas
Tpicamente, a travs de controladores y tcnicas de databinding,
como hemos visto hasta aqu.

AngularJS

AngularJS extiende los

formularios mediante las
directivas form, ngForm (un
alias del anterior) e input, otras
directivas de validacin y
algunos controladores.
Con todo esto, se sobrescribe el
comportamiento
predeterminado de los
formularios HTML
Pero, para un usuario estndar, el
aspecto y el funcionamiento son
absolutamente similares al de los
formularios tradicionales

JJD174 Desarrollo WEB con AngularJS- 2014, Netmind SL, Barcelona - 1,0 Junio 2015
 AngularJS

Recordemos que hay dos directivas de enlace directo:

ng-bind, que establece un enlace unidireccional.
ng-model, establece un enlace en dos direcciones.
La forma en que un elemento de entrada tradicional se
convierte en un elemento de entrada AngularJS es,
precisamente, la utilizacin de sta directiva.
Por ejemplo, para un elemento de entrada de tipo correo,
basta con que aadamos lo siguiente:

<input type="email" ng-model="usuario.email"><br />

AngularJS

JJD174 Desarrollo WEB con AngularJS- 2014, Netmind SL, Barcelona - 1,0 Junio 2015
 AngularJS

Angular, pone a disposicin del programador directivas que,

en algunos casos, parecen "duplicar" la funcionalidad del
estndar HTML5

En realidad cumplen dos funciones:

Complementan la funcionalidad con elementos "extra"
Proveen de funcionalidad "fallback" (hacia atrs)
Por ejemplo, para todas las entradas de texto, existen directivas que
permiten establecer la longitud del campo, como ng-minlength y
ng-max-length

<input type="text" name="idtexto" ng-model="texto" ng-maxlength="10">

AngularJS

La directiva ng-model asigna los valores true o false al elemento

del modelo donde aparezca
La diferencia con el estndar es que podemos utilizar otros
valores para indicar esa condicin
<input id="esAdmin" type="checkbox" ng-model="usuario.administrador"
ng-true-value="Administrador" ng-false-value="Basica">

A diferencia del anterior, los elementos de tipo "radio"

proporcionan una forma de seleccionar un valor dentro de un
conjunto enumerado.
AngularJS permite una implementacin muy sencilla de esta
situacin:
Utilizamos la directiva ng-model vinculando todos los elementos al
mismo campo del modelo de datos
Y especificamos en cada uno de ellos el atributo value asignndole el
valor que deseamos que adquiera al seleccionarlo.

JJD174 Desarrollo WEB con AngularJS- 2014, Netmind SL, Barcelona - 1,0 Junio 2015
 AngularJS

Por ejemplo, queremos que el usuario pueda marcar una

opcin que indique, un color entre 3 posibles
<form name="formulario" ng-controller="Controlador">
<input type="radio" ng-model="color" value="red"> Red <br />
<input type="radio" ng-model="color" ng-value="valorEspecial"> Green
<input type="radio" ng-model="color" value="blue"> Blue <br />
<pre>color = {{color | json}}</pre><br />
<p style="font-size:large; background-color:{{color}}; color:white;" >
Fondo cambiante</p>
</form>

AngularJS

AngularJS suministra una sintaxis adicional para definir una

lista de elementos ms compleja, vinculada a la etiqueta
select.
Es posible enlazar el valor con un objeto en lugar de con
una cadena, mediante la directiva ngOptions.
Podemos usar lo que se denomina una "comprehension
expression", que varia segn se trate de arrays o de objetos.

JJD174 Desarrollo WEB con AngularJS- 2014, Netmind SL, Barcelona - 1,0 Junio 2015
 AngularJS

La expresin optionBinding describe lo que debera extraerse de cada

origen de datos y cmo ese tem debe vincularse con las opciones de
un elemento select.
Las expresiones dataSource describen el origen de datos que ser
mostrado por el elemento.
AngularJS generar un subelemento option por cada tem de la
expresin del origen.
Algunas expresiones tpicas son:

ng-options = "usuario.email for usuario in usuarios"

ng-options = "NombreCompleto(usuario) for usuario in usuarios"

Podemos indicar etiquetas que se muestran como descriptores mientras

que el valor interno que se guarda es diferente.
Incluso podemos agruparlos utilizando la clasula group by.

AngularJS

JJD174 Desarrollo WEB con AngularJS- 2014, Netmind SL, Barcelona - 1,0 Junio 2015
 AngularJS

Podemos utilizar orgenes de datos en los que la

informacin est relacionada.
Para ello, es necesario que el modelo de datos disponga del
equivalente a "tablas de relacin" que asocian dos tablas
cualesquiera en el modelo relacional de bases de datos.
En nuestro ejemplo anterior podra ser el equivalente a
disponer de estos elementos en el modelo:
$scope.paisesPorCodigo = {
'ES' : 'ESPAA',
'IT' : 'ITALIA',
'UK' : 'R.UNIDO'
};

$scope.codigosPorPais= {
'ESPAA': 'ES',
'ITALIA': 'IT',
'R.UNIDO':'UK'
};

AngularJS

JJD174 Desarrollo WEB con AngularJS- 2014, Netmind SL, Barcelona - 1,0 Junio 2015
 AngularJS

Cada directiva ng-model crea una instancia del objeto

ngModelController.
Que estar disponible para cualquier elemento input de un
formulario de entrada
Tambin se encarga de comprobar si la vista es vlida y si ha sido
modificada por el elemento input.
El controlador analiza el contenido y como las modificaciones
pueden venir de cada uno de los dos lados, existen dos procesos
encargados de dichas transformaciones:
Los $formatters, encargados de "presentar" una vista coherente a
partir del modelo
Los $parsers, cuya misin es justo la contraria.
Al resolver cada directiva de un input se pueden aadir "tareas"
tanto en el lado de los $formatters, como el de los $parsers.

AngularJS

El esquema visual del funcionamiento (aplicado a un objeto Date)

es el siguiente:

JJD174 Desarrollo WEB con AngularJS- 2014, Netmind SL, Barcelona - 1,0 Junio 2015
 AngularJS

Cuando incluimos un elemento input type="date" en un

formulario, AngularJS ofrecer al usuario una interfaz
Que depender del nivel de soporte de HTML5 que tenga el
navegador.
Si ste soporta mostrar un calendario, lo mostrar, y si hemos
establecido valores mximo y/o mnimo para las fechas posibles, los
tendr en cuenta
Si no existe este soporte, el texto introducido debe adecuarse al
formato ISO-8601(yyyy-MM-dd), o sea ao-mes-da.
Si hay una directiva ng-required (o el atributo required), se
comprobar y se intentar convertirlo en string o en fecha nula.
De forma similar, si se actualiza el modelo con una fecha, se
comprobar si sta no es nula y se convertir en cadena en la salida.

Selecciona una fecha de 2014:

<input type="date" id="exampleInput" ng-model="value"
placeholder="yyyy-MM-dd" min="2014-01-01" max="2014-12-31" required />

AngularJS

El seguimiento de los cambios que suceden en el modelo, implica

el control desde que un valor fue inicializado y si ese valor puede
considerarse vlido.
Cuando un valor se inicializa, el controlador lo marca como
pristine, o sea, no modificado.
Esto se realiza mediante la asignacin de la clase CSS ng-
pristine sobre el elemento correspondiente.
Cuando el dato cambia, el valor es marcado como dirty, y se
reemplaza la clase CSS por ng-dirty.
Suministrando nuestras propias clases con estos nombres,
modificar el estado visual de un elemento
La validez del contenido tambin se maneja de la misma forma, y
las clases ng-valid y ng-invalid

De cara a al soporte de dispositivos tipo "touch", tambin maneja dos

clases adicionales: ng-touch y ng-untouched.

JJD174 Desarrollo WEB con AngularJS- 2014, Netmind SL, Barcelona - 1,0 Junio 2015
 AngularJS

AngularJS

ngFormController funciona conjuntamente con

ngModelController para hacer el seguimiento de cada
elemento individual del formulario.
La manera de conseguir que nuestro
objeto ngFormController pase a formar parte
del $scope local, es mediante la asignacin del
atributo name del formulario.
Cada elemento de ese formulario que reciba un atributo name ser
inicializado con su correspondiente ngModelController.
<form name="Formulario">
<label for="entradaTexto">Texto de entrada:</label>
<input type="text" name="entradaTexto1" ng-model="Valor1" />
<br />
<label for="entradaTexto">Texto de entrada:</label>
<input type="text" name="entradaTexto2" ng-model="Valor2" />
</form>

JJD174 Desarrollo WEB con AngularJS- 2014, Netmind SL, Barcelona - 1,0 Junio 2015
 AngularJS

AngularJS

A diferencia de lo que sucede con HTML, en AngularJS podemos

disponer de la capacidad de anidar un formulario dentro de otro
considerado como contenedor.
Como no es posible anidar un elemento form dentro de otro en HTML,
contamos con la directiva ngForm.
Cada formulario que incluya un atributo name se aadir a su
formulario padre, o al $scope si no tuviera formulario padre.
Un formulario anidado se comporta como un bloque compuesto que
expone su informacin de validacin basndose en los campos que
contiene.
Pueden incluirse en formularios contenedores, e incluso programarse
separadamente, e incluirse mediante una directiva ng-include.
Con esta tcnica podemos definir en un bloque de script una plantilla
HTML que ser insertada en tiempo de ejecucin en la posicin que
indiquemos con esa directiva (elemento o atributo).

JJD174 Desarrollo WEB con AngularJS- 2014, Netmind SL, Barcelona - 1,0 Junio 2015
 AngularJS

Plantilla y cdigo podran ser algo as:

<!--Plantilla para ng-include-->
<script type="text/ng-template" id="frmContrasea">
<ng-form name="frmContrasea">
<div ng-show="usuario.password != usuario.password2">
Las contraseas no coinciden
</div>
<label>Contrasea</label>
<input ng-model="usuario.password" type="password" required>
<label>Confirmar contrasea</label>
<input ng-model="usuario.password2" type="password" required>
</ng-form>
</script>

<form name="form1" novalidate>

<label>Datos de autenticacin</label><br/>
<label>Nombre</label>
<input ng-model="usuario.nombre" required>
<ng-include src="'frmContrasea'" />
</form>

AngularJS

Si en un formulario NO indicamos un valor vlido en el

atributo action, AngularJS asume que nosotros vamos a
manejar el envo llamando a una funcin del $scope.
En este caso, AngularJS impedir que el formulario trate de
enviar los datos directamente al servidor. Esta operativa la
podemos conseguir de dos formas:
Mediante una directiva ngclick asignada a un botn
A travs de una directiva ngSubmit dentro del formulario.
Ambas formas son posibles pero excluyentes
Por tanto, hay que tener cuidado de no mezclarlas
Adems, por coherencia, se recomienda utilizar el mismo mtodo de
envo siempre que sea posible.

JJD174 Desarrollo WEB con AngularJS- 2014, Netmind SL, Barcelona - 1,0 Junio 2015
 AngularJS

AngularJS

Pgina de la documentacin oficial dedicada al funcionamiento del objeto

ngModelController:
https://docs.angularjs.org/api/ng/type/ngModel.NgModelController
Fix disconnect between model and view in AngularJS after unbinding:
http://stackoverflow.com/questions/17025725/fix-disconnect-between-model-and-
view-in-angularjs-after-unbinding
The Forms Working Group: http://www.w3.org/MarkUp/Forms/
Sending and retrieving form data: https://developer.mozilla.org/en-
US/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data
Sitio Regular Expressions: http://www.regular-expressions.info/
Documentacin oficial de la directiva Select:
https://docs.angularjs.org/api/ng/directive/select

JJD174 Desarrollo WEB con AngularJS- 2014, Netmind SL, Barcelona - 1,0 Junio 2015
 AngularJS

JJD174 Desarrollo WEB con AngularJS- 2014, Netmind SL, Barcelona - 1,0 Junio 2015