AngularJS-direktiv: ng-init, ng-app, ng-model & ng-repeat

By: James Hartman James Hartman
Hours Uppdaterad

⚡ Smart sammanfattning

AngularJS-direktiv utökar vanlig HTML med nytt beteende. Markörerna ng-app, ng-init, ng-model och ng-repeat startar upp en applikation, sätter lokala data igång, binder formulärkontroller till modellen och klonar element en gång per samlingsobjekt.

  • 🧩 Kärnidé: Ett direktiv är en markör på ett HTML-element som anger för AngularJS-kompilatorn att koppla beteende till det.
  • 🚀 Bootstrap Point: ng-app deklarerar rotelementet och startar AngularJS automatiskt så snart sidan laddas.
  • 🧮 Lokala uppgifter: ng-init tilldelar startvärden till scopevariabler inuti markupen, utan att någon kontrollant krävs.
  • 🔄 Tvåvägsbindning: ng-model länkar en input, select eller textarea till en scope-egenskap, så redigeringar uppdaterar modellen direkt.
  • 📋 Upprepad markering: ng-repeat klonar sitt värdelement en gång för varje objekt i en array eller ett objekt.
  • 🎛️ Fyra åkallelseformer: Egenskapen restrict accepterar E, A, C och M för element-, attribut-, klass- och kommentarsyntax.
  • 📚 Bredare bibliotek: AngularJS skickar dussintals inbyggda direktiv, bland dem ng-bind, ng-if, ng-show, ng-class och ng-click.
Läs mer

AngularJS-direktiv

Vad är Direktiv i AngularJS?

A Direktiv I AngularJS finns ett kommando som ger HTML ny funktionalitet. När AngularJS går igenom HTML-koden kommer den först att hitta direktiven på sidan och sedan tolka HTML-sidan därefter. Ett enkelt exempel på ett AngularJS-direktiv, som vi har sett i tidigare kapitel, är "ng-model-direktivet". Detta direktiv används för att binda vår datamodell till vår vy.

Obs: Du kan ha grundläggande AngularJS-kod på en HTML-sida med direktiven ng-init, ng-repeat och ng-model utan att behöva ha Controllers. Logiken för dessa direktiv finns i AngularJS-filen som tillhandahålls av GoogleControllers är nästa nivås AngularJS-programmeringskonstruktioner som möjliggör affärslogik, men som nämnts är det inte obligatoriskt att ha en controller för att en applikation ska vara en AngularJS-applikation.

Men hur kör en webbläsare en?

Hur AngularJS-direktiv fungerar i HTML

Som vi definierade i inledningen är ett AngularJS-direktiv ett sätt att utöka funktionaliteten hos htmlNär sidan laddas, går AngularJS-kompilatorn igenom DOM-filen, matchar varje element mot de registrerade direktiven och kopplar det beteende den hittar.

AngularJS levereras med dussintals inbyggda direktiv, plus alla du själv registrerar. De fyra som förklaras nedan med bearbetade exempel, ng-app, ng-init, ng-model och ng-repeat, är de som nybörjare möter först. Innan dessa exempel, notera de fyra sätten ett direktiv kan skrivas.

Vilka är de fyra typerna av AngularJS-direktiv?

Ett direktiv är inte alltid ett attribut. AngularJS-kompilatorn kan matcha ett med hjälp av elementnamn, attribut, klassnamn eller kommentar, och varje direktiv deklarerar vilka former det accepterar genom sin [text/text/etc.]. restrict egenskap. Standardinställningen är EA, så både element- och attributsyntax fungerar om du inte anger något annat. Värdet är viktigast när du skriver ditt eget direktiv, eftersom kompilatorn ignorerar alla former som restrict-värdet exkluderar.

begränsa värdet Matchad av Exempel på uppmärkning Typisk användning
E Elementnamn Fristående block som äger en mall
A Attribut Lägga till beteende till ett befintligt element
C Klassnamn Äldre markup som inte kan ta nya attribut
M Kommentar Sällsynt, sparad för bakåtkompatibilitet

👍 Dricks: Föredra element- och attributsyntax. officiell referens för AngularJS-direktivet behandlar klass- och kommentarsformulär som äldre alternativ. Exemplen nedan använder alla attributsyntax.

RELATERADE ARTIKLAR

ng-app i AngularJS

Detta används för att initiera en AngularJS-applikation. När detta direktiv finns på en HTML-sida, talar det i princip om för AngularJS att den här HTML-sidan är en AngularJS-applikation.

Exempel på ng-app

Exemplet nedan visar hur man gör en vanlig HTML-applikation till en AngularJS-applikation.

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>

⚠️ Varning: Listningen behåller originalet chrset="UTF 8", exakt som publicerat. Det korrekta attributet är charset="UTF-8".

Code Förklaring:

  1. Direktivet "ng-app" läggs till i vår div-tagg för att indikera att den här applikationen är en AngularJS-applikation. Observera att ng-app-direktivet kan tillämpas på vilken tagg som helst, så det kan också placeras i body-taggen.
  2. Eftersom vi har definierat den här applikationen som en AngularJS-applikation kan vi nu använda AngularJS-funktionaliteten. I vårt fall använder vi uttryck för att helt enkelt sammanfoga två strängar.

Om koden körs korrekt visas utdata nedan.

Produktion:

ng-app i AngularJS

Utdata visar tydligt uttryckets utdata, vilket endast möjliggjordes eftersom vi definierade applikationen som en AngularJS-applikation. Nästa direktiv tillhandahåller dess data.

ng-init i AngularJS

Detta används för att initiera applikationsdata. Ibland kan du behöva lokala data för din applikation, och detta kan göras med ng-init-direktivet.

Exempel på ng-init

I det här exemplet kommer vi att skapa en variabel som heter "TutorialName" med ng-init-direktivet och visa värdet för den variabeln på sidan.

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 Förklaring:

  1. Direktivet ng-init läggs till i vår div-tagg för att definiera en lokal variabel som heter "TutorialName" och värdet som ges till detta är "AngularJS".
  2. Vi använder uttryck i AngularJS för att visa utdata från variabelnamnet "TutorialName" som definierades i vårt ng-init-direktiv.

Om koden körs korrekt visas utdata nedan.

Produktion:

ng-init i AngularJS

I utgången,

  • Resultatet visar tydligt resultatet av uttrycket som innehåller strängen "AngularJS". Detta är som ett resultat av att strängen "AngularJS" tilldelas variabeln 'TutorialName' i ng-init-sektionen.

Nästa direktiv skickar data tillbaka från skärmen till modellen.

ng-modell i AngularJS

Och slutligen har vi ng-model-direktivet, som används för att binda värdet av en HTML-kontroll till applikationsdata.

Exempel på ng-modell

I detta exempel,

  • Vi kommer att skapa 2 variabler som kallas "kvantitet" och "pris". Dessa variabler kommer att vara bundna till 2 textinmatningskontroller.
  • Vi kommer sedan att visa det totala beloppet baserat på multiplikationen av både pris- och kvantitetsvärden.

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 Förklaring:

  1. Direktivet ng-init läggs till i vår div-tagg för att definiera 2 lokala variabler; en kallas "kvantitet" och den andra är "pris".
  2. Nu använder vi ng-modelldirektivet för att binda textrutorna "People" och "Registration price" till våra lokala variabler "kvantitet" respektive "pris".
  3. Slutligen visar vi totalen via ett uttryck, vilket är multiplikationen av kvantitets- och prisvariablerna.

Om koden körs korrekt visas utdata nedan.

Produktion:

ng-modell i AngularJS

  • Resultatet visar tydligt multiplikationen av värdena för personer och registreringspris.

Om du nu ändrar värdet för Personer och Registreringspris i textrutorna ändras Totalen automatiskt.

ng-modell i AngularJS

  • Ovanstående utdata visar bara kraften i databindning i AngularJS, vilket uppnås med hjälp av ng-modelldirektivet.

Den sista av de fyra hanterar många värden samtidigt.

ng-upprepa i AngularJS

Detta används för att upprepa ett HTML-element. Exemplet nedan visar hur du använder ng-upprepa direktiv.

Exempel på ng-repeat

I detta exempel,

  • Vi kommer att ha en array av kapitelnamn i en arrayvariabel och
  • använd sedan direktivet ng-repeat för att visa varje element i arrayen som ett listobjekt

ng-upprepa 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 Förklaring:

  1. ng-init-direktivet läggs till i vår div-tagg för att definiera en variabel som heter "chapters" som är en arrayvariabel som innehåller 3 strängar.
  2. Elementet ng-repeat används genom att deklarera en inline-variabel som kallas "namn" och gå igenom varje element i kapitelmatrisen.
  3. Slutligen visar vi värdet på den lokala inline-variabeln "namn".

Om koden körs korrekt visas utdata nedan.

Produktion:

ng-upprepa i AngularJS

  • Ovanstående utdata visar bara att ng-repeat-direktivet tog varje värde i arrayen som kallas "kapitel" och skapade HTML-listobjekt för varje objekt i arrayen.

Dessa fyra täcker uppstart, data, bindning och repetition. Listan nedan visar vad som händer härnäst.

Andra vanligt förekommande inbyggda AngularJS-direktiv

De fyra direktiven ovan är startmängden, inte hela biblioteket. Varje post nedan är ett attribut som du placerar direkt på det element den kontrollerar.

  • ng-bindning: Skriver ett omfångsvärde i ett elements text utan att kortfattat visa råa klammerparenteser vid inläsning.
  • ng-om: Tar bort elementet från DOM-koden när dess uttryck är falskt och återuppbygger det när det är sant.
  • ng-visa och ng-dölja: Togglsynlighet med CSS. Elementet stannar kvar i DOM:en, så upprepade växlingar kostar mindre.
  • ng-klass: Lägger till eller tar bort CSS-klasser från ett uttryck, så att stilen följer modellen.
  • ng-klicka: Kör ett uttryck eller en scope-funktion när användaren klickar på elementet.
  • ng-kontroller: Kopplar en kontroller till ett markupblock när sidan växer ur ng-init.
  • ng-inaktiverad och ng-skrivskyddad: Ställ in attributet matchande form när deras uttryck är sant.

Vanliga frågor och svar nedan besvarar de frågor som oftast följer efter den här listan.

Vanliga frågor

AngularJS normaliserar attributnamn innan de matchas. Den tar bort alla x- eller data-prefix och konverterar sedan bindestreck, kolon eller understreck till camel case-tecken. Det är därför data-ng-app, x-ng-app och ng:app alla använder samma ngApp-direktiv.

Båda skriver ut ett scope-värde. Ett interpoleringsuttryck kan kort visa sina råa klammerparenteser innan AngularJS slutför laddningen, medan ng-bind lämnar elementet tomt tills kompileringen är klar. Föredra ng-bind för text som visas ovanför vikningen.

Nej. Det officiella stödet för AngularJS upphörde i januari 2022, så inga ytterligare patchar släpps. Befintliga sidor fortsätter att fungera, men nya projekt bör starta på moderna Angular, där dessa direktiv blir komponenter och strukturella direktiv som *ngIf och *ngFor.

Delvis. Assistenter som GitHub Copilot Skriv om ng-repeat som *ngFor och ng-if som *ngIf på ett tillförlitligt sätt. Arv av omfång, tvåvägsbindningar och anpassade länkfunktioner behöver fortfarande granskas av människor innan den migrerade koden skickas.

Klistra in markupen, moduldeklarationen och konsolutdata i ChatGPT och fråga vilket direktiv som inte matchade. Den hittar vanligtvis en saknad ng-app, ett felstavat attribut eller ett restrict-värde som blockerar din valda syntax.

Sammanfatta detta inlägg med: