Vad är ett AngularJS-direktiv?
Ett direktiv i AngularJS är ett kommando som ger HTML ny funktionalitet. När vinkel går igenom HTML-koden, kommer den att hitta direktiven på sidan och sedan analysera HTML-sidan i enlighet därmed.
Ett enkelt exempel på ett AngularJS-direktiv, som vi har sett i tidigare kapitel, är "ng-modelldirektivet". Detta direktiv används för att binda vår datamodell till vår syn.
Obs! Du kan ha grundläggande vinkelkod på en HTML-sida med direktiven ng-init, ng-repeat och ng-modellen utan att behöva ha kontroller. Logiken för dessa direktiv finns i Angular.js-filen som tillhandahålls av Google. Styrenheter är nästa nivå vinklade programmeringskonstruktioner som tillåter affärslogik, men som nämnts för en applikation att vara en vinkelapplikation är det inte obligatoriskt att ha en styrenhet.
I den här handledningen lär du dig-
- Hur man skapar direktiv
- ng-app
- ng-init
- ng-modell
- ng-upprepa
Hur man skapar direktiv
Som vi definierade i inledningen är AngularJS-direktiv ett sätt att utöka HTML-funktionaliteten.
Det finns fyra direktiv definierade i AngularJS.
Nedan är listan över AngularJS-direktiven tillsammans med exempel som tillhandahålls för att förklara var och en av dem.
1) ng-app
Detta används för att initialisera ett Angular.JS-program. När detta direktiv finns på en HTML-sida berättar det i princip Angular att denna HTML-sida är en angular.js-applikation.
Exemplet nedan visar hur man använder ng-app-direktivet. I det här exemplet ska vi helt enkelt visa hur man gör en normal HTML-applikation till en angularJS-applikation.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Kodförklaring:
- Direktivet "ng-app" läggs till i vår div-tagg för att indikera att denna applikation är en angular.js-applikation. Observera att ng-app-direktivet kan tillämpas på vilken tagg som helst, så att den också kan läggas i body-taggen.
- Eftersom vi har definierat denna applikation som en angular.js-applikation kan vi nu använda angular.js-funktionen. I vårt fall använder vi uttryck för att enkelt sammanfoga två strängar.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
Utgången visar tydligt resultatet av uttrycket som endast möjliggjordes eftersom vi definierade applikationen som en angularjs-applikation.
2) ng-init
Detta används för att initialisera applikationsdata. Ibland kan du behöva lite lokal data för din applikation, detta kan göras med ng-init-direktivet.
Exemplet nedan visar hur man använder ng-init-direktivet.
I det här exemplet ska vi skapa en variabel som heter "TutorialName" med hjälp av ng-init-direktivet och visa värdet på den variabeln på sidan.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Kodförklaring:
- 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".
- Vi använder uttryck i AngularJs för att visa utdata för variabelnamnet "TutorialName" som definierades i vårt ng-init-direktiv.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
I utgången,
- Resultatet visar tydligt resultatet av uttrycket som innehåller strängen "AngularJS". Detta beror på att strängen "AngularJS" tilldelas variabeln "TutorialName" i avsnittet ng-init.
3) ng-modell
Och slutligen har vi ng-modelldirektivet, som används för att binda värdet av en HTML-kontroll till applikationsdata. Exemplet nedan visar hur man använder ng-modelldirektivet.
I detta exempel,
- Vi ska skapa två variabler som kallas "kvantitet" och "pris". Dessa variabler kommer att bindas till två textinmatningskontroller.
- Vi kommer sedan att visa det totala beloppet baserat på multiplikationen av både pris- och kvantitetsvärden.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Kodförklaring:
- Direktivet ng-init läggs till i vår div-tagg för att definiera två lokala variabler; den ena kallas "kvantitet" och den andra är "pris".
- Nu använder vi ng-modelldirektivet för att binda textrutorna "Människor" och "Registreringspris" till våra lokala variabler "kvantitet" respektive "pris".
- Slutligen visar vi summan via ett uttryck, vilket är multiplikationen av kvantitets- och prisvariablerna.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
- Utdata visar tydligt multiplicering av värdena för personer och registreringspris.
Om du nu går till textrutorna och ändrar värdet på priset för personer och registrering ändras summan automatiskt.
- Ovanstående utdata visar bara kraften för databindning i angularJs, vilket uppnås med användning av ng-modelldirektivet.
4) ng-upprepa
Detta används för att upprepa ett HTML-element. Exemplet nedan visar hur man använder ng-repeat-direktivet.
I detta exempel,
- Vi kommer att ha en rad kapitelnamn i en arrayvariabel och
- använd sedan ng-repeat-direktivet för att visa varje element i arrayen som ett listobjekt
Event Registration Guru99 Global Event
- {{names}}
Kodförklaring:
- Direktivet ng-init läggs till i vår div-tagg för att definiera en variabel som kallas "kapitel" som är en matrisvariabel som innehåller tre strängar.
- Elementet ng-repeat används genom att deklarera en inbyggd variabel som heter "namn" och gå igenom varje element i kapitelarrayen.
- Slutligen visar vi värdet på den lokala inbyggda variabeln 'namn'.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren.
Produktion:
- Ovanstående utdata visar bara att ng-repeat-direktivet tog varje värde i matrisen som kallas "kapitel" och skapade HTML-listobjekt för varje objekt i arrayen.
Sammanfattning
- Direktiv används för att utöka HTML-funktionaliteten. Angular tillhandahåller inbyggda direktiv som
- ng-app - Detta används för att initiera en vinkelapplikation.
- ng-init - Detta används för att skapa applikationsvariabler
- ng-model - Detta används för att binda HTML-kontroller till applikationsdata
- ng-repeat - Används för att upprepa element med vinkel.