Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Advanced angular 2

1,012 views

Published on

  • Be the first to comment

Advanced angular 2

  1. 1. Angular Avanzado Sesion 2 Sergio Castillo Yrizales @scyrizales
  2. 2. Agenda  Directivas Anidadas  Eventos  Trucos en Angular 2
  3. 3. Directivas Anidadas 3
  4. 4. ¿Como crear Directivas? 4
  5. 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. 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. 7. Ejemplos (Directiva Anidada)  Hagamos un tab panel  http://jsfiddle.net/scyrizales/6C6Mv/ 7
  8. 8. Eventos 8
  9. 9. Eventos  Se basan en 3 funciones  $emit  $broadcast  $on 9
  10. 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. 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. 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. 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. 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. 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. 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. 17. Trucos en Angular 17
  18. 18. Tip1: Controladoras + Routing  Generar dependencias “on the fly” 18
  19. 19. Tip1: Controladoras + Routing  El atributo “resolve” en el routeObject 19
  20. 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. 21. Tip3: Generar un arreglo con Filter  Podemos establecer un filtro que genere un arreglos por nosotros:  Modo de uso: 21
  22. 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. 23. Tip5: Filtros  Contienen street  No contienen street  Contienen street en su propiedad name  La propiedad name es igual a street 23
  24. 24. Tip6: $parent  Scope: true  Hija hereda todas las propiedades del padre  Scope: {}  No hereda nada  $parent  apunta al scope padre 24
  25. 25. Muchas gracias  Preguntas  Dudas  Inquietudes  scyrizales – twitter, skype, hangout 25
  26. 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

×