1. Angular Avanzado Sesion 2Sergio Castillo Yrizales @scyrizales

2. Agenda Directivas Anidadas Eventos Trucos en Angular2 3. Directivas Anidadas3 4. Como crear Directivas?4 5. Valores de las propiedades Propiedad restrictPuede ser A,E,C y M que significan attribute, element, class, o commentscopeCada 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 funcin o expresintemplateLa base para escribir el cdigo que usar la directivareplaceBoolean que indica si se debe reemplazar el html original por el html generado por el templatetranscludeIndica si se debe preservar el contenido de la declaracin de la directiva en el html original, se usa en conjunto con ng-transcludecontroller 5ValorLa controladora que se usara para darle ambito al template, no siempre es necesario 6. Valores de las propiedades Propiedad requiresIndica si una directiva depende de otralink6Valor Funcin que realiza la configuracin 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. Eventos8 9. Eventos Se basan en 3 funciones $emit $broadcast $on9 10. Cadena de Herencia Desde el lugar donde se tome el punto dereferencia, hay dos cadenas de herencias Esto se cumple para las controladoras y lasdirectivas Depende de hacia donde nos queramoscomunicar hay un mtodo distinto.10 11. $emit(evName, args[]) Envia un evento hacia arriba en la cadena descopes Va desde el punto de origen, hacia el rootscope Una directiva la puede usar para comunicarsecon la controladora padre.11 12. $broadcast(evName, args[]) Envia un evento hacia abajo en la cadena descopes Va desde el punto de origen, hacia el rootscope Una controladora la puede usar paracomunicarse con controladoras hijas o directivas.12 13. $on(name, listenerFn) Permite escuchar un evento listenerFn es una funcion con el siguienteformato: function(event, args...) The event es un objeto Event que tiene variaspropiedades13 14. Event Object targetScope - {Scope}: scope Origen de donde 14fue $emit-ido o $broadcast-eado. currentScope - {Scope}: el scope en el que se llama la funcin $on. name - {string}: nombre del Evento. stopPropagation - {function=}: llamar funcin stopPropagation cancelara toda posible propagacin (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 unacontroladora o directiva para poder utilizar el $broadcast como un event hub global Lo ideal seria encapsularlo en un servicio parapoder inyectarlo a voluntad sin exponer las demas funciones del rootScope15 16. Ejemplo Refactorizar el ejemplo del carrito Crear una directiva que muestre el conteo deitems Construir un servicio que se comporte comoEvent Hub Que el conteo se actualize mediante el EventHub16 17. Trucos en Angular17 18. Tip1: Controladoras + Routing Generar dependencias on the fly18 19. Tip1: Controladoras + Routing El atributo resolve en el routeObject19 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 $odd20 21. Tip3: Generar un arreglo con Filter Podemos establecer un filtro que genere unarreglos por nosotros: Modo de uso:21 22. Tip4: ngOptions En la directiva select, se puede definir el atributong-options La agrupacin se da mediante la etiqueta22 23. Tip5: Filtros Contienen street No contienen street Contienen street en su propiedad name La propiedad name es igual a street23 24. Tip6: $parent Scope: true Hija hereda todas las propiedades del padre Scope: {} No hereda nada $parent apunta al scope padre24 25. Muchas gracias Preguntas Dudas Inquietudes scyrizales twitter, skype, hangout25 26. Examen Terico, 15 minutos durante la semana. Prctico: Realizar un blog, Login, una directiva que escuche cuando alguien selogea y de la bienvenida CRUD Posts Usar filtros para la fecha Usar routing, services, controllers, directives Viernes 29/11 26