¿Qué es una directiva AngularJS?

181

He pasado bastante tiempo leyendo la documentación de AngularJS y varios tutoriales, y me ha sorprendido bastante lo inaccesible de la documentación.

Tengo una pregunta simple y respondible que también puede ser útil para otras personas que buscan recoger AngularJS:

¿Qué es una directiva AngularJS?

Debería haber una definición simple y precisa de una directiva en alguna parte, pero el sitio web de AngularJS ofrece estas definiciones sorprendentemente inútiles:

En la página de inicio :

Las directivas son una característica única y poderosa disponible en AngularJS. Las directivas le permiten inventar una nueva sintaxis HTML, específica para su aplicación.

En la documentación del desarrollador :

Las directivas son una forma de enseñar HTML nuevos trucos. Durante la compilación DOM, las directivas se comparan con el HTML y se ejecutan. Esto permite a las directivas registrar el comportamiento o transformar el DOM.

Y hay una serie de charlas sobre directivas que, irónicamente, parecen suponer que el público ya comprende lo que son.

¿Alguien podría ofrecer, para una referencia clara, una definición precisa de lo que es una directiva que explica:

  1. Qué es (vea la definición clara de jQuery como ejemplo)
  2. ¿Qué problemas y situaciones prácticas se pretende abordar?
  3. Qué patrón de diseño incorpora o, alternativamente, cómo encaja en la supuesta misión MVC / MVW de AngularJS.
tohster
fuente
2
Me tenías en ... ver la clara definición de jQuery como un ejemplo.
joshuamabina
No estoy seguro de cómo fue en 2012 en Stack Overflow, pero acabo de revisar esta pregunta y agregué la etiqueta "directiva angular". La información de su etiqueta en realidad da una definición bastante clara. Además, noté que no puedo encontrar la segunda cita en los documentos del desarrollador ...
user4642212

Respuestas:

142

¿Qué es (vea 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 eso creo que es bastante difícil definir qué es una directiva. Cada directiva tiene un nombre (como ng-repeat, tabs, make-your-own-own) y cada directiva determina dónde se puede usar: elemento, atributo, clase, 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 de preenlace y una función de postenlace.

¿Qué problemas y situaciones prácticas 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 que tenga directivas de "carrito de compras", "cupón", "especiales", etc. "dominio" de compras en línea, en lugar de "div" y "span" (como ya se mencionó @WTK).

Las directivas también pueden componer HTML: agrupe un montón de HTML en algún componente reutilizable. Si te encuentras usando ng-include para extraer mucho HTML, probablemente sea hora de refactorizar las 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 manipula el DOM y captura los eventos DOM. Esta es la razón por la cual las funciones de compilación y enlace de la directiva reciben el "elemento" como argumento. Usted puede

  • definir un montón de HTML (es decir, una plantilla) para reemplazar la directiva
  • enlazar eventos a este elemento (o sus hijos)
  • agregar / eliminar una clase
  • cambiar el valor del texto ()
  • esté atento a los cambios en los atributos definidos en el mismo elemento (en realidad, son los valores de los atributos los 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 <a href="...">, <img src="...">, <br>, <table><tr><th>. ¿Cómo describirías qué son a, href, img, src, br, table, tr y th? Eso es una directiva.

Mark Rajcok
fuente
2
Mark, gracias. Creo que esto es claro y probablemente el más cercano a una respuesta precisa. Creo que las directivas siempre están vinculadas a las etiquetas html, ¿verdad? Entonces, quizás sea más preciso decir que una directiva es una función vinculada a una etiqueta HTML. Como tal, permite que el lenguaje HTML se extienda declarativamente.
tohster
Bueno, una directiva se puede usar en un comentario, por lo que no todas las directivas tienen que estar vinculadas a una etiqueta HTML. Por ejemplo,<!-- directive: my-directive exp -->
Mark Rajcok
Mark, ¿sería un uso poco convencional de una directiva? es decir, las directivas se usan convencionalmente y están destinadas a extender HTML.
tohster
9
OK, ahora tengo una mejor comprensión. Una forma de pensarlo es: 1. Los DSL generalmente representan árboles de sintaxis 2. El HTML DOM es un árbol de sintaxis DSL pero es rígido: las etiquetas están diseñadas y diseñadas en su mayoría rígidamente, y no son extensibles. 3. AngularJS y el mecanismo directivo específicamente, hacen que HTML DOM sea más flexible al permitir a los desarrolladores crear nodos de árbol personalizados. Estos nodos pueden representar nuevos comportamientos o agregaciones de comportamientos existentes (
subárboles
1
@ MarkRajcok Estoy luchando con tu último párrafo. ¿Está claro <div></div>es una directiva? Dijiste que si. Pero aquí no hay decoración (a través de elemento, clase, comentario, atributo). La gente aquí dice que estos son marcadores para un DOM HTML . ¿Puedes aclarar? (No estoy hablando de la causa en la que puedes crear una directiva para un elemento simple como <div>)
Royi Namir
11

Tal vez una definición realmente simple e inicial para directivas angulares sería

Las directivas AngularJS (directivas ng) son atributos HTML con un prefijo ng (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

La directiva ng-app define una aplicación AngularJS.

La directiva ng-model vincula el valor de los controles HTML (input, select, textarea) a los datos de la aplicación.

La directiva ng-bind vincula los datos de la aplicación a la vista HTML.

<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

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

jplozgom
fuente
4

Mirando la documentación, las directivas son estructuras que puedes escribir que angularjs analiza para crear objetos y comportamientos. En otras palabras, es una plantilla en la que usas 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 se ejecuta contra esas directivas para traducirlas en código html / javascript en funcionamiento.

Las directivas están ahí para que pueda construir 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 de usar como div-s o tramos para crear una estructura que luego se labra para parecerse a un panel de la pestaña.

WTK
fuente
Agregué que lo que siento es una explicación un poco menos técnica.
raam86
1
Gracias, esto es bastante útil. Entonces, ¿puedo pensar en él como una especie de plantilla dinámica (similar a una clase en la programación OO) que encapsula un componente, lo describe por propiedades y comportamientos, es capaz de ser instanciado y puede expresarse en el DOM? ¿Y la razón por la que existe (en comparación con el objeto javascript o la plantilla html) es para permitir que las etiquetas HTML adopten comportamientos más dinámicos y similares a los objetos para que puedan comenzar a ser manipulables en la programación de tipo OO?
tohster
Si y no. No diría que la razón por la que existen las directivas tiene mucho que ver con que sean manipulables en la programación OO. De hecho, el enfoque angularjs completo del framework se siente fuertemente relacionado con HTML y atributos de nodos DOM arbitrarios en lugar de escribir código OO Javascript. Obtengo esa vibra mirando todos los ejemplos de cómo angularjs está resolviendo problemas cotidianos. Diría que la razón principal detrás de las directivas es tener forma de incorporar comportamientos y datos en un componente semánticamente estructurado.
WTK
3

En las directivas de AngularJS hay marcadores html para un elemento HTML DOM como un atributo (restrict- A), nombre del elemento (restrict- E), comentario (restrict- M) o clase CSS (restrict - C) que le dicen al compilador HTML de AngularJS ($ compilar) para realizar un comportamiento específico a ese elemento DOM o incluso transformar el elemento DOM y sus elementos secundarios. Algunos ejemplos son ng-bind, ng-hide / show, etc.

Vivek Panday
fuente
2

La página de inicio es muy clara al respecto: cuando pasa el mouse sobre las pestañas en la última sección:

Hemos ampliado el vocabulario de HTML con un tabs elemento personalizado . El tabsabstrae la estructura HTML complejo y comportamientos necesarios para la prestación de pestañas. El resultado es una vista más legible y una sintaxis muy fácilmente reutilizable ".

Luego en la siguiente pestaña:

angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

Por lo tanto, puede inventar elementos html, es decir, tabsy dejar que angular maneje la representación de esos elementos.

raam86
fuente
2
¡Gracias por la rápida respuesta! Entonces, ¿el propósito de una directiva es extender el vocabulario de HTML mediante la creación de etiquetas y atributos personalizados? Eso parece bastante poderoso, aunque parece abordar un alcance de problema mucho más amplio que "MVW". Por cierto, otros podrían estar en desacuerdo, pero creo que desplazarse hasta el final de una página, y luego pasar el cursor sobre una palabra con hipervínculos, y luego leer una información emergente emergente que no menciona una vez la palabra 'directiva' no es exactamente un " definición muy clara de lo que es una directiva. Sin embargo, realmente aprecio la rápida respuesta.
tohster
¡Si! Puedes comprobar este violín que hicieron. El html real es diferente al activado en el panel html.
raam86