javascript - crear - directivas angular 6

¿Qué es una directiva AngularJS?

Question

He pasado bastante tiempo leyendo la documentación de AngularJS y varios tutoriales, y me he sorprendido bastante de cuán inaccesible es la documentación.

Tengo una pregunta simple y respondible que también puede ser útil para otros 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 potente disponible en AngularJS. Las directivas te permiten inventar una nueva sintaxis HTML, específica para tu aplicación.

En la documentación del desarrollador :

Las directivas son una forma de enseñar HTML trucos nuevos. Durante las directivas de compilación DOM 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 la audiencia ya entiende lo que son.

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

1. Qué es (ver la clara definición de jQuery como ejemplo)
2. ¿Qué problemas prácticos y situaciones 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.

Answer 1

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

Una directiva es esencialmente una función ^† que se ejecuta cuando el compilador angular la encuentra en el DOM. La función (s) puede hacer casi cualquier cosa, por lo que creo que es bastante difícil definir lo que 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, atributo, clase, en un comentario.

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

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

Lo más poderoso que las directivas pueden hacer es extender HTML. Sus extensiones son un lenguaje específico del dominio (DSL) para crear 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 la compra", "cupón", "especiales", etc. - cualquier palabra, objeto o concepto es más natural de usar dentro del " compras en línea "domain", en lugar de "div" s y "span" s (como @WTK ya mencionado).

Las directivas también pueden componer componentes de HTML: agrupen un montón de HTML en algún componente reutilizable. Si te encuentras usando ng-include para obtener un montón de HTML, probablemente sea hora 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 atrapas 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
• vincular eventos a este elemento (o sus hijos)
• agregar / eliminar una clase
• cambiar el valor del texto ()
• Observe los cambios en los atributos definidos en el mismo elemento (en realidad son los valores de los atributos que se ven: estas son propiedades de alcance, por lo tanto, la directiva observa el "modelo" 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 lo que es una directiva.

Answer 2

En AngularJS Directivas son html re marcadores para un elemento HTML DOM como un atributo (restringir- A), nombre del elemento (restring-E), comentario (restringir- M) o clase de CSS (restringir-C) que le dicen al compilador de 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.

Answer 3

En cuanto a 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 utiliza la combinación de nodos arbitrarios y pseudo-javascript y marcadores de posición para datos que expresan intenciones de cómo su widget (componente) está estructurado, cómo se comporta y cómo se alimenta con los datos. Angularjs luego se ejecuta contra esas directivas para traducirlas al código html / javascript que funciona.

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

Answer 4

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 elemento de tabs personalizado. Las tabs abstraen la estructura HTML compleja y el comportamiento necesario para la representació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;
        }

De modo que puede inventar elementos html, es decir, tabs y dejar que el manejo angular de esos elementos sea angular.

Answer 5

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

Las directivas AngularJS (ng-directives) son atributos HTML con un prefijo ng (ng-model, ng-app, ng-repeat, ng-bind) utilizados por Angular para extender HTML. ( de: W3schools angular tutorial )

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 (entrada, selección, área de texto) 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 dijo @ mark-rajcok antes.