1. Angular Avanzado
Sesion 2
Sergio Castillo Yrizales
@scyrizales

2. Agenda
 Directivas Anidadas
 Eventos
 Trucos en Angular
2

3. Directivas Anidadas
3

4. ¿Como crear Directivas?
4

5. Valores de las propiedades
Propiedad
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
5
Valor
La controladora que se usara para darle ambito al template,
no siempre es necesario

6. Valores de las propiedades
Propiedad
requires
Indica si una directiva depende de otra
link
6
Valor
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

7. Ejemplos (Directiva Anidada)
 Hagamos un tab panel
 http://jsfiddle.net/scyrizales/6C6Mv/
7

8. Eventos
8

9. Eventos
 Se basan en 3 funciones
 $emit
 $broadcast
 $on
9

10. 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.
10

11. $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.
11

12. $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.
12

13. $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
13

14. Event Object
 targetScope - {Scope}: scope Origen de donde




14

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.

15. 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
15

16. 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
16

17. Trucos en Angular
17

18. Tip1: Controladoras + Routing
 Generar dependencias “on the fly”
18

19. Tip1: Controladoras + Routing
 El atributo “resolve” en el routeObject
19

20. 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
20

21. Tip3: Generar un arreglo con
Filter
 Podemos establecer un filtro que genere un
arreglos por nosotros:
 Modo de uso:
21

22. Tip4: ngOptions
 En la directiva select, se puede definir el atributo
ng-options
 La agrupación se da mediante la etiqueta
<optgroup>
22

23. Tip5: Filtros
 Contienen street
 No contienen street
 Contienen street en su propiedad name
 La propiedad name es igual a street
23

24. Tip6: $parent
 Scope: true
 Hija hereda todas las propiedades del padre
 Scope: {}  No hereda nada
 $parent  apunta al scope padre
24

25. Muchas gracias
 Preguntas
 Dudas
 Inquietudes
 scyrizales – twitter, skype, hangout
25

26. Examen
 Teórico, 15 minutos durante la semana.
 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 29/11
26