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

⚡ Smart opsummering

AngularJS-direktiver udvider almindelig HTML med ny adfærd. Markørerne ng-app, ng-init, ng-model og ng-repeat bootstrapper en applikation, sender lokale data, binder formularkontroller til modellen og kloner elementer én gang pr. samlingselement.

🧩 Kerneidé: En direktiv er en markør på et HTML-element, der fortæller AngularJS-compileren, at den skal knytte adfærd til det.
🚀 Bootstrap Point: ng-app deklarerer rodelementet og starter automatisk AngularJS, så snart siden indlæses.
🧮 Lokale data: ng-init tildeler startværdier til scope-variabler inde i markup'en uden behov for en controller.
🔄 Tovejsbinding: ng-model forbinder et input, en select- eller en textarea-funktion til en scope-egenskab, så redigeringer opdaterer modellen øjeblikkeligt.
???? Gentagen markering: ng-repeat kloner sit værtselement én gang for hvert element i et array eller objekt.
🎛️ Fire påkaldelsesformer: Egenskaben restrict accepterer E, A, C og M for element-, attribut-, klasse- og kommentarsyntaks.
📚 Bredere bibliotek: AngularJS sender dusinvis af indbyggede direktiver, blandt dem ng-bind, ng-if, ng-show, ng-class og ng-click.

Læs mere

Hvad er Direktiv i AngularJS?

A Direktiv I AngularJS er der en kommando, der giver HTML ny funktionalitet. Når AngularJS gennemgår HTML-koden, finder den først direktiverne på siden og analyserer derefter HTML-siden i overensstemmelse hermed. Et simpelt eksempel på et AngularJS-direktiv, som vi har set i tidligere kapitler, er "ng-model-direktivet". Dette direktiv bruges til at binde vores datamodel til vores view.

Bemærk: Du kan have grundlæggende AngularJS-kode på en HTML-side med direktiverne ng-init, ng-repeat og ng-model uden behov for controllere. Logikken bag disse direktiver findes i AngularJS-filen, som leveres af GoogleControllere er AngularJS-programmeringskonstruktioner på næste niveau, der tillader forretningslogik, men som nævnt er det ikke et krav, at en applikation har en controller for at være en AngularJS-applikation.

Men hvordan ender en browser med at køre en?

Sådan fungerer AngularJS-direktiver i HTML

Som vi definerede i introduktionen, er et AngularJS-direktiv en måde at udvide funktionaliteten af HTMLNår siden indlæses, gennemgår AngularJS-compileren DOM'en, matcher hvert element med de registrerede direktiver og vedhæfter den fundne adfærd.

AngularJS leveres med snesevis af indbyggede direktiver, plus dem du selv registrerer. De fire, der forklares nedenfor med udtænkte eksempler, ng-app, ng-init, ng-model og ng-repeat, er dem, begyndere møder først. Før disse eksempler, bemærk de fire måder, en direktiv kan skrives på.

Hvad er de fire typer AngularJS-direktiver?

En direktiv er ikke altid en attribut. AngularJS-compileren kan matche en efter elementnavn, attribut, klassenavn eller kommentar, og hver direktiv erklærer, hvilke former den accepterer gennem dens restrict egenskab. Standardindstillingen er EA, så både element- og attributsyntaks fungerer, medmindre du angiver andet. Værdien er vigtigst, når du skriver din egen direktiv, fordi compileren ignorerer enhver form, som restrict-værdien udelukker.

begrænse værdi	Matchet af	Typisk brug
E	Elementnavn	Selvstændige blokke, der ejer en skabelon
A	Attribut	Tilføjelse af adfærd til et eksisterende element
C	Klassens navn	Ældre markup, der ikke kan tage nye attributter
M	Kommentar	Sjælden, gemt for bagudkompatibilitet

💡 Tip: Foretrækker element- og attributsyntaks. Officiel reference til AngularJS-direktiv behandler klasse- og kommentarformularer som ældre indstillinger. Eksemplerne nedenfor bruger alle attributsyntaks.

ng-app i AngularJS

Dette bruges til at initialisere en AngularJS-applikation. Når denne direktiv er på plads på en HTML-side, fortæller den dybest set AngularJS, at denne HTML-side er en AngularJS-applikation.

Eksempel på ng-app

Eksemplet nedenfor viser, hvordan man laver en normal HTML-applikation om til en AngularJS-applikation.

<!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: Opslaget bevarer originalen chrset="UTF 8", præcis som udgivet. Den korrekte attribut er charset="UTF-8".

Code Forklaring:

Direktivet "ng-app" er tilføjet til vores div-tag for at indikere, at denne applikation er en AngularJS-applikation. Bemærk, at ng-app-direktivet kan anvendes på ethvert tag, så det kan også placeres i body-tagget.
Fordi vi har defineret denne applikation som en AngularJS-applikation, kan vi nu bruge AngularJS-funktionaliteten. I vores tilfælde bruger vi udtryk til blot at sammenkæde 2 strenge.

Hvis koden udføres korrekt, vises nedenstående output.

Output:

Outputtet viser tydeligt outputtet af udtrykket, hvilket kun blev muligt, fordi vi definerede applikationen som en AngularJS-applikation. Den næste direktiv leverer dens data.

ng-init i AngularJS

Dette bruges til at initialisere applikationsdata. Nogle gange kan du have brug for lokale data til din applikation, og dette kan gøres med ng-init-direktivet.

Eksempel på ng-init

I dette eksempel skal vi oprette en variabel kaldet "TutorialName" ved hjælp af ng-init-direktivet og vise værdien af denne variabel på siden.

<!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:

ng-init-direktivet føjes til vores div-tag for at definere en lokal variabel kaldet "TutorialName", og værdien givet til dette er "AngularJS".
Vi bruger udtryk i AngularJS til at vise outputtet af variabelnavnet "TutorialName", som blev defineret i vores ng-init-direktiv.

Hvis koden udføres korrekt, vises nedenstående output.

Output:

I outputtet,

Resultatet viser tydeligt outputtet af udtrykket, som indeholder strengen "AngularJS". Dette er et resultat af, at strengen "AngularJS" er tildelt variablen 'TutorialName' i ng-init sektionen.

Den næste direktiv sender data tilbage fra skærmen til modellen.

ng-model i AngularJS

Og endelig har vi ng-model-direktivet, som bruges til at binde værdien af en HTML-kontrol til applikationsdata.

Eksempel på ng-model

I dette eksempel

Vi skal lave 2 variable kaldet "mængde" og "pris". Disse variabler vil være bundet til 2 tekstinputkontroller.
Vi vil derefter vise det samlede beløb baseret på multiplikationen af både pris- og mængdeværdier.

<!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:

ng-init direktivet tilføjes til vores div tag for at definere 2 lokale variabler; den ene kaldes "mængde", og den anden er "pris".
Nu bruger vi ng-modeldirektivet til at binde tekstboksene "People" og "Registration price" til vores lokale variabler "quantity" og "price" henholdsvis.
Til sidst viser vi totalen via et udtryk, som er multiplikationen af mængde- og prisvariablerne.

Hvis koden udføres korrekt, vises nedenstående output.

Output:

Outputtet viser tydeligt multiplikationen af værdierne for personer og registreringspris.

Hvis du nu ændrer værdien af Personer og Registreringspris i tekstfelterne, ændres Totalen automatisk.

Ovenstående output viser blot styrken ved databinding i AngularJS, hvilket opnås ved hjælp af ng-model direktiv.

Den sidste af de fire håndterer mange værdier på én gang.

ng-gentag i AngularJS

Dette bruges til at gentage et HTML-element. Eksemplet nedenfor viser, hvordan du bruger ng-gentag direktiv.

Eksempel på ng-repeat

I dette eksempel

Vi kommer til at have en matrix af kapitelnavne i en matrixvariabel og
brug derefter ng-repeat-direktivet til at vise hvert element i arrayet som et listeelement

<!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:

ng-init-direktivet er tilføjet til vores div-tag for at definere en variabel kaldet "kapitler", som er en array-variabel, der indeholder 3 strenge.
ng-repeat-elementet bruges ved at erklære en inline-variabel kaldet "navne" og gå gennem hvert element i kapitel-arrayet.
Til sidst viser vi værdien af den lokale inline-variabel 'navne'.

Hvis koden udføres korrekt, vises nedenstående output.

Output:

Ovenstående output viser blot, at ng-repeat-direktivet tog hver værdi i arrayet kaldet "kapitler" og oprettede HTML-listeelementer for hvert element i arrayet.

Disse fire dækker opstart, data, binding og gentagelse. Listen nedenfor viser, hvad der kommer derefter.

Andre almindeligt anvendte indbyggede AngularJS-direktiver

De fire ovenstående direktiver er startsættet, ikke hele biblioteket. Hver post nedenfor er en attribut, som du placerer direkte på det element, den kontrollerer.

ng-bind: Skriver en omfangsværdi i et elements tekst uden kortvarigt at vise rå parenteser ved indlæsning.
ng-hvis: Fjerner elementet fra DOM'en, når dets udtryk er falsk, og genopbygger det, når det er sandt.
ng-show og ng-hide: Togglsynlighed med CSS. Elementet forbliver i DOM'en, så gentagne skift koster mindre.
ng-klasse: Tilføjer eller fjerner CSS-klasser fra et udtryk, så stylingen følger modellen.
ng-klik: Kører et udtryk eller en scope-funktion, når brugeren klikker på elementet.
ng-controller: Tilslutter en controller til en markup-blok, når siden vokser ud af ng-init.
ng-deaktiveret og ng-skrivebeskyttet: Angiv den matchende form-attribut, når deres udtryk er sandt.

De ofte stillede spørgsmål nedenfor besvarer de spørgsmål, der oftest følger efter denne liste.

Ofte Stillede Spørgsmål

AngularJS normaliserer attributnavne, før de matches. Den fjerner ethvert x- eller data-præfiks og konverterer derefter bindestreg-, kolon- eller understregningsseparatorer til camel-bogstaver. Derfor bruger data-ng-app, x-ng-app og ng:app alle den samme ngApp-direktiv.

Begge udskriver en scope-værdi. Et interpolationsudtryk kan kortvarigt vise sine rå parenteser, før AngularJS er færdig med at indlæse, mens ng-bind lader elementet være tomt, indtil kompileringen er færdig. Foretræk ng-bind til tekst, der vises over fold.

Nej. Den officielle support til AngularJS sluttede i januar 2022, så der udgives ikke yderligere programrettelser. Eksisterende sider fortsætter med at fungere, men nye projekter bør starte på moderne Angular, hvor disse direktiver bliver til komponenter og strukturelle direktiver såsom *ngIf og *ngFor.

Delvist. Assistenter som f.eks. GitHub Copilot Omskriv ng-repeat som *ngFor og ng-if som *ngIf pålideligt. Arv af omfang, tovejsbindinger og brugerdefinerede linkfunktioner kræver stadig en menneskelig gennemgang, før den migrerede kode sendes.

Indsæt markup'en, modulerklæringen og konsoloutputtet i ChatGPT og spørg hvilken direktiv der ikke matchede. Den finder normalt en manglende ng-app, en stavet attribut eller en restrict-værdi, der blokerer din valgte syntaks.

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

Hvad er Direktiv i AngularJS?

Sådan fungerer AngularJS-direktiver i HTML

Hvad er de fire typer AngularJS-direktiver?

ng-app i AngularJS

Eksempel på ng-app

ng-init i AngularJS

Eksempel på ng-init

ng-model i AngularJS

Eksempel på ng-model

ng-gentag i AngularJS

Eksempel på ng-repeat

Andre almindeligt anvendte indbyggede AngularJS-direktiver

Ofte Stillede Spørgsmål

Opsummer dette indlæg med:

Tilmeld dig nyhedsbrevet

Hvad er Direktiv i AngularJS?

Sådan fungerer AngularJS-direktiver i HTML

Hvad er de fire typer AngularJS-direktiver?

RELATEREDE ARTIKLER

ng-app i AngularJS

Eksempel på ng-app

ng-init i AngularJS

Eksempel på ng-init

ng-model i AngularJS

Eksempel på ng-model

ng-gentag i AngularJS

Eksempel på ng-repeat

Andre almindeligt anvendte indbyggede AngularJS-direktiver

Ofte Stillede Spørgsmål

Opsummer dette indlæg med:

Tilmeld dig nyhedsbrevet