javascript - Hva er en AngularJS-direktiv?

Jeg har brukt ganske mye tid på å lese gjennom AngularJS-dokumentasjonen og flere opplæringsprogrammer, og jeg har blitt ganske overrasket over hvor utilgjengelig dokumentasjonen er.

Jeg har et enkelt, besvarbart spørsmål som også kan være nyttig for andre som ønsker å lære AngularJS:

Hva er en AngularJS-direktiv?

Det burde være en enkel, presis definisjon av en direktiv et sted, men AngularJS-nettstedet tilbyr disse overraskende ubrukelige definisjonene:

På startsiden:

Direktiver er en unik og kraftig funksjon tilgjengelig i AngularJS. Direktiver lar deg finne opp ny HTML-syntaks, spesifikk for applikasjonen din.

I utviklerdokumentasjonen:

Direktiver er en måte å lære HTML nye trikser på. Under DOM-kompilering blir direktiver matchet mot HTML og utført. Dette lar direktiver registrere atferd, eller transformere DOM-en.

Og det er en serie foredrag om direktiver som, ironisk nok, ser ut til å anta at publikum allerede forstår hva de er.

Ville noen kunne tilby, for klar referanse, en presis definisjon av hva en direktiv er som forklarer:

  1. Hva det er (se den klare definisjonen av jQuery som et eksempel)
  2. Hvilke praktiske problemer og situasjoner det er ment å håndtere
  3. Hvilket designmønster det legemliggjør, eller alternativt, hvordan det passer inn i den påståtte MVC/MVW-oppgaven til AngularJS.

Svar #1

Hva det er (se den tydelige definisjonen av jQuery som et eksempel)?

En direktiv er i hovedsak en funksjon† som kjøres når Angular-kompilatoren finner den i DOM-en. Funksjonen(e) kan gjøre nesten hva som helst, noe som er grunnen til at jeg synes det er ganske vanskelig å definere hva et direktiv er. Hvert direktiv har et navn (som ng-repeat, tabs, lage-ditt-egen) og hvert direktiv bestemmer hvor det kan brukes: element, attributt, klasse, i en kommentar.

† En direktiv har normalt bare en (post)lenkefunksjon. En komplisert direktiv kan ha en kompilasjonsfunksjon, en pre-lenkefunksjon og en post-lenkefunksjon.

Hvilke praktiske problemer og situasjoner er det ment å håndtere?

Det mest kraftfulle direktiver kan gjøre er å utvide HTML. Utvidelsene dine er et domene-spesifikt språk (DSL) for å bygge applikasjonen din. For eksempel, hvis applikasjonen din kjører et netthandelsted, kan du utvide HTML til å ha "handlekurv", "kupong", "spesialtilbud" osv. direktiver - hvilke som helst ord, objekter eller konsepter som er mer naturlige å bruke innenfor "netthandel"-domenet, i stedet for "div"er og "span"er (som @WTK allerede nevnte).

Direktiv kan også komponentisere HTML -- gruppering av en mengde HTML til noen gjenbrukbare komponenter. Hvis du oppdager at du bruker ng-include for å hente inn mye HTML, er det sannsynligvis på tide å refaktorere til direktiver.

Hvilket designmønster legemliggjør det, eller alternativt, hvordan passer det inn i den påståtte MVC/MVW-oppgaven til AngularJS

Direktiv er der du manipulerer DOM og fanger DOM-hendelser. Dette er grunnen til at direktivets compile- og link-funksjoner begge mottar «elementet» som et argument. Du kan

  • definer en haug med HTML (dvs. en mal) for å erstatte direktivet
  • bind hendelser til dette elementet (eller dets barn)
  • legg til/fjern en klasse
  • endre text()-verdien
  • se etter endringer i attributter definert i det samme elementet (det er faktisk attributtenes verdier som overvåkes -- disse er områdeeegenskaper, derfor overvåker direktivet "modellen" for endringer)
  • osv.

I HTML har vi ting som <a href="...">, <img src="...">, <br>, <table><tr><th>. Hvordan vil du beskrive hva a, href, img, src, br, table, tr og th er? Det er det en direktiv er.

Svar #2

Kanskje en virkelig enkel og initial definisjon for Angular-direktiver ville være

AngularJS-direktiver (ng-direktiver) er HTML-attributter med en ng-prefiks (ng-model, ng-app, ng-repeat, ng-bind) brukt av Angular for å utvide HTML. (fra: W3schools Angular-opplæring)

Noen eksempler på dette ville være

ng-app-direktivet definerer en AngularJS-applikasjon.

ng-model-direktivet binder verdien av HTML-kontroller (input, select, textarea) til applikasjonsdata.

ng-bind-direktivet binder applikasjonsdata til HTML-visningen.

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

Sjekk denne veiledningen, for meg var den i det minste en av de beste introduksjonene til Angular. En mer komplett tilnærming ville være alt som @mark-rajcok sa tidligere.

Relaterte artikler