4.4 Angular4

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>
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.
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>
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
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
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
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
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
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.
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}}
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>
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.
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.
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:
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.
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>
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
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

4.4 Angular4

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

4.4 Angular4

Enviado por

Direitos autorais:

Formatos disponíveis

AngularJS

Una plantilla es un fragmento de HTML.

Lo mismo sucede con otras expresiones de cadena que

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

El elemento div puede ser formateado segn lo definido en cualquier

El mismo efecto puede conseguirse mediante la directiva

Veamos esto con un ejemplo sencillo:

Lo que genera una salida como la siguiente:

Adems, estas plantillas pueden utilizar tanto recursos

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

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

Permiten establecer condicionales que se validarn como

Esto nos permite declarar estilos separados para cada caso

Algunos elementos, en especial los de interaccin, han sido

Los formularios tienen varios aadidos interesantes en

Se trata de una posibilidad exclusiva de AngularJS, ya que

<textarea> Posee los mismos atributos que un elemento

Revisemos las directivas que hemos utilizado en ejemplos

ng-app establece el contexto de nuestra aplicacin

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

ng-form nos permite crear formularios anidados.

Vinculacin con eventos de interaccin.

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

Un grupo completo de directivas est pensado para la

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

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

Emulan instrucciones de programacin bien conocidas en la

Antes de utilizar el cdigo HTML, AngularJS realiza una

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

Hay una serie de condiciones que deben darse para que la

Hay una serie de condiciones que deben darse para que la

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

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

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

Segn esto, una de las directivas ms sencillas posible

Un problema con la creacin de directivas personalizadas es

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

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

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

Volviendo a nuestra situacin anterior, le indicamos a Angular que

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

Você também pode gostar