jueves, 19 de febrero de 2015

AngularJS - Introducción: Directivas

¿Qué son las directivas? Desde un punto de vista de alto nivel, las directivas son marcadores en elementos del DOM que permite especificar el comportamiento esperado para ese elemento DOM e incluso transformar el elemento y sus hijos [1] . Es decir, las directivas serán las herramientas que se emplean en AngularJS para trabajar con el DOM. Esto permite que el resto de nuestros componentes de AngularJS se centren en la lógica de la aplicación y no en la manipulación del DOM

Gracias a las directivas se puede extender el conjunto de etiquetas de HTML disponible. AngularJS facilita un conjunto de directivas, podemos ver estás directivas en los atributos "ng-" que agregamos a los elementos del DOM. Es más, AngularJS nos permite crear nuestras porpias directivas, las cuales brindan la posibilidad de crear etiquetas y atributos propios exclusivos del programador, por lo que en AngularJS utilizaremos directivas por todas partes.

Para entender mejor el concepto imagina que deseas incorporar un menú personalizado en diferentes lugares de tu HTML. Realizando una directiva que encapsula este menú y su comportamiento dentro de una etiqueta "<menu />" al incorporar esta etiqueta en nuestro HTML tendremos disponible el menú. Por ejemplo podríamos hacer lo mismo con un login o con diferentes controles personalizados para nuestra aplicación.

En el siguiente ejemplo, se puede ver  una de las directivas incorporadas en AngularJS: ng-model. Esta directiva modifica el DOM para enlazar la variable del modelo especificada al elemento "input".



Por último, en este ejemplo se muestra una directiva personaliza que permite crear una etiqueta "" que recibe una variable del modelo de datos y muestra el mensaje "Hola valor". 
 
Aprendiendo AngularJS

[1] https://docs.angularjs.org/guide/directive

No hay comentarios:

Publicar un comentario