AngularJS-direktiver: ng-init, ng-app, ng-model og ng-repeat
James Hartman
Hva er Direktiv i AngularJS?
A Direktiv i AngularJS er en kommando som gir HTML ny funksjonalitet. Når Angular 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-modelldirektivet". Dette direktivet brukes for å binde vår datamodell til vårt syn.
OBS: Du kan ha grunnleggende Angular-kode på en HTML-side med direktivene ng-init, ng-repeat og ng-model uten behov for kontrollere. Logikken bak disse direktivene finnes i Angular.js-filen som leveres av GoogleKontrollere er neste nivå av angulære programmeringskonstruksjoner som tillater forretningslogikk, men som nevnt er det ikke obligatorisk å ha en kontroller for at en applikasjon skal være en angulær applikasjon.
Hvordan lage direktiver i AngularJS
Som vi definerte i introduksjonen, er AngularJS-direktiver en måte å utvide funksjonaliteten til HTML.
Det er definert 4 direktiver i AngularJS.
Nedenfor er listen over AngularJS-direktivene sammen med eksempler gitt for å forklare hver enkelt av dem.
ng-app i AngularJS
Dette brukes til å initialisere en Angular.JS-applikasjon. Når dette direktivet er på plass på en HTML-side, forteller det i utgangspunktet Angular at denne HTML-siden er en angular.js-applikasjon.
Eksempel på np-app
Eksemplet nedenfor viser hvordan du bruker ng-app-direktivet. I dette eksemplet skal vi ganske enkelt vise hvordan du gjør en vanlig HTML-applikasjon til en angularJS-applikasjon.
<!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>
Code Forklaring:
- "ng-app"-direktivet er lagt til div-taggen vår for å indikere at denne applikasjonen er en angular.js-applikasjon. Merk at ng-app-direktivet kan brukes på hvilken som helst tag, så det kan også settes inn i body-taggen.
- Fordi vi har definert denne applikasjonen som en angular.js-applikasjon, kan vi nå bruke angular.js-funksjonaliteten. I vårt tilfelle bruker vi uttrykk for å bare sette sammen 2 strenger.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Utgang:
Utdataene viser tydelig utdataene til uttrykket som bare ble muliggjort fordi vi definerte applikasjonen som en angularjs-applikasjon.
ng-init i AngularJS
Dette brukes til å initialisere applikasjonsdata. Noen ganger kan du kreve noen lokale data for applikasjonen din, dette kan gjøres med ng-init-direktivet.
Eksempel på ng-init
Eksemplet nedenfor viser hvordan du bruker ng-init-direktivet.
I dette eksemplet skal vi lage en variabel kalt "TutorialName" ved å bruke ng-init-direktivet og vise verdien til den variabelen 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 legges til div-taggen vår for å definere en lokal variabel kalt "TutorialName" og verdien gitt til dette er "AngularJS".
- Vi bruker uttrykk i AngularJs for å vise utdataene til variabelnavnet "TutorialName" som ble definert i vårt ng-init-direktiv.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Utgang:
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.
ng-modell i AngularJS
Og til slutt har vi ng-modelldirektivet, som brukes til å binde verdien av en HTML-kontroll til applikasjonsdata. Eksemplet nedenfor viser hvordan du bruker ng-modelldirektivet.
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.
<!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 legges til vår div-tag for å definere 2 lokale variabler; den ene kalles "kvantitet" og den andre er "pris".
- Nå bruker vi ng-modelldirektivet til å binde tekstboksene "People" og "Registration price" til våre lokale variabler "quantity" og "price" henholdsvis.
- Til slutt viser vi totalen via et uttrykk, som er multiplikasjonen av mengde- og prisvariablene.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Utgang:
- Utgangen viser tydelig multiplikasjonen av verdiene for personer og registreringspris.
Nå, hvis du går til tekstboksene og endrer verdien på prisen for personer og registrering, vil totalen automatisk endres.
- Ovennevnte utgang viser bare kraften til databinding i angularJs, som oppnås ved bruk av ng-modell direktiv.
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
<!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 legges til vår div-tag for å definere en variabel kalt "kapitler", som er en matrisevariabel som inneholder 3 strenger.
- Elementet ng-repeat brukes ved å deklarere en innebygd variabel kalt "navn" og gå gjennom hvert element i kapittelmatrisen.
- Til slutt viser vi verdien av den lokale innebygde variabelen "navn".
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Utgang:
- Utdataene ovenfor viser bare at ng-repeat-direktivet tok hver verdi i matrisen kalt "kapitler" og opprettet HTML-listeelementer for hvert element i matrisen.
Sammendrag
- Direktiver brukes for å utvide funksjonaliteten til HTML. Angular gir innebygde direktiver som f.eks
- ng-app – Dette brukes til å initialisere en vinkelapplikasjon.
- ng-init – Dette brukes til å lage applikasjonsvariabler
- ng-modell – Dette brukes til å binde HTML-kontroller til applikasjonsdata
- ng-repeat – Brukes til å gjenta elementer ved å bruke vinkel.
