Cos'è una direttiva AngularJS?

Ho trascorso parecchio tempo a leggere la documentazione di AngularJS e diversi tutorial, e sono rimasto piuttosto sorpreso da quanto sia inaccessibile la documentazione.

Ho una domanda semplice, che può essere utile anche per gli altri che desiderano raccogliere AngularJS:

Cos'è una direttiva AngularJS?

Dovrebbe esserci una definizione semplice e precisa di una direttiva da qualche parte, ma il sito Web AngularJS offre queste definizioni sorprendentemente inutili:

Nella home page :

Le direttive sono una funzione unica e potente disponibile in AngularJS. Le direttive ti consentono di inventare una nuova sintassi HTML, specifica per la tua applicazione.

Nella documentazione per gli sviluppatori :

Le direttive sono un modo per insegnare nuovi trucchi HTML. Durante la compilazione del DOM le direttive vengono confrontate con l'HTML ed eseguite. Ciò consente alle direttive di registrare il comportamento o di trasformare il DOM.

E c'è una serie di discorsi sulle direttive che, ironicamente, sembrano presumere che il pubblico capisca già cosa sono.

Qualcuno sarebbe in grado di offrire, per un chiaro riferimento, una definizione precisa di ciò che una direttiva spiega:

1. Che cos'è (vedi la chiara definizione di jQuery come esempio)
2. Quali problemi pratici e situazioni si intende affrontare
3. Quale modello di progettazione incarna o, in alternativa, come si adatta alla presunta missione MVC / MVW di AngularJS.

Che cos'è (vedi la chiara definizione di jQuery come esempio)?

Una direttiva è essenzialmente una funzione ^† che viene eseguita quando il compilatore angolare la trova nel DOM. Le funzioni possono fare praticamente qualsiasi cosa, motivo per cui penso che sia piuttosto difficile definire cosa sia una direttiva. Ogni direttiva ha un nome (come ng-repeat, tabs, make-up-your-own) e ogni direttiva determina dove può essere usata: elemento, attributo, classe, in un commento.

^† Una direttiva normalmente ha solo una funzione (post) link. Una direttiva complicata potrebbe avere una funzione di compilazione, una funzione pre-link e una funzione post-link.

Quali problemi pratici e situazioni si intende affrontare?

La cosa più potente che le direttive possono fare è estendere l'HTML. Le tue estensioni sono un linguaggio specifico di dominio (DSL) per la creazione della tua applicazione. Ad esempio, se la tua applicazione gestisce un sito di shopping online, puoi estendere HTML per avere direttive "carrello", "coupon", "speciali", ecc. - qualsiasi parola, oggetto o concetto sia più naturale da usare all'interno del " "dominio" dello shopping online, anziché "div" e "span" (come già menzionato @WTK).

Le direttive possono anche strutturare HTML - raggruppare un gruppo di HTML in alcuni componenti riutilizzabili. Se ti ritrovi a utilizzare ng-include per estrarre un sacco di codice HTML, è probabilmente il momento di rifattorizzare le direttive.

Quale modello di progettazione incarna o, in alternativa, come si adatta alla presunta missione MVC / MVW di angularjs

Le direttive sono dove manipoli il DOM e catturi gli eventi DOM. Questo è il motivo per cui le funzioni di compilazione e collegamento della direttiva ricevono entrambe "l'elemento" come argomento. Puoi

• definire un gruppo di HTML (ovvero un modello) per sostituire la direttiva
• associare eventi a questo elemento (o ai suoi figli)
• aggiungi / rimuovi una classe
• cambia il valore del testo ()
• guardare le modifiche agli attributi definiti nello stesso elemento (in realtà sono i valori degli attributi che vengono controllati - queste sono proprietà dell'ambito, quindi la direttiva controlla il "modello" per le modifiche)
• eccetera.

Forse sarebbe una definizione davvero semplice e iniziale per le direttive angolari

Le direttive AngularJS (ng-direttive) sono attributi HTML con un prefisso ng (ng-model, ng-app, ng-repeat, ng-bind) usato da Angular per estendere HTML. ( da: tutorial angolare di W3schools )

Alcuni esempi di questo sarebbero

La direttiva ng-app definisce un'applicazione AngularJS.

La direttiva ng-model lega il valore dei controlli HTML (input, select, textarea) ai dati dell'applicazione.

La direttiva ng-bind lega i dati dell'applicazione alla vista HTML.

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

Dai un'occhiata a questo tutorial, almeno per me è stata una delle migliori presentazioni di Angular. Un approccio più completo sarebbe tutto ciò che @ mark-rajcok ha detto prima.

Guardando la documentazione, le direttive sono strutture che è possibile scrivere che angularjs analizza per creare oggetti e comportamenti, in altre parole è un modello in cui si utilizza una combinazione di nodi arbitrari e pseudo-javascript e segnaposto per i dati per esprimere le intenzioni di come il widget (componente) è strutturato, come si comporta e come viene alimentato con i dati. Angularjs quindi corre contro quelle direttive per tradurle in codice html / javascript funzionante.

Le direttive sono lì per consentirti di costruire componenti (widget) più complessi usando la semantica corretta. Dai un'occhiata all'esempio di direttive angularjs: stanno definendo il riquadro delle schede (che ovviamente non è valido nel normale HTML). È più intuitivo rispetto all'utilizzo di div-s o span per creare una struttura che viene quindi definita come un riquadro a schede.

In AngularJS le direttive sono markers html per un elemento DOM HTML come un attributo (restringimento-A), nome elemento (restringimento-E), commento (restringimento-M) o classe CSS (restringimento -C) che dicono al compilatore HTML di AngularJS ($ compilare) per eseguire un comportamento specificato a quell'elemento DOM o persino trasformare l'elemento DOM e i suoi figli. Alcuni esempi sono ng-bind, ng-hide / show ecc.

La homepage è molto chiara al riguardo: quando passi il mouse sulle schede nell'ultima sezione:

Abbiamo esteso il vocabolario di HTML con un tabs elemento personalizzato . La tabsastrae la struttura HTML complessa e comportamenti necessari per il rendering di schede. Il risultato è una vista più leggibile e una sintassi riutilizzabile molto facilmente. "

Quindi nella scheda successiva:

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;
        }

Quindi puoi inventare elementi html, ovvero tabslasciare che angular gestisca il rendering di quegli elementi.