Presentacin de PowerPoint
Presentacin casi interactiva ^^Directivas en AngularJSDavid
Antonio Muoz Gaete
@WidulApp
David
CTO Grupo Valentys Mentor y EmprendedorEntusiasta de la
tecnologa, Emprendedor empedernido, y arquitecto de software de
corazn ;).
Hoy particularmente feliz y haciendo del mundo, un mundo mas
conectado junto con un equipo de cracks ;)!
Mi Mejor Apodo: Cubo.
Hola!, Yo soy
Firsting First(o como se diga, yo solo quera ser popular...)
VideojuegosDiseoFelicidadConocimientoSaludMVCEmprendimientoVidaEventosProgramacinWidulAprenderSushiExperienciaSolucionesFinanzasCalidad
Sirven para encapsular cdigo HTML y cdigo.Antes de angularJS
podan ser creadas como Web componentes.Conceden Aislamiento y
permite mantener limpio nuestro cdigo.Funcionalidad similar a los
plugins de la era JQuery.Son la cumbia ;)! Diccionario RAEQue son
las directivas??
AplicabilidadEncapsulamiento.Reutilizacin (Alguien dijo DRY
??).Esconder la lgica compleja (Patrn Fachada).Al mezclarlas con
servicios, pueden ser controladas a travs del Controlador de la
vistaAlta Cohesin y Bajo Acoplamiento (GRASP)
Restricciones de Directivas (para gustos , hay colores)
VideojuegosDiseoFelicidadConocimientoSaludMVCEmprendimientoVidaEventosProgramacinWidulAprenderSushiExperienciaSolucionesFinanzasCalidad
Restriccin: Elemento
Estas directivas son enlazadas a un componente web.Permiten
Insertar una plantilla (HTML) adems de transclusin.Mas fcil para
los diseadores y programadores visualizarlos en el cdigoEs una de
las formas mas recomendadas por AngularJS Team.
* Si alguien quiere saber que es transclusin que levante la mano
y me pregunte mientras sigo en esta diapositiva!!
DRY , Alta cohesin , Bajo Acomplamiento7
Restriccin: Atributo
Dotan de funcionalidades a un elemento existente.No permite
inclusin ni transclusin.Se pueden anidar mas de una sobre un
elemento.Es una de las formas mas recomendadas por AngularJS
Team.
* Si alguien quiere saber que es transclusin que levante la mano
y me pregunte mientras sigo en esta diapositiva!!
8
Restriccin: Clase y Comentario
404(https://docs.angularjs.org/guide/directive)
9
Ser o no ser: cundo usar A o E?Usar la restriccin de elemento E
cuando el control requiera de plantilla o sea un componente
especifico de tu proyectoEjemplo: , , etc
Usar la restriccin de atributo A cuando estemos decorando un
elemento para aadir nuevas funcionalidades a un elemento ya
existente.Ejemplo: ng-number, restricted, ng-if , etc.
Patrn Decorator , Preguntar ;)10
Encapsulamiento de Contexto(Alguien dijo GRASP??)
VideojuegosDiseoFelicidadConocimientoSaludMVCEmprendimientoVidaEventosProgramacinWidulAprenderSushiExperienciaSolucionesFinanzasCalidad
GRASP: General Responsibility Assignment Software PatternsEn
chileno: Patrones generales de software para asignacin de
responsabilidades11
Ventajas: Contexto Aislado (Isolated $scope)Evitamos los
falsos-positivos en nuestro cdigo.Mejor visualizacin de nuestro
cdigo (limpieza del cdigo)Permite la reutilizacin (Alguien dijo de
nuevo DRY?)Alta cohesin Al tener aislado nuestro contexto ($scope)
se logra con mayor facilidad un bajo acoplamiento ^^.* Que es el
bajo acoplamiento y alta cohesin? es un pregunta inminente , por lo
que comiencen a preparar su respuestas ;)!.
Declaracin de
directivaangular.module('app.components').directive(flexLoading',
function(){ return { restrict: 'E', scope: {}, templateUrl:
url_to_template_html', controller: function($scope, $element) {},
link: function(scope, element, attributes){} };});
Enlace de Parametros
VideojuegosDiseoFelicidadConocimientoSaludMVCEmprendimientoVidaEventosProgramacinWidulAprenderSushiExperienciaSolucionesFinanzasCalidad
Enlace de parmetros va ScopeSirve para el traspaso de variables
hacia la directiva (solo cuando el scope se encuentra asilado).Es
muy importante tenerlo siempre en cuenta!.Existen 3 tipos de
Enlace:Por Referencia: = (enlace de modelo de 2 caminos) -
ModeloPor Valor: @ (Enlace de Atributo) - CadenaPor llamada:
&(Enlace de Funcin) Funcin
Workshop Practico(metiendo manos)
VideojuegosDiseoFelicidadConocimientoSaludMVCEmprendimientoVidaEventosProgramacinWidulAprenderSushiExperienciaSolucionesFinanzasCalidad
Instalacin Demosmothership$: git clone
https://github.com/dmunozgaete/demo-directivas.git mothership$: cd
Demosmothership$: npm installmothership$: bower installmothership$:
grunt lift
http://www.widul.com@WidulApphttps://www.facebook.com/groups/widulSmate
a la experiencia de ensear:Gracias por tu tiempo!
