Saltar al contenido

¿Qué es una directiva AngularJS?

Posterior a investigar con especialistas en el tema, programadores de deferentes áreas y maestros dimos con la solución a la cuestión y la dejamos plasmada en este post.

Solución:

¿Qué es (ver la definición clara de jQuery como ejemplo)?

Una directiva es esencialmente una función. que se ejecuta cuando el compilador Angular lo encuentra en el DOM. Las funciones pueden hacer casi cualquier cosa, por lo que creo que es bastante difícil definir qué es una directiva. Cada directiva tiene un nombre (como ng-repeat, tabs, make-up-your-own) y cada directiva determina dónde se puede usar: elemento, attributeclase, en un comentario.

Una directiva normalmente solo tiene una función de enlace (post). Una directiva complicada podría tener una función de compilación, una función previa al enlace y una función posterior al enlace.

¿Qué problemas prácticos y situaciones se pretende abordar?

Lo más poderoso que pueden hacer las directivas es extender HTML. Sus extensiones son un lenguaje específico de dominio (DSL) para construir su aplicación. Por ejemplo, si su aplicación ejecuta un sitio de compras en línea, puede extender HTML para tener directivas de “carrito de compras”, “cupón”, “especiales”, etc., cualquier palabra, objeto o concepto que sea más natural de usar dentro del ” compras en línea”, en lugar de “div” y “span” (como @WTK ya se mencionó).

Las directivas también pueden dividir en componentes HTML: agrupar un montón de HTML en algún componente reutilizable. Si se encuentra usando ng-include para extraer mucho HTML, probablemente sea el momento de refactorizar en directivas.

¿Qué patrón de diseño incorpora o, alternativamente, cómo encaja en la supuesta misión MVC/MVW de angularjs?

Las directivas son donde manipulas el DOM y capturas eventos DOM. Esta es la razón por la que las funciones de compilación y enlace de la directiva reciben el “elemento” como argumento. Puede

  • definir un montón de HTML (es decir, una plantilla) para reemplazar la directiva
  • vincular eventos a este elemento (o sus hijos)
  • añadir/eliminar una clase
  • cambiar el valor del texto ()
  • estar atento a los cambios en attributes definido en el mismo elemento (en realidad es el attributes’ valores que se observan: estas son propiedades de alcance, por lo tanto, la directiva observa el “modelo” en busca de cambios)
  • etc.

En HTML tenemos cosas como ,

,
,

. ¿Cómo describiría lo que son a, href, img, src, br, table, tr y th? Eso es lo que es una directiva.

tal vez realmente simple e inicial la definición de directivas angulares sería

Las directivas de AngularJS (directivas ng) son HTML attributes con un ng prefix (ng-model, ng-app, ng-repeat, ng-bind) utilizado por Angular para extender HTML. (de: Tutorial angular de W3schools)

Algunos ejemplos de esto serían

Él aplicación ng directiva define una aplicación AngularJS.

Él modelo ng La directiva vincula el valor de los controles HTML (entrada, selección, área de texto) a los datos de la aplicación.

Él enlace ng La directiva vincula los datos de la aplicación a la vista HTML.

Name:

Revisa este tutorial, al menos para mí fue una de las mejores introducciones a Angular. Un enfoque más completo sería todo lo que dijo @mark-rajcok antes.

Mirando la documentación, las directivas son estructuras que puede escribir que angularjs analiza para crear objetos y comportamientos. En otras palabras, es una plantilla en la que usa una combinación de nodos arbitrarios y pseudo-javascript y marcadores de posición para datos para expresar intenciones de cómo su widget (componente) está estructurado, cómo se comporta y cómo se alimenta con datos. Angularjs luego corre contra esos directivas para traducirlos a código html/javascript que funcione.

Las directivas están ahí para que pueda crear componentes más complejos (widgets) utilizando la semántica adecuada. Solo eche un vistazo al ejemplo de directivas angularjs: están definiendo el panel de pestañas (que, por supuesto, no es válido en HTML normal). Es más intuitivo que usar div-s o spans para crear una estructura que luego se diseña para parece un panel de pestañas.

Te mostramos las reseñas y valoraciones de los lectores

Tienes la posibilidad mostrar esta sección si si solucionó tu problema.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Respuestas a preguntas comunes sobre programacion y tecnología