SlideShare a Scribd company logo
1 of 16
Download to read offline
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

More Related Content

Viewers also liked

MARCAQuiz Appcircus
MARCAQuiz AppcircusMARCAQuiz Appcircus
MARCAQuiz AppcircusQuizlyse
 
Red social online como entorno virtual de aprendizaje en la Comunicación
Red social online como entorno virtual de aprendizaje en la ComunicaciónRed social online como entorno virtual de aprendizaje en la Comunicación
Red social online como entorno virtual de aprendizaje en la ComunicaciónJose Luis Lopez Aguirre
 
Tema 5 os espazos do sector primario 2014-15
Tema 5 os espazos do sector primario 2014-15Tema 5 os espazos do sector primario 2014-15
Tema 5 os espazos do sector primario 2014-15santiago
 
Redes12 identidad digital y comunidades virtuales ver 1.0
Redes12 identidad digital y comunidades virtuales ver 1.0Redes12 identidad digital y comunidades virtuales ver 1.0
Redes12 identidad digital y comunidades virtuales ver 1.0Miguel Gea
 
Llegan los Nuevos Dominios .eus y .gal para Euskadi y Galicia
Llegan los Nuevos Dominios .eus y .gal para Euskadi y GaliciaLlegan los Nuevos Dominios .eus y .gal para Euskadi y Galicia
Llegan los Nuevos Dominios .eus y .gal para Euskadi y GaliciaNominalia
 
Blinkie con animacion shop
Blinkie con animacion shopBlinkie con animacion shop
Blinkie con animacion shopXanarts
 
sondatge del Centre d'Estudis d'Opinió (CEO).
 sondatge del Centre d'Estudis d'Opinió (CEO). sondatge del Centre d'Estudis d'Opinió (CEO).
sondatge del Centre d'Estudis d'Opinió (CEO).josep maria lopez carrillo
 
Ejercicios de representacion de funciones
Ejercicios de representacion de funcionesEjercicios de representacion de funciones
Ejercicios de representacion de funcionesEducación
 
EL DAÑO POR EL ABUSO DE LA POSICIÓN DOMINANTE DEL ESTADO, EN EL ERROR ELECTRÓ...
EL DAÑO POR EL ABUSO DE LA POSICIÓN DOMINANTE DEL ESTADO, EN EL ERROR ELECTRÓ...EL DAÑO POR EL ABUSO DE LA POSICIÓN DOMINANTE DEL ESTADO, EN EL ERROR ELECTRÓ...
EL DAÑO POR EL ABUSO DE LA POSICIÓN DOMINANTE DEL ESTADO, EN EL ERROR ELECTRÓ...Alexander Díaz García
 
Audy castaneda presentacion profesional modulo 10 fatla
Audy castaneda presentacion profesional modulo 10 fatlaAudy castaneda presentacion profesional modulo 10 fatla
Audy castaneda presentacion profesional modulo 10 fatlaAudy Castaneda
 

Viewers also liked (20)

El universo
El universoEl universo
El universo
 
MARCAQuiz Appcircus
MARCAQuiz AppcircusMARCAQuiz Appcircus
MARCAQuiz Appcircus
 
Red social online como entorno virtual de aprendizaje en la Comunicación
Red social online como entorno virtual de aprendizaje en la ComunicaciónRed social online como entorno virtual de aprendizaje en la Comunicación
Red social online como entorno virtual de aprendizaje en la Comunicación
 
Bloque cero
Bloque ceroBloque cero
Bloque cero
 
Tema 5 os espazos do sector primario 2014-15
Tema 5 os espazos do sector primario 2014-15Tema 5 os espazos do sector primario 2014-15
Tema 5 os espazos do sector primario 2014-15
 
Dionisos
Dionisos Dionisos
Dionisos
 
Redes12 identidad digital y comunidades virtuales ver 1.0
Redes12 identidad digital y comunidades virtuales ver 1.0Redes12 identidad digital y comunidades virtuales ver 1.0
Redes12 identidad digital y comunidades virtuales ver 1.0
 
Tiempos verbales
Tiempos verbalesTiempos verbales
Tiempos verbales
 
Llegan los Nuevos Dominios .eus y .gal para Euskadi y Galicia
Llegan los Nuevos Dominios .eus y .gal para Euskadi y GaliciaLlegan los Nuevos Dominios .eus y .gal para Euskadi y Galicia
Llegan los Nuevos Dominios .eus y .gal para Euskadi y Galicia
 
Proyecto: Programa de Capacitación a Docentes de Postgrado de la Universidad ...
Proyecto: Programa de Capacitación a Docentes de Postgrado de la Universidad ...Proyecto: Programa de Capacitación a Docentes de Postgrado de la Universidad ...
Proyecto: Programa de Capacitación a Docentes de Postgrado de la Universidad ...
 
Emestica ernesto proyecto
Emestica ernesto proyectoEmestica ernesto proyecto
Emestica ernesto proyecto
 
El libro de la almohada
El libro de la almohadaEl libro de la almohada
El libro de la almohada
 
Capitulo 4
Capitulo 4Capitulo 4
Capitulo 4
 
Nou tríptic.
Nou tríptic.Nou tríptic.
Nou tríptic.
 
Blinkie con animacion shop
Blinkie con animacion shopBlinkie con animacion shop
Blinkie con animacion shop
 
sondatge del Centre d'Estudis d'Opinió (CEO).
 sondatge del Centre d'Estudis d'Opinió (CEO). sondatge del Centre d'Estudis d'Opinió (CEO).
sondatge del Centre d'Estudis d'Opinió (CEO).
 
Ejercicios de representacion de funciones
Ejercicios de representacion de funcionesEjercicios de representacion de funciones
Ejercicios de representacion de funciones
 
EL DAÑO POR EL ABUSO DE LA POSICIÓN DOMINANTE DEL ESTADO, EN EL ERROR ELECTRÓ...
EL DAÑO POR EL ABUSO DE LA POSICIÓN DOMINANTE DEL ESTADO, EN EL ERROR ELECTRÓ...EL DAÑO POR EL ABUSO DE LA POSICIÓN DOMINANTE DEL ESTADO, EN EL ERROR ELECTRÓ...
EL DAÑO POR EL ABUSO DE LA POSICIÓN DOMINANTE DEL ESTADO, EN EL ERROR ELECTRÓ...
 
Soicos Presentacion
Soicos PresentacionSoicos Presentacion
Soicos Presentacion
 
Audy castaneda presentacion profesional modulo 10 fatla
Audy castaneda presentacion profesional modulo 10 fatlaAudy castaneda presentacion profesional modulo 10 fatla
Audy castaneda presentacion profesional modulo 10 fatla
 

Similar to Javascript + Angular Sesion 5

Como usar el Angular CLI
Como usar el Angular CLIComo usar el Angular CLI
Como usar el Angular CLIDaniel Marin
 
Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...
Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...
Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...Corporacion de Industrias Tecnologicas S.A.
 
React Hooks ¿Por donde empezar?
React Hooks ¿Por donde empezar?React Hooks ¿Por donde empezar?
React Hooks ¿Por donde empezar?Adrian Diaz Cervera
 
Introduccion a AngularJS
Introduccion a AngularJSIntroduccion a AngularJS
Introduccion a AngularJSOscar Gensollen
 
Resumen Framework, Maven, Anotaciones de spring.pptx
Resumen Framework, Maven, Anotaciones de spring.pptxResumen Framework, Maven, Anotaciones de spring.pptx
Resumen Framework, Maven, Anotaciones de spring.pptxEmanuelGauteroMaponi
 
Rest api con spring boot en 40’
Rest api con spring boot en 40’Rest api con spring boot en 40’
Rest api con spring boot en 40’Sebastian Bogado
 
Novedades de ASP.NET MVC6
Novedades de ASP.NET MVC6Novedades de ASP.NET MVC6
Novedades de ASP.NET MVC6Eduard Tomàs
 
MVC & ASP.NET (Spanish)
MVC & ASP.NET (Spanish)MVC & ASP.NET (Spanish)
MVC & ASP.NET (Spanish)Senior Dev
 
Mis primeros pasos con Symfony 2
Mis primeros pasos con Symfony 2Mis primeros pasos con Symfony 2
Mis primeros pasos con Symfony 2Edgar Dueñas
 
Introduccion, Instalacion, Configuracion e Implementacion Framework ZanPHP IT...
Introduccion, Instalacion, Configuracion e Implementacion Framework ZanPHP IT...Introduccion, Instalacion, Configuracion e Implementacion Framework ZanPHP IT...
Introduccion, Instalacion, Configuracion e Implementacion Framework ZanPHP IT...JaenFrankcezco
 
Probando aplicaciones AngularJS
Probando aplicaciones AngularJSProbando aplicaciones AngularJS
Probando aplicaciones AngularJSRodrigo Pimentel
 
Patrones de diseño II
Patrones de diseño IIPatrones de diseño II
Patrones de diseño IIkaolong
 

Similar to Javascript + Angular Sesion 5 (20)

Advanced angular 1
Advanced angular 1Advanced angular 1
Advanced angular 1
 
Como usar el Angular CLI
Como usar el Angular CLIComo usar el Angular CLI
Como usar el Angular CLI
 
Advanced angular 2
Advanced angular 2Advanced angular 2
Advanced angular 2
 
Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...
Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...
Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...
 
React Hooks ¿Por donde empezar?
React Hooks ¿Por donde empezar?React Hooks ¿Por donde empezar?
React Hooks ¿Por donde empezar?
 
Introduccion a AngularJS
Introduccion a AngularJSIntroduccion a AngularJS
Introduccion a AngularJS
 
Resumen Framework, Maven, Anotaciones de spring.pptx
Resumen Framework, Maven, Anotaciones de spring.pptxResumen Framework, Maven, Anotaciones de spring.pptx
Resumen Framework, Maven, Anotaciones de spring.pptx
 
Rest api con spring boot en 40’
Rest api con spring boot en 40’Rest api con spring boot en 40’
Rest api con spring boot en 40’
 
Novedades de ASP.NET MVC6
Novedades de ASP.NET MVC6Novedades de ASP.NET MVC6
Novedades de ASP.NET MVC6
 
MVC & ASP.NET (Spanish)
MVC & ASP.NET (Spanish)MVC & ASP.NET (Spanish)
MVC & ASP.NET (Spanish)
 
Introducción a Angular 6
Introducción a Angular 6Introducción a Angular 6
Introducción a Angular 6
 
Mis primeros pasos con Symfony 2
Mis primeros pasos con Symfony 2Mis primeros pasos con Symfony 2
Mis primeros pasos con Symfony 2
 
Patrones de diseño
Patrones de diseñoPatrones de diseño
Patrones de diseño
 
Curso AngularJS - 4. filtros y servicios
Curso AngularJS - 4. filtros y serviciosCurso AngularJS - 4. filtros y servicios
Curso AngularJS - 4. filtros y servicios
 
Strust
StrustStrust
Strust
 
Introduccion, Instalacion, Configuracion e Implementacion Framework ZanPHP IT...
Introduccion, Instalacion, Configuracion e Implementacion Framework ZanPHP IT...Introduccion, Instalacion, Configuracion e Implementacion Framework ZanPHP IT...
Introduccion, Instalacion, Configuracion e Implementacion Framework ZanPHP IT...
 
Modelo mvc
Modelo mvcModelo mvc
Modelo mvc
 
Probando aplicaciones AngularJS
Probando aplicaciones AngularJSProbando aplicaciones AngularJS
Probando aplicaciones AngularJS
 
Patrones de diseño II
Patrones de diseño IIPatrones de diseño II
Patrones de diseño II
 
Code Igniter
Code IgniterCode Igniter
Code Igniter
 

More from Sergio Castillo Yrizales

Angular of things: angular2 + web bluetooth
Angular of things: angular2 + web bluetoothAngular of things: angular2 + web bluetooth
Angular of things: angular2 + web bluetoothSergio Castillo Yrizales
 
Arquitectura de software para aplicaciones móviles
Arquitectura de software para aplicaciones móvilesArquitectura de software para aplicaciones móviles
Arquitectura de software para aplicaciones móvilesSergio Castillo Yrizales
 

More from Sergio Castillo Yrizales (20)

Un dia en la vida de un Software Engineer
Un dia en la vida de un Software EngineerUn dia en la vida de un Software Engineer
Un dia en la vida de un Software Engineer
 
Javascript en tiempos de colera
Javascript en tiempos de coleraJavascript en tiempos de colera
Javascript en tiempos de colera
 
Lambda at the edge
Lambda at the edgeLambda at the edge
Lambda at the edge
 
Angular of things: angular2 + web bluetooth
Angular of things: angular2 + web bluetoothAngular of things: angular2 + web bluetooth
Angular of things: angular2 + web bluetooth
 
Pushing html5 beyond boundaries
Pushing html5 beyond boundariesPushing html5 beyond boundaries
Pushing html5 beyond boundaries
 
Javascript en tiempos de colera
Javascript en tiempos de coleraJavascript en tiempos de colera
Javascript en tiempos de colera
 
Web apps con angular y material design
Web apps con angular y material designWeb apps con angular y material design
Web apps con angular y material design
 
Tdd con Angular y jasmine
Tdd con Angular y jasmineTdd con Angular y jasmine
Tdd con Angular y jasmine
 
Ruby 101 session 5
Ruby 101 session 5Ruby 101 session 5
Ruby 101 session 5
 
Ruby 101 session 4
Ruby 101 session 4Ruby 101 session 4
Ruby 101 session 4
 
Javascript + Angular Sesion 6
Javascript + Angular Sesion 6Javascript + Angular Sesion 6
Javascript + Angular Sesion 6
 
Ruby 101 session 3
Ruby 101 session 3Ruby 101 session 3
Ruby 101 session 3
 
Ruby 101 session 2
Ruby 101 session 2Ruby 101 session 2
Ruby 101 session 2
 
Javascript + Angular Sesion 4
Javascript + Angular Sesion 4Javascript + Angular Sesion 4
Javascript + Angular Sesion 4
 
Ruby 101 session 1
Ruby 101 session 1Ruby 101 session 1
Ruby 101 session 1
 
Javascript + Angular Sesion 3
Javascript + Angular Sesion 3Javascript + Angular Sesion 3
Javascript + Angular Sesion 3
 
Javascript + Angular Sesion 2
Javascript + Angular Sesion 2Javascript + Angular Sesion 2
Javascript + Angular Sesion 2
 
Javascript + Angular Sesion 1
Javascript + Angular Sesion 1Javascript + Angular Sesion 1
Javascript + Angular Sesion 1
 
Jquery mobile
Jquery mobileJquery mobile
Jquery mobile
 
Arquitectura de software para aplicaciones móviles
Arquitectura de software para aplicaciones móvilesArquitectura de software para aplicaciones móviles
Arquitectura de software para aplicaciones móviles
 

Javascript + Angular Sesion 5

  • 1. Directivas Javascript + Angular Sesion 5 Sergio Castillo Yrizales @scyrizales
  • 4. ¿Qué es una Directiva? 4  Las directivas es lo que hace diferente a AngularJS  Permiten encapsular funcionalidad en puro html.
  • 5. 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
  • 6. Razones para escribir directivas 6  Encapsular un plugin de otra libreria  La directiva no existe  Las directivas que existen no cumplen con las necesidades.
  • 8. 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
  • 9. 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
  • 10. 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.
  • 11. 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.
  • 12. Ejemplos (Directiva Simple) 12  Hagamos una calculadora  http://jsfiddle.net/scyrizales/mUJhL/
  • 13. Ejemplos (Directiva Simple) 13  Hagamos un time formatter  http://jsfiddle.net/scyrizales/rUbsE/
  • 14. Ejemplos (Directiva Anidada) 14  Hagamos un tab panel  http://jsfiddle.net/scyrizales/6C6Mv/
  • 15. Modifiquemos el carrito 15  Agreguemosle el tab al carrito  http://jsfiddle.net/scyrizales/hRDQj/
  • 16. Muchas gracias Y que esta luz os ilumine donde las otras no puedan… 16