• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Angular Conceptos Practicos 2
 

Angular Conceptos Practicos 2

on

  • 354 views

 

Statistics

Views

Total Views
354
Views on SlideShare
354
Embed Views
0

Actions

Likes
1
Downloads
15
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Angular Conceptos Practicos 2 Angular Conceptos Practicos 2 Presentation Transcript

    • Conceptos Prácticos 2
    •  Directivas II  Explicando la Magia  Eventos  Trucos en Angular
    • 4
    • Propiedad 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 5
    • Propiedad 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 6
    •  Las directivas se pueden usar incrementar la reusabilidad del codigo ◦ Ejemplo: ◦ http://codepen.io/scyrizales/full/egdsB para
    •  Las directivas se pueden usar para implementar el doble binding entre Angular y componentes de terceros ◦ Ejemplo: ◦ http://codepen.io/brunoscopelliti/full/zIstF
    • 9
    •   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 10
    •  Entradas de usuario: ◦ Mouse, keyboard, etc.  Eventos de Navegador: ◦ timeout, blur, etc.  Llamadas Ajax: ◦ json, templates, etc… 11
    •    $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. 12
    •   angular.element(domElement).scope() Sobre este scope, podemos aplicar las funciones $apply y $digest. 13
    •  Para evitar los problemas de usar el $apply podemos crear esta función en el rootScope 14
    •  Se basan en 3 funciones ◦ $emit ◦ $broadcast ◦ $on 16
    •    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. 17
    •    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. 18
    •    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. 19
    •   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 20
    •       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 fl ag to true. defaultPrevented - {boolean}: true if preventDefault was called. 21
    •   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 22
    •     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 23
    •  Generar dependencias “on the fly” 25
    •  El atributo “resolve” en el routeObject 26
    •  $index: Contador de iteraciones. Inicia en 0  $first: flag  $last: flag  $middle: flag (cualquier elemento entre first y last  $even $odd 27
    •   Podemos establecer un filtro que genere un arreglos por nosotros: Modo de uso: 28
    •   En la directiva select, se puede definir el atributo ng-options La agrupación se da mediante la etiqueta <optgroup> 29
    •     Contienen street No contienen street Contienen street en su propiedad name La propiedad name es igual a street 30
    •  Scope: true ◦ Hija hereda todas las propiedades del padre  Scope: {}  No hereda nada ◦ $parent  apunta al scope padre 31
    •  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 32
    • ¿Alguna pregunta? Sergio Castillo Front End Developer @scyrizales