angular conceptos practicos 2
TRANSCRIPT
AngularJSConceptos Prácticos 2
Directivas II
Explicando la Magia
Eventos
Trucos en Angular
Agenda
Directivas II
4
¿Como crear Directivas?
5
Valores de las propiedadesPropiedad Valor
restrict Puede ser A,E,C y M que significan attribute, element, class, o comment
scope Cada subpropiedad puede tener cualquiera de estos 3 valores:•@: el valor es de un solo sentido•=: el valor es de dos sentidos•&: guarda una referencia a una función o expresión
template La base para escribir el código que usará la directiva
replace Boolean que indica si se debe reemplazar el html original por el html generado por el template
transclude Indica si se debe preservar el contenido de la declaración de la directiva en el html original, se usa en conjunto con ng-transclude
controller La controladora que se usara para darle ambito al template, no siempre es necesario
6
Valores de las propiedadesPropiedad Valor
requires Indica si una directiva depende de otra
link Función que realiza la configuración inicial de la directiva. Recibe cuatro parametros:function link(scope, iElement, iAttrs, controller)•scope: indica el objeto creado por la propiedad scope.•iElement: se refiere al objeto base de la controladora. Este vienen encapsulado en jqLite o Jquery (si es que se incluyo en el proyecto)•iAttrs: los atributos que se asignaron al html original de la directiva declarada•Controller: el controller de la directiva padre. Solo cuando se ha establecido la propiedad requires
Las directivas se pueden usar para incrementar la reusabilidad del codigo
◦ Ejemplo:◦ http://codepen.io/scyrizales/full/egdsB
Casos de Uso
Las directivas se pueden usar para implementar el doble binding entre Angular y componentes de terceros
◦ Ejemplo:◦ http://codepen.io/brunoscopelliti/full/zIstF
Casos de Uso
9
Explicando la magia
10
Explicando el Data Binding
Cada vez que cambia el scope, se actualiza la vista.
Cada vez que un “major event” sucede en la aplicación, y luego de que sucede, se ejecuta una operación “digest” y se actualiza el scope
11
Major Events Entradas de usuario:
◦ Mouse, keyboard, etc.
Eventos de Navegador: ◦ timeout, blur, etc.
Llamadas Ajax: ◦ json, templates, etc…
12
$apply, $digest and $$phase $digest es un metodo interno que realiza la
verificación de los cambios entre la vista y el scope y hace las respectivas actualizaciones al scope
$apply sirve para llamar desde fuera al $digest. Cuando usamos otras librerias externas, es necesario llamar a $apply
$$phase es un indicador de si esta corriendo un $digest. Debemos tenerlo en cuenta para no aplicar $apply porque nos dará un error.
13
Llamando a Angular desde fuera
angular.element(domElement).scope()
Sobre este scope, podemos aplicar las funciones $apply y $digest.
14
SafeApply Para evitar los problemas de usar el $apply
podemos crear esta función en el rootScope
Eventos
16
Eventos Se basan en 3 funciones
◦ $emit
◦ $broadcast
◦ $on
17
Cadena de Herencia Desde el lugar donde se tome el punto de
referencia, hay dos cadenas de herencias
Esto se cumple para las controladoras y las directivas
Depende de hacia donde nos queramos comunicar hay un método distinto.
18
$emit(evName, args[]) Envia un evento hacia arriba en la cadena
de scopes
Va desde el punto de origen, hacia el rootscope
Una directiva la puede usar para comunicarse con la controladora padre.
19
$broadcast(evName, args[]) Envia un evento hacia abajo en la cadena
de scopes
Va desde el punto de origen, hacia el rootscope
Una controladora la puede usar para comunicarse con controladoras hijas o directivas.
20
$on(name, listenerFn) Permite escuchar un evento
listenerFn es una funcion con el siguiente formato:◦ function(event, args...)
The event es un objeto Event que tiene varias propiedades
21
Event Object targetScope - {Scope}: scope Origen de donde
fue $emit-ido o $broadcast-eado. currentScope - {Scope}: el scope en el que se
llama la función $on. name - {string}: nombre del Evento. stopPropagation - {function=}: llamar función
stopPropagation cancelara toda posible propagación (solo para eventos que fueron $emit-idos).
preventDefault - {function}: calling preventDefault sets defaultPrevented flag to true.
defaultPrevented - {boolean}: true if preventDefault was called.
22
Usando $rootScope Se puede inyectar el rootScope en una
controladora o directiva para poder utilizar el $broadcast como un event hub global
Lo ideal seria encapsularlo en un servicio para poder inyectarlo a voluntad sin exponer las demas funciones del rootScope
23
Ejemplo Refactorizar el ejemplo del carrito
Crear una directiva que muestre el conteo de items
Construir un servicio que se comporte como Event Hub
Que el conteo se actualize mediante el EventHub
Trucos en Angular
25
Tip1: Controladoras + Routing Generar dependencias “on the fly”
26
Tip1: Controladoras + Routing El atributo “resolve” en el routeObject
27
Tip2: Opciones ng-repeat $index: Contador de iteraciones. Inicia en 0
$first: flag
$last: flag
$middle: flag (cualquier elemento entre first y last
$even $odd
28
Tip3: Generar un arreglo con Filter Podemos establecer un filtro que genere un
arreglos por nosotros:
Modo de uso:
29
Tip4: ngOptions En la directiva select, se puede definir el
atributo ng-options
La agrupación se da mediante la etiqueta <optgroup>
30
Tip5: Filtros Contienen street No contienen street Contienen street en su propiedad name La propiedad name es igual a street
31
Tip6: $parent
Scope: true◦ Hija hereda todas las propiedades del padre
Scope: {} No hereda nada◦ $parent apunta al scope padre
32
Examen Teórico, 15 minutos durante la semana.
◦ Basado en las diapositivas
Práctico:◦ Realizar un blog, ◦ Login, una directiva que escuche cuando alguien
se logea y de la bienvenida◦ CRUD Posts◦ Usar filtros para la fecha◦ Usar routing, services, controllers, directives◦ Viernes 28/02
Muchas Gracias¿Alguna pregunta?
Sergio CastilloFront End Developer@scyrizales