Custom directives - AngularJS
Sonneil IT Seminar
Custom directives - AngularJS
Introducción
<div> ~ <super-div>
<div id=”calendar”> ~ <calendar>
$(“#calendar”).calendar();
Custom directives - AngularJS
Directivas predeterminadas
● ng-app
● ng-controller
● ng-include
● ng-bind
● ng-model
● ng-i...
Custom directives - AngularJS
Ejercicio 1 (10-15 min.)
En un nuevo fichero HTML, y sólo HTML, combinar diferentes directiv...
Custom directives - AngularJS
Nombrar e invocar una directiva
CamelCase
ngDirective ~ ng-directive
ng:directive
ng_directi...
Custom directives - AngularJS
Nombrar e invocar una directiva
● Elemento:
<ng-directive>
● Atributo:
<span ng-directive=”e...
Custom directives - AngularJS
Crear una directiva
var myApp = angular.module(...);
var myDirectives = {};
myApp.directive(...
Custom directives - AngularJS
Configurar una directiva
● ‘A’: Como atributo:
<span my-directive></span>
● ‘E’: Como elemen...
Custom directives - AngularJS
Configurar una directiva
● template
● templateUrl
● ‘string’
● function(){}
template / templ...
Custom directives - AngularJS
Configurar una directiva
● false
● true
● {...} (Objeto)
○ @
○ =
○ =?
○ &
scope
scope: {
var...
Custom directives - AngularJS
Configurar una directiva compile / link
compile: function(elemArr, attrArr, transclude){...}...
Custom directives - AngularJS
Ejercicio 2 (10-15 min.)
Crea una directiva que se comporte como un formulario de login de e...
Custom directives - AngularJS
Configurar una directiva require
require: ‘^form’,
link: function(scope, elem, attrs, formCt...
Custom directives - AngularJS
Ejercicio 3 (20-25 min.)
Crea dos directivas que se relacionen entre sí como padre e hijo. E...
Custom directives - AngularJS
Ejercicio 4 (5 min.)
Añade un contador grupal que se incremente cada vez que se haga click e...
Custom directives - AngularJS
Ejercicio 5 (10 min.)
Crea un tipo especial de botón que no incremente el contador, si no qu...
Custom directives - AngularJS
Ejercicio 6 (1 semana)
Descubre dónde sería más potente utilizar una directiva de AngularJS ...
Próxima SlideShare
Cargando en…5
×

Creación de directivas personalizadas en AngularJS

523 visualizaciones

Publicado el

Formación interna impartida al equipo técnico de Sonneil (sonneil.com) como parte del plan de formación del verano de 2015 a empleados en prácticas.

Publicado en: Software
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
523
En SlideShare
0
De insertados
0
Número de insertados
5
Acciones
Compartido
0
Descargas
3
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Creación de directivas personalizadas en AngularJS

  1. 1. Custom directives - AngularJS Sonneil IT Seminar
  2. 2. Custom directives - AngularJS Introducción <div> ~ <super-div> <div id=”calendar”> ~ <calendar> $(“#calendar”).calendar();
  3. 3. Custom directives - AngularJS Directivas predeterminadas ● ng-app ● ng-controller ● ng-include ● ng-bind ● ng-model ● ng-init ● ng-switch. ● ng-show/ng-hide: ● ng-if ● ng-repeat ● ng-click ● ng-checked
  4. 4. Custom directives - AngularJS Ejercicio 1 (10-15 min.) En un nuevo fichero HTML, y sólo HTML, combinar diferentes directivas predeterminadas de angular, (todas englobadas dentro de la directiva ng-app) para garantizar el siguiente comportamiento actualizado en tiempo real: ● Input de texto cuyo contenido es almacenado en un array. Los elementos se separarán introduciendo comas entre ellos. ● El contenido del input debe estar inicializado a [“patata”]. ● Botón que al ser pulsado muestra el contenido del array por consola. ● Texto de error que se muestra cuando el array está vacío al pulsar el botón. ● Lista no numerada que muestra los elementos del array en el documento.
  5. 5. Custom directives - AngularJS Nombrar e invocar una directiva CamelCase ngDirective ~ ng-directive ng:directive ng_directive data-ng-directive x-ng-directive
  6. 6. Custom directives - AngularJS Nombrar e invocar una directiva ● Elemento: <ng-directive> ● Atributo: <span ng-directive=”expr”> ● Clase: <span class=”ng-directive: expr”> ● Comentario: <!-- directive: ng-directive exp -->
  7. 7. Custom directives - AngularJS Crear una directiva var myApp = angular.module(...); var myDirectives = {}; myApp.directive(myDirectives); myDirectives.ngDirective = function(){ /* MAGIC */ }
  8. 8. Custom directives - AngularJS Configurar una directiva ● ‘A’: Como atributo: <span my-directive></span> ● ‘E’: Como elemento: <my-directive></my-directive> ● ‘C’: Como clase: <span class=”my-directive”></span> ● ‘M’: Como comentario: <!-- directive: my-directive --> restrict restrict: ‘AEC’
  9. 9. Custom directives - AngularJS Configurar una directiva ● template ● templateUrl ● ‘string’ ● function(){} template / templateUrl templateUrl: function(elem, attrs){ switch(attrs.templateType){ case ‘big’: return ‘src/templates/big.html’; break; case ‘sml’: return ‘src/templates/small.html’; break; default: return ‘src/templates/default.html’; break; } },
  10. 10. Custom directives - AngularJS Configurar una directiva ● false ● true ● {...} (Objeto) ○ @ ○ = ○ =? ○ & scope scope: { varNameNewScope: ‘@attrNameInElem’, sameName: ‘@’, myFunction: ‘&ngClick’, ngFocus: ‘&’, myVariable: ‘=?ngModel’ }
  11. 11. Custom directives - AngularJS Configurar una directiva compile / link compile: function(elemArr, attrArr, transclude){...} link: function(scope, elem, attrs, transclude){...}
  12. 12. Custom directives - AngularJS Ejercicio 2 (10-15 min.) Crea una directiva que se comporte como un formulario de login de email y contraseña. Implementa los validadores y los mensajes de error así como el envío. Configura y diseña la directiva como creas más oportuno para hacerla lo más reutilizable y potente posible:
  13. 13. Custom directives - AngularJS Configurar una directiva require require: ‘^form’, link: function(scope, elem, attrs, formCtrl){...} ● Sin prefijo ● ? ● ^ ● ?^ ● ‘string’ ● [‘string’, ‘string’]
  14. 14. Custom directives - AngularJS Ejercicio 3 (20-25 min.) Crea dos directivas que se relacionen entre sí como padre e hijo. El resultado debe de ser Un grupo de botones que funcionan como radio. Es decir, sean activables, pero sólo pueda haber uno activado a la vez. Tanto el resultado estético como la apariencia de código HTML debe ser similar a este ejemplo de componente de Bootstrap: http://getbootstrap.com/components/#btn-groups
  15. 15. Custom directives - AngularJS Ejercicio 4 (5 min.) Añade un contador grupal que se incremente cada vez que se haga click en un botón. Imprime este contador en el grupo de botones.
  16. 16. Custom directives - AngularJS Ejercicio 5 (10 min.) Crea un tipo especial de botón que no incremente el contador, si no que lo disminuya. Además, para identificarlo, este botón debe tener un color de fondo diferente.
  17. 17. Custom directives - AngularJS Ejercicio 6 (1 semana) Descubre dónde sería más potente utilizar una directiva de AngularJS en el sistema de Sonneil, tanto el Admin como la Web. Impleméntala.

×