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.

1. Custom directives - AngularJS
Sonneil IT Seminar

2. Custom directives - AngularJS
Introducción
<div> ~ <super-div>
<div id=”calendar”> ~ <calendar>
$(“#calendar”).calendar();

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. 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. Custom directives - AngularJS
Nombrar e invocar una directiva
CamelCase
ngDirective ~ ng-directive
ng:directive
ng_directive
data-ng-directive
x-ng-directive

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. Custom directives - AngularJS
Crear una directiva
var myApp = angular.module(...);
var myDirectives = {};
myApp.directive(myDirectives);
myDirectives.ngDirective = function(){
/* MAGIC */
}

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. 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. Custom directives - AngularJS
Configurar una directiva
● false
● true
● {...} (Objeto)
○ @
○ =
○ =?
○ &
scope
scope: {
varNameNewScope: ‘@attrNameInElem’,
sameName: ‘@’,
myFunction: ‘&ngClick’,
ngFocus: ‘&’,
myVariable: ‘=?ngModel’
}

11. Custom directives - AngularJS
Configurar una directiva compile / link
compile: function(elemArr, attrArr, transclude){...}
link: function(scope, elem, attrs, transclude){...}

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. Custom directives - AngularJS
Configurar una directiva require
require: ‘^form’,
link: function(scope, elem, attrs, formCtrl){...}
● Sin prefijo
● ?
● ^
● ?^
● ‘string’
● [‘string’, ‘string’]

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. 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. 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. 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.