You are on page 1of 19

AngularJS

AngularJS

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

Una plantilla es un fragmento de HTML.


Carece de otros elementos propios que podemos insertar en una
pgina normal: todo lo que va en la cabecera y la etiqueta <body>.
Adems asumiremos que la plantilla ser "consciente" de su
contexto en el momento de crearla, por lo que "podr contar" con la
presencia de otros elementos disponibles desde ese contexto.
La sintaxis moustache pone en marcha un evaluador de
expresiones.
Esto significa que pueden entender expresiones bsicas por
s mismo (sin enlace alguno)
Por ejemplo: {{ 2 + 3 }} genera un 5 en la salida

AngularJS

Lo mismo sucede con otras expresiones de cadena que


podramos utilizar y que seran evaluadas en tiempo de ejecucin:
Expresiones de cadena concatenadas mediante el signo +
Expresiones de cadena concatenadas con entradas del usuario
Expresiones de cadena que sean reconocidas como parte de elementos
"formateables" de la interfaz de usuario, como los estilos predefinidos
por AngularJS y muchos otros.
Si aadimos el cdigo siguiente a una pgina cualquiera:

<textarea ng-model="entrada" style="width:300px;


height:200px"></textarea>
<span>{{entrada}}</span>
<div class="{{entrada}}">
Esto es modificado visualmente en tiempo de ejecucin
</div>

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

El elemento div puede ser formateado segn lo definido en cualquier


estilo que sea previamente declarado o cargado en la cabecera de la
pgina, ya que el valor del atributo class ser evaluado en tiempo de
ejecucin
Si, por ejemplo, estamos usando Bootstrap, al cambiar la entrada con
valores predefinidos en la librera, estaremos cambiando la salida:

AngularJS

El mismo efecto puede conseguirse mediante la directiva


ng-bind sin utilizar la sintaxis "moustache".
Indica un enlace de un elemento a un contenido cualquiera.
Dos variantes de esta sintaxis son ng-binding-html y ng-
binding-template.
En el primer caso, se evala la expresin entre comillas, pero se
utiliza un mecanismo de seguridad para evitar cdigo malicioso.
AngularJS utiliza un servicio propio llamado $sanitize
Mediante el segundo, podemos vincular expresiones que contienen
ms de un elemento de sintaxis moustache, cosa que no es posible
con ng-binding.

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

Veamos esto con un ejemplo sencillo:


<body ng-app="aplicacion">
<h3>Uso de NgBindingTemplate</h3>
<script>
var app = angular.module("aplicacion", []);
app.controller("Controlador", function ($scope) {
$scope.saludo = "Hola ";
$scope.destinatario = "Mundo!";
});
</script>
<div ng-controller="Controlador">
Saludo: <input type="text" ng-model="saludo"><br>
Destinatario: <input type="text" ng-model="destinatario"><br>
<pre ng-bind-template="{{saludo}}, {{destinatario}}!"></pre>
</div>
</body>

AngularJS

Lo que genera una salida como la siguiente:

Adems, estas plantillas pueden utilizar tanto recursos


propios como globales.
Por ejemplo, podemos aadir una enumeracin a nuestra salida que
ser insertada, igualmente, en tiempo de ejecucin, mediante el
servicio $index:
<li>{{ $index }} .- {{ ciclista.Nombre }} </li>

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

$window nos ofrece un mtodo de acceso adecuado al objeto window


de JavaScript
Debido a la manera en que AngularJS maneja el DOM, es preferible
este mtodo de uso que la invocacin directa tradicional, especialmente
en mtodos de pruebas
Por ejemplo, si queremos evaluar una expresin de modo que llame a
una caja de mensaje, deberemos utilizar este objeto:
<div ng-controller="Controlador">
Nombre: <input ng-model="Nombre" type="text" />
<button ng-click="saludar()">Saludar</button>
</div>
<script>
angular.module("aplicacion", []).
controller("Controlador", function ($window, $scope) {
$scope.Nombre = 'Mundo';
$scope.saludar = function () {
$window.alert('Hola ' + $scope.Nombre);
};
});
</script>

AngularJS

Directivas dependientes de ng-repeat: $first, $last y


$middle.

Permiten establecer condicionales que se validarn como


verdaderos si se trata respectivamente del primero, el ltimo
o cualquier elemento intermedio de una coleccin

Esto nos permite declarar estilos separados para cada caso


que se aplicarn en la salida en funcin de la posicin
ordinal del elemento

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

AngularJS

Algunos elementos, en especial los de interaccin, han sido


"reescritos" en Angular, para aportar funcionalidad adicional.
Esto sucede con <a>, <input>, <select> y <textarea>
Por ejemplo, el elemento <a>, anula el comportamiento
predeterminado (navegacin a enlace) y asigna el comportamiento
real al establecido en una directiva:
<a href="" ng-click="Lista.nuevoCiclista()">Nuevo Corredor</a>
<input> proporciona una variante que, dispone de directivas y da
soporte de HTML5 con compatibilidad hacia atrs hasta IE8,
mediante polyfills.
ng-pattern, ng-required, ng-minlength, ng-maxlength y ng-
change, que se corresponden, salvo la ltima, con sus equivalentes
HTML, pero con algunas mejoras

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

Los formularios tienen varios aadidos interesantes en


AngularJS, especialmente en lo que se refiere a las
validaciones
Estn basadas en la API NgModelController
Se basa en la validacin de elementos individuales del formulario
Podemos utilizar la funcin angular.copy para guardar copias en
memoria de los datos en edicin
Y recuperarlos ante cualquier situacin que lo requiera.
Como AngularJS se integra perfectamente con Bootstrap, podemos
utilizarlo para contar un cierto formato de entrada/salida
Angular controla la validez de esos elementos individuales del
formulario mediante variables propias a las que tenemos acceso por
programacin para comprobar el estado.

AngularJS

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

Se trata de una posibilidad exclusiva de AngularJS, ya que


en HTML no es posible anidar formularios.
Se consigue mediante la directiva ng-form
Se puede usar como elemento HTML, como atributo o como clase.
Garantiza la creacin de elementos internos para ayudar en el
proceso de validacin de las entradas
Tambin analiza las condiciones establecidas en los elementos de
entrada como directivas: ng-maxlegth, etc.
Poseen una directiva ng-submit donde podemos indicarle qu
acciones tomar al enviar los datos del formulario
Sobrescribiendo las predeterminadas, opcionalmente

AngularJS

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

<textarea> Posee los mismos atributos que un elemento


<input>
El elemento <select> dispone de algunas caractersticas
especiales.
Podemos vincular las que seran sus opciones (etiquetas internas
<option>, con controladores, de forma que podamos expresar
colecciones internas mediante binding.
Para programarlo:
Asignamos al elemento contenedor (<select>) un modelo de datos,
mediante ng-model
Utilizamos la directiva ng-selected en una sola etiqueta <option>,
combinada con la directiva ng-repeat
Asignamos a su atributo value un valor mediante sintaxis "moustache"

AngularJS

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

Revisemos las directivas que hemos utilizado en ejemplos


anteriores y la funcionalidad que nos ofrecen:

ng-app establece el contexto de nuestra aplicacin


ng-model nos permite vincular un contenido al modelo de datos
ng-view define la ubicacin de las vistas dentro de un elemento
contenedor
ng-controller es otra forma de indicar qu controlador debe utilizar
un determinado bloque
ng-repeat nos permite recorrer una coleccin y crear
dinmicamente elementos del DOM para representar su contenido
ng-include nos ha servido para establecer que una vista deba
incluir otra vista diferente, escrita en fichero aparte

AngularJS

ng-src nos ha servido para hacer referencia a un recurso que el


DOM podra no interpretar correctamente
Tambin en los casos en los que una expresin moustache forme
parte de una URL.
Dispone de un equivalente para elementos <a>, la directiva ng-href,
que no intenta evaluar el contenido del atributo hasta que el DOM
no est totalmente cargado.
ng-change se produce cada vez que el contenido del elemento
donde se encuentra ha cambiado
ng-binding enlaza directamente la expresin del valor de ese
atributo con el contenido
ng-class permite asignar clases dinmicamente
mediante databinding
Permite que la asignacin se refiera a una cadena, a un array de
cadenas o a un objeto con propiedades tipo clave/valor.
En este ltimo caso, cada clave que tenga un valor true ser usada como
nombre de la clase a aplicar.

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

ng-form nos permite crear formularios anidados.


ng-selected, al utilizar tcnicas de databinding con una coleccin
en un elemento <select> nos permite predeterminar uno de los
elementos en la carga inicial
ng-submit sustituye el comportamiento predeterminado de envo
en un formulario, y nos permite aplicar lgica de negocio.
ng-pattern, ng-required, ng-minlength, ng-maxlength se
corresponden con sus equivalentes HTML5 (sin el prefijo ng-) pero
las complementan.
Se usan sobre todo para establecer condiciones iniciales.
ng-value se utiliza con los elementos <select> e <input
type="radio"> para establecer el valor del atributo value mediante
databinding.

AngularJS

Vinculacin con eventos de interaccin.


Un caso especialmente interesante es el de las directivas que
permiten vincular eventos, como es el caso de ng-click, ng-
mouse*, ng-key* y alguna otra.
Por ejemplo, podemos crear una funcionalidad de contador, sin
necesidad de recurrir a cdigo adicional.

<button ng-click="contador = contador + 1" ng-init="contador = 0">


Incrementar contador
</button>
Contador: {{contador}}

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

Un grupo completo de directivas est pensado para la


presentacin ms avanzada de la informacin
Esto sucede con las directivas ng-show y ng-hide.
Muestran/ocultan elementos dependiendo de una
condicin que debe evaluarse a true/false dentro de la
expresin de la directiva:

<div ng-show="leerUsuario() == 1">Se muestra para el valor


1</div>

Parecido es el funcionamiento de ng-class-odd y ng-class-


even que se usan en blucles de lectura para distinguir filas
en la salida (papel pijama)

AngularJS

Emulan instrucciones de programacin bien conocidas en la


mayora de los lenguajes.
Esto sucede con ng-if y ng-switch que son los "alter-ego" de sus
correspondientes en muchos lenguajes populares (JavaScript,
incluido).
ng-if, puede destruir o reconstruir un fragmento del DOM
dependiendo de la expresin
Difiere de ng-hide y ng-show en que esta directiva elimina o recrea
completamente el DOM al que se aplica, en lugar de cambiarlo
Seleccionar: <input type="checkbox" ng-model="checked" ng-
init="checked=true" /> <br />
Mostrar cuando est marcado:
<span ng-if="checked">
Este contenido se borra al desmarcar el "checkbox"
</span>

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

AngularJS

Antes de utilizar el cdigo HTML, AngularJS realiza una


"compilacin" de ese cdigo

Consiste en buscar en todas las etiquetas, atributos, clases y


comentarios identificadores que puedan ser asociados a su lista de
directivas registradas.
Si stas disponen de cdigo JavaScript vinculado, el cdigo ser
interpretado y asignado adecuadamente.
Cuando se creamos una directiva y luego la utilizamos en el cdigo,
podemos afirmar que la definicin de la directiva es interpretada
una sola vez
Mientras que el cdigo que incluimos en la propiedad link se
llamar tantas veces como usemos esa directiva.

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

Hay una serie de condiciones que deben darse para que la


directiva funcione adecuadamente
Existe una convencin de nomenclatura que debe seguirse.
Cuando creamos una directiva con la sintaxis camelCase, el
analizador sintctico busca las variantes en varios formatos posibles.
Si la directiva se llama ngDirectiva en la parte JavaScript, en el
cdigo HTML el analizador podr manejar las variantes:
ng-directiva, ng:directiva, ng_directiva, data-ng-directiva, x-
ng-directiva indistintamente.
No obstante, los formatos ng-Directiva y data-ng-directiva son
los recomendados oficialmente
La directiva debe pertenecer a un mdulo y registrarse
mediante una llamada al mtodo directive del objeto module.
En ese registro, indicaremos mediante una funcin cul es el
comportamiento de la directiva en tiempo de ejecucin.

AngularJS

Hay una serie de condiciones que deben darse para que la


directiva funcione adecuadamente

Durante la definicin de la directiva, debemos establecer si la vamos


a utilizar como un elemento propio HTML, un atributo, una clase o
incluso un comentario.
Esto se realiza indicndole las restricciones en su definicin. La
indicacin de uso recomendada es en la forma de elemento y/o
atributo.
Adems de las restricciones, la funcionalidad (y posiblemente, ms
cosas), vendr expresada por la funcin, que devolver un objeto
donde se indican todas las caractersticas: restricciones, enlace (link),
plantillas, etc.
La directiva ser utilizada en la Interfaz de Usuario, dependiendo de
sus restricciones.

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

En la definicin, podemos devolver una funcin, o un objeto de


configuracin (ms completo y configurable)
El prototipo de creacin puede seguir el patrn siguiente:
angular.module('miApp', [])
.directive('miDirectiva', ['api', function(api) {
// Aqu van las labores de inicializacin de la directiva
return {
priority : 3,
terminal : false,
template: '<div><h3>{{title}}</h3></div>',
templateUrl : 'miDirectiva.html',
replace : true,
compile : function (element, attributes, transclude) {},
link : function ($scope, $element, $attrs) {},
scope : true,
controller : function ($scope, $element, $attrs) {},
require : 'miDirectiva',
transclude : true
};
}]);

AngularJS

La lista completa de valores que pueden aparecer en el objeto de


configuracin es la siguiente:

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

Segn esto, una de las directivas ms sencillas posible


contendra lo siguiente:
<body ng-app="miApp">
<h3>Creacin de directivas (inicial)</h3>
<mi-caja-personalizada></mi-caja-personalizada>
<script>
angular.module("miApp", []).
directive('miCajaPersonalizada', function () {
return {
restrict: 'E',
replace: true,
template: '<span>Caja personalizada</span>'
};
});
</script>
</body>

AngularJS

Un problema con la creacin de directivas personalizadas es


que se pueden producir conflictos en el uso del objeto
$scope
Y es posible que nuestra directiva deba de comunicar
informacin a otras directivas.
Las directivas crean un elemento scope, propio de mbito
local.
Este scope es hijo del $scope vinculado con el controlador
del elemento contenedor
En el ejemplo anterior, en el elemento <body>, pero si hubiera
existido un elemento contenedor con un controlador definido, ste
sera el $scope padre
Esto es debido a que los $scopes estn jerarquizados segn la
propia estructura de los elementos del DOM.

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

En general, una pgina puede tener varios $scopes hijos (anidados si es


necesario)
Estos pueden acceder a las propiedades y funciones del $scope padre.
Si un elemento vinculado a un controlador incluye otro que est asociado a otro
controlador distinto, el $scope del segundo podr acceder a las propiedades del
primero.
Podemos definir nuestro propio $scope al crear la directiva modificndola de la
forma siguiente:
angular.module("miApp", []).
directive('miCajaPersonalizada', function () {
return {
restrict: 'E',
replace: true,
scope: {
textoABuscar: '=',
},
template: '<span>Caja personalizada</span>'
};
});

AngularJS

En el scope propio de la directiva, declaramos un elemento pblico que va a


servir para comunicarnos con el exterior: textoABuscar

El significado del signo igual (=) es que deseamos que esos elementos se
puedan utilizar en mecanismos de TwoWayBinding (enlace bidireccional)

De acuerdo con esta definicin, en la parte HTML, podremos escribir cdigo


similar a este, que sigue la normativa de nomenclatura propia de AngularJS, o
sea, textoABuscar se convierte en el atributo texto-a-buscar y as
sucesivamente:

<mi-caja-personalizada ng-texto-a-buscar="xxx">
</mi-caja-personalizada>

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

Volviendo a nuestra situacin anterior, le indicamos a Angular que


cualquier llamada externa al contexto podr utilizar el mecanismo de
enlace bidireccional con las variables locales (textoABuscar), para
asignar o leer datos.
Esta es la forma en que nuestras propias directivas se comunican con el
mundo exterior a su contexto.
En el prototipo de ejemplo anterior, el valor asignado (xxx), no es una
cadena, sino el nombre de una variable que pertenece a otro contexto
superior.
Cuando el valor de la variable xxx cambie, lo har tambin el valor
de textoABuscar.
Y esto funciona en ambas direcciones

AngularJS

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

https://docs.angularjs.org/api/ngSanitize/service/$sanitize Pgina de la documentacin


oficial dedicada a los servicios de comprobacin de seguridad en Angular
http://learn.shayhowe.com/advanced-html-css/feature-support-polyfills/ Feature Support &
Polyfills
http://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-
expressions/ Function Declarations vs. Function Expressions
http://www.johnpapa.net/angular-and-progressive-saving/ Angular and Progressive Saving
https://docs.angularjs.org/guide/directive Documentacin oficial para las directivas de
AngularJS
http://www.sitepoint.com/practical-guide-angularjs-directives/ A Practical Guide to
AngularJS Directives
http://sandipchitale.blogspot.com.es/2014/03/javascript-object-diagram-integration.html
JavaScript Object Diagram integration with Chrome Devtools | Sources Tab | Scope
Variables section
https://chrome.google.com/webstore/detail/angularjs-
batarang/ighdmehidhipcmcojjgiloacoafjmpfk AngularJS Batarang
http://w3c.github.io/webcomponents/explainer/ Introduction to Web Components

AngularJS

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