AngularJS-direktiver: ng-init, ng-app, ng-model og ng-repeat

by: James Hartman James Hartman
Hours oppdatert

⚡ Smart oppsummering

AngularJS-direktiver utvider ren HTML med ny oppførsel. Markørene ng-app, ng-init, ng-model og ng-repeat bootstrapper en applikasjon, setter lokale data i frø, binder skjemakontroller til modellen og kloner elementer én gang per samlingselement.

  • 🧩 Kjerneide: Et direktiv er en markør på et HTML-element som forteller AngularJS-kompilatoren at den skal knytte oppførsel til det.
  • 🚀 Bootstrap Point: ng-app deklarerer rotelementet og starter AngularJS automatisk så snart siden lastes inn.
  • 🧮 Lokale data: ng-init tilordner startverdier til omfangsvariabler inne i markupen, uten at det kreves noen kontroller.
  • 🔄 Toveisbinding: ng-model kobler en input, select eller textarea til en scope-egenskap, slik at redigeringer oppdaterer modellen umiddelbart.
  • ???? Gjentatt markering: ng-repeat kloner vertselementet sitt én gang for hvert element i en array eller et objekt.
  • 🎛️ Fire påkallingsformer: restrict-egenskapen aksepterer E, A, C og M for element-, attributt-, klasse- og kommentarsyntaks.
  • 📚 Bredere bibliotek: AngularJS sender dusinvis av innebygde direktiver, blant dem ng-bind, ng-if, ng-show, ng-class og ng-click.
Les mer

AngularJS-direktiver

Hva er Direktiv i AngularJS?

A Direktiv I AngularJS finnes det en kommando som gir HTML ny funksjonalitet. Når AngularJS går gjennom HTML-koden, vil den først finne direktivene på siden og deretter analysere HTML-siden deretter. Et enkelt eksempel på et AngularJS-direktiv, som vi har sett i tidligere kapitler, er «ng-model-direktivet». Dette direktivet brukes til å binde datamodellen vår til visningen vår.

OBS: Du kan ha grunnleggende AngularJS-kode på en HTML-side med direktivene ng-init, ng-repeat og ng-model uten behov for kontrollere. Logikken bak disse direktivene finnes i AngularJS-filen som leveres av GoogleKontrollere er neste nivå av AngularJS-programmeringskonstruksjoner som tillater forretningslogikk, men som nevnt er det ikke obligatorisk å ha en kontroller for at en applikasjon skal være en AngularJS-applikasjon.

Men hvordan ender en nettleser opp med å kjøre en?

Hvordan AngularJS-direktiver fungerer i HTML

Som vi definerte i innledningen, er et AngularJS-direktiv en måte å utvide funksjonaliteten til HTMLNår siden lastes inn, går AngularJS-kompilatoren gjennom DOM-en, matcher hvert element mot de registrerte direktivene og legger til oppførselen den finner.

AngularJS leveres med dusinvis av innebygde direktiver, pluss alle du registrerer selv. De fire som forklares nedenfor med utarbeidede eksempler, ng-app, ng-init, ng-model og ng-repeat, er de nybegynnere møter først. Før disse eksemplene, legg merke til de fire måtene et direktiv kan skrives på.

Hva er de fire typene AngularJS-direktiver?

Et direktiv er ikke alltid et attributt. AngularJS-kompilatoren kan matche et etter elementnavn, attributt, klassenavn eller kommentar, og hvert direktiv erklærer hvilke former det aksepterer gjennom sin restrict egenskap. Standardinnstillingen er EA, så både element- og attributtsyntaks fungerer med mindre du sier noe annet. Verdien er viktigst når du skriver ditt eget direktiv, fordi kompilatoren ignorerer enhver form som restrict-verdien ekskluderer.

begrense verdi Matchet av Eksempel på markering Typisk bruk
E Elementnavn Selvstendige blokker som eier en mal
A Egenskap Legge til atferd i et eksisterende element
C Klassenavn Eldre markup som ikke kan ta nye attributter
M Kommentar Sjelden, beholdt for bakoverkompatibilitet

👍 Tips: Foretrekker element- og attributtsyntaks. Offisiell referanse til AngularJS-direktivet behandler klasse- og kommentarskjemaer som eldre alternativer. Eksemplene nedenfor bruker alle attributtsyntaks.

RELATERTE ARTIKLER

ng-app i AngularJS

Dette brukes til å initialisere et AngularJS-program. Når dette direktivet er på plass på en HTML-side, forteller det i utgangspunktet AngularJS at denne HTML-siden er et AngularJS-program.

Eksempel på ng-app

Eksemplet nedenfor viser hvordan du gjør et vanlig HTML-program til et AngularJS-program.

ng-app i AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="">

    Tutorial Name : {{ "Angular" + "JS"}}

</div>

</body>
</html>

⚠️ Advarsel: Oppføringen beholder originalen chrset="UTF 8", nøyaktig som publisert. Det riktige attributtet er charset="UTF-8".

Code Forklaring:

  1. Direktivet «ng-app» legges til i div-taggen vår for å indikere at dette programmet er et AngularJS-program. Merk at ng-app-direktivet kan brukes på enhver tag, så det kan også plasseres i body-taggen.
  2. Fordi vi har definert denne applikasjonen som en AngularJS-applikasjon, kan vi nå bruke AngularJS-funksjonaliteten. I vårt tilfelle bruker vi uttrykk for å ganske enkelt sammenkoble to strenger.

Hvis koden kjøres uten problemer, vises resultatet nedenfor.

Utgang:

ng-app i AngularJS

Utdataene viser tydelig utdataene fra uttrykket, noe som kun ble muliggjort fordi vi definerte applikasjonen som en AngularJS-applikasjon. Det neste direktivet leverer dataene.

ng-init i AngularJS

Dette brukes til å initialisere applikasjonsdata. Noen ganger kan du trenge lokale data for applikasjonen din, og dette kan gjøres med ng-init-direktivet.

Eksempel på ng-init

I dette eksemplet skal vi lage en variabel kalt "TutorialName" ved å bruke ng-init-direktivet og vise verdien til den variabelen på siden.

ng-init i AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="TutorialName='Angular JS'">

    Tutorial Name : {{ TutorialName}}

</div>

</body>
</html>

Code Forklaring:

  1. ng-init-direktivet legges til div-taggen vår for å definere en lokal variabel kalt "TutorialName" og verdien gitt til dette er "AngularJS".
  2. Vi bruker uttrykk i AngularJS for å vise resultatet av variabelnavnet «TutorialName» som ble definert i ng-init-direktivet vårt.

Hvis koden kjøres uten problemer, vises resultatet nedenfor.

Utgang:

ng-init i AngularJS

I utgangen,

  • Resultatet viser tydelig resultatet av uttrykket som inneholder strengen "AngularJS". Dette er som et resultat av at strengen "AngularJS" blir tildelt variabelen 'TutorialName' i ng-init-delen.

Det neste direktivet sender data tilbake fra skjermen til modellen.

ng-modell i AngularJS

Og til slutt har vi ng-model-direktivet, som brukes til å binde verdien av en HTML-kontroll til applikasjonsdata.

Eksempel på ng-modell

I dette eksemplet,

  • Vi skal lage 2 variabler kalt "mengde" og "pris". Disse variablene kommer til å være bundet til 2 tekstinntastingskontroller.
  • Vi skal da vise totalbeløpet basert på multiplikasjon av både pris- og kvantitetsverdier.

ng-modell i AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="quantity=1;price=5">

    People : <input type="number" ng-model="quantity">

    Registration Price : <input type="number" ng-model="price">

    Total : {{quantity * price}}

</div>

</body>
</html>

Code Forklaring:

  1. ng-init-direktivet legges til vår div-tag for å definere 2 lokale variabler; den ene kalles "kvantitet" og den andre er "pris".
  2. Nå bruker vi ng-modelldirektivet til å binde tekstboksene "People" og "Registration price" til våre lokale variabler "quantity" og "price" henholdsvis.
  3. Til slutt viser vi totalen via et uttrykk, som er multiplikasjonen av mengde- og prisvariablene.

Hvis koden kjøres uten problemer, vises resultatet nedenfor.

Utgang:

ng-modell i AngularJS

  • Utgangen viser tydelig multiplikasjonen av verdiene for personer og registreringspris.

Hvis du nå endrer verdien for Personer og Registreringspris i tekstboksene, endres totalen automatisk.

ng-modell i AngularJS

  • Resultatet ovenfor viser bare kraften til databinding i AngularJS, som oppnås ved bruk av ng-modell direktiv.

Den siste av de fire håndterer mange verdier samtidig.

ng-gjenta i AngularJS

Dette brukes til å gjenta et HTML-element. Eksemplet nedenfor viser hvordan du bruker ng-gjenta direktiv.

Eksempel på ng-repetisjon

I dette eksemplet,

  • Vi skal ha en rekke kapittelnavn i en matrisevariabel og
  • bruk deretter ng-repeat-direktivet for å vise hvert element i matrisen som et listeelement

ng-gjenta i AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="chapters=['Controllers','Models','Filters']">
    <ul>
        <li ng-repeat="names in chapters">
            {{names}}
        </li>
    </ul>

</div>

</body>
</html>

Code Forklaring:

  1. ng-init-direktivet legges til vår div-tag for å definere en variabel kalt "kapitler", som er en matrisevariabel som inneholder 3 strenger.
  2. Elementet ng-repeat brukes ved å deklarere en innebygd variabel kalt "navn" og gå gjennom hvert element i kapittelmatrisen.
  3. Til slutt viser vi verdien av den lokale innebygde variabelen "navn".

Hvis koden kjøres uten problemer, vises resultatet nedenfor.

Utgang:

ng-gjenta i AngularJS

  • Utdataene ovenfor viser bare at ng-repeat-direktivet tok hver verdi i matrisen kalt "kapitler" og opprettet HTML-listeelementer for hvert element i matrisen.

Disse fire dekker oppstart, data, binding og repetisjon. Listen nedenfor viser hva som kommer videre.

Andre vanlige innebygde AngularJS-direktiver

De fire direktivene ovenfor er startsettet, ikke hele biblioteket. Hver oppføring nedenfor er et attributt som du plasserer direkte på elementet den kontrollerer.

  • ng-bind: Skriver en omfangsverdi inn i et elements tekst uten å kort vise rå parenteser ved lasting.
  • ng-hvis: Fjerner elementet fra DOM-en når uttrykket er usant, og gjenoppbygger det når det er sant.
  • ng-vis og ng-skjul: Togglsynlighet med CSS. Elementet forblir i DOM-en, så gjentatte vekslinger koster mindre.
  • ng-klasse: Legger til eller fjerner CSS-klasser fra et uttrykk, slik at stilen følger modellen.
  • ng-klikk: Kjører et uttrykk eller en omfangsfunksjon når brukeren klikker på elementet.
  • ng-kontroller: Kobler en kontroller til en markupblokk når siden vokser ut av ng-init.
  • ng-deaktivert og ng-skrivebeskyttet: Angi attributtet for samsvarende form når uttrykket deres er sant.

Vanlige spørsmål nedenfor svarer på spørsmålene som oftest følger etter denne listen.

Spørsmål og svar

AngularJS normaliserer attributtnavn før de matches. Den fjerner alle x- eller data-prefikser, og konverterer deretter bindestrek-, kolon- eller understrekingsskilletegn til camel-bokstaver. Det er derfor data-ng-app, x-ng-app og ng:app alle løses til samme ngApp-direktiv.

Begge skriver ut en omfangsverdi. Et interpolasjonsuttrykk kan kort vise sine rå parenteser før AngularJS er ferdig lastet, mens ng-bind lar elementet stå tomt til kompileringen er fullført. Foretrekk ng-bind for tekst som vises over bretten.

Nei. Offisiell støtte for AngularJS ble avsluttet i januar 2022, så ingen flere oppdateringer blir utgitt. Eksisterende sider fortsetter å fungere, men nye prosjekter bør starte på moderne Angular, hvor disse direktivene blir komponenter og strukturelle direktiver som *ngIf og *ngFor.

Delvis. Assistenter som GitHub Copilot omskriv ng-repeat som *ngFor og ng-if som *ngIf pålitelig. Arv av omfang, toveisbindinger og tilpassede lenkefunksjoner trenger fortsatt en menneskelig gjennomgang før den migrerte koden sendes.

Lim inn markupen, modulerklæringen og konsollutdataene i ChatGPT og spør hvilket direktiv som ikke samsvarte. Den oppdager vanligvis en manglende ng-app, et feilstavet attributt eller en restrict-verdi som blokkerer den valgte syntaksen.

Oppsummer dette innlegget med: