Javascript + Angular Sesion 5
Upcoming SlideShare
Loading in...5
×
 

Javascript + Angular Sesion 5

on

  • 622 views

 

Statistics

Views

Total Views
622
Views on SlideShare
622
Embed Views
0

Actions

Likes
0
Downloads
25
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

Javascript + Angular Sesion 5 Javascript + Angular Sesion 5 Presentation Transcript

  • Directivas Javascript + Angular Sesion 5 Sergio Castillo Yrizales @scyrizales
  • Agenda 2  Directivas
  • Directivas 3
  • ¿Qué es una Directiva? 4  Las directivas es lo que hace diferente a AngularJS  Permiten encapsular funcionalidad en puro html.
  • Razones para escribir directivas 5  Necesidades especiales  Imaginen poder usar este código para compartir un mismo formulario en cualquier parte de su aplicación
  • Razones para escribir directivas 6  Encapsular un plugin de otra libreria  La directiva no existe  Las directivas que existen no cumplen con las necesidades.
  • ¿Como crear Directivas? 7
  • Valores de las propiedades 8 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
  • Valores de las propiedades 9 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
  • Jerarquía de scopes 10  Al usar directivas, se crean nuevos scopes, o se heredan los scopes padres.  Si al definir la directiva, no se usa la propiedad scope, la directiva crea un nuevo scope que hereda todas las propiedades del scope de la controladora que contiene a la directiva.  Al momento de usar la propiedad scope, se pierde toda conexión con el scope padre, y se genera un scope independiente para la directiva.
  • Usando $watch 11  El método $watch (forma parte del scope) sirve para verificar cambios en alguna propiedad del scope.  La sintaxis es:  $scope.$watch(‘propiedad’, function(value){ });  La funcion suscrita es la forma de realizar los cambios necesarios ante un cambio en la propiedad suscrita  Se puede usar para verificar cambios en propiedades de la controladora padre inclusive.
  • Ejemplos (Directiva Simple) 12  Hagamos una calculadora  http://jsfiddle.net/scyrizales/mUJhL/
  • Ejemplos (Directiva Simple) 13  Hagamos un time formatter  http://jsfiddle.net/scyrizales/rUbsE/
  • Ejemplos (Directiva Anidada) 14  Hagamos un tab panel  http://jsfiddle.net/scyrizales/6C6Mv/
  • Modifiquemos el carrito 15  Agreguemosle el tab al carrito  http://jsfiddle.net/scyrizales/hRDQj/
  • Muchas gracias Y que esta luz os ilumine donde las otras no puedan… 16