AngularJS-richtlijnen: ng-init, ng-app, ng-model & ng-repeat
James Hartman
Wat is richtlijn in AngularJS?
A Richtlijn in AngularJS is een commando dat HTML nieuwe functionaliteit geeft. Wanneer Angular de HTML-code doorloopt, zal het eerst de richtlijnen op de pagina vinden en vervolgens de HTML-pagina dienovereenkomstig parseren. Een eenvoudig voorbeeld van een AngularJS-richtlijn, die we in eerdere hoofdstukken hebben gezien, is de “ng-modelrichtlijn”. Deze richtlijn wordt gebruikt om ons datamodel aan onze visie te binden.
Opmerking: U kunt basishoekcode op een HTML-pagina plaatsen met de richtlijnen ng-init, ng-repeat en ng-model zonder dat u over controllers hoeft te beschikken. De logica voor deze richtlijnen bevindt zich in het Angular.js-bestand dat door Google wordt geleverd. Controllers zijn hoekprogrammeringsconstructies van het volgende niveau die bedrijfslogica mogelijk maken, maar zoals gezegd is het voor een applicatie die een hoekapplicatie is, niet verplicht om een controller te hebben.
Hoe u richtlijnen maakt in AngularJS
Zoals we in de inleiding hebben gedefinieerd, zijn AngularJS-richtlijnen een manier om de functionaliteit van HTML.
Er zijn 4 richtlijnen gedefinieerd in angularjs.
Hieronder vindt u de lijst met AngularJS-richtlijnen, samen met voorbeelden om ze allemaal uit te leggen.
ng-app in AngularJS
Dit wordt gebruikt om een Angular.JS-applicatie te initialiseren. Wanneer deze richtlijn op een HTML-pagina wordt geplaatst, vertelt het Angular feitelijk dat deze HTML-pagina een angular.js-toepassing is.
Voorbeeld van np-app
Het onderstaande voorbeeld laat zien hoe u de ng-app-richtlijn gebruikt. In dit voorbeeld laten we eenvoudigweg zien hoe u van een normale HTML-toepassing een angularJS-toepassing kunt maken.
<!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 Verklaring:
- De richtlijn “ng-app” is toegevoegd aan onze div-tag om aan te geven dat deze applicatie een angular.js-applicatie is. Merk op dat de ng-app-richtlijn op elke tag kan worden toegepast, dus deze kan ook in de body-tag worden geplaatst.
- Omdat we deze applicatie hebben gedefinieerd als een angular.js applicatie, kunnen we nu gebruik maken van de angular.js functionaliteit. In ons geval gebruiken we expressies om eenvoudigweg twee strings aan elkaar te koppelen.
Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Output:
De uitvoer toont duidelijk de uitvoer van de expressie, wat alleen mogelijk werd gemaakt omdat we de applicatie als een angularjs-applicatie hebben gedefinieerd.
ng-init in AngularJS
Dit wordt gebruikt om applicatiegegevens te initialiseren. Soms heeft u lokale gegevens nodig voor uw toepassing, dit kan worden gedaan met de ng-init-richtlijn.
Voorbeeld van ng-init
Het onderstaande voorbeeld laat zien hoe u de ng-init-richtlijn gebruikt.
In dit voorbeeld gaan we een variabele maken met de naam “TutorialName” met behulp van de ng-init-richtlijn en de waarde van die variabele op de pagina weergeven.
<!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 Verklaring:
- De ng-init-richtlijn is toegevoegd aan onze div-tag om een lokale variabele te definiëren met de naam “TutorialName” en de waarde die hieraan wordt gegeven is “AngularJS”.
- We gebruiken expressies in AngularJs om de uitvoer van de variabelenaam “TutorialName” weer te geven die is gedefinieerd in onze ng-init-richtlijn.
Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Output:
In de uitvoer,
- Het resultaat toont duidelijk de uitvoer van de expressie die de string “AngularJS” bevat. Dit komt doordat de string “AngularJS” is toegewezen aan de variabele 'TutorialName' in de ng-init-sectie.
ng-model in AngularJS
En ten slotte hebben we de ng-modelrichtlijn, die wordt gebruikt om de waarde van een HTML-besturingselement aan applicatiegegevens te koppelen. Het onderstaande voorbeeld laat zien hoe u de ng-modelrichtlijn gebruikt.
Voorbeeld van ng-model
In dit voorbeeld
- We gaan twee variabelen creëren, genaamd “hoeveelheid” en “prijs”. Deze variabelen worden gebonden aan twee besturingselementen voor tekstinvoer.
- We gaan dan het totale bedrag weergeven op basis van de vermenigvuldiging van zowel de prijs- als de hoeveelheidswaarden.
<!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 Verklaring:
- De ng-init-richtlijn is toegevoegd aan onze div-tag om twee lokale variabelen te definiëren; de ene heet “hoeveelheid” en de andere is “prijs”.
- Nu gebruiken we de ng-model-richtlijn om de tekstvakken van “Personen” en “Registratieprijs” respectievelijk aan onze lokale variabelen “hoeveelheid” en “prijs” te binden.
- Ten slotte geven we het totaal weer via een uitdrukking. Dit is de vermenigvuldiging van de variabelen hoeveelheid en prijs.
Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Output:
- De uitvoer toont duidelijk de vermenigvuldiging van de waarden voor Personen en Registratieprijs.
Als u nu naar de tekstvakken gaat en de waarde van de Personen- en Registratieprijs wijzigt, wordt het Totaal automatisch gewijzigd.
- De bovenstaande uitvoer toont slechts de kracht van gegevensbinding in angularJs, die wordt bereikt met behulp van de ng-modelrichtlijn.
ng-herhaling in AngularJS
Dit wordt gebruikt om een HTML-element te herhalen. In het onderstaande voorbeeld ziet u hoe u de ng-herhaal richtlijn.
Voorbeeld van ng-herhaling
In dit voorbeeld
- We krijgen een array met hoofdstuknamen in een arrayvariabele en
- gebruik vervolgens de ng-repeat-instructie om elk element van de array als een lijstitem weer te geven
<!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 Verklaring:
- De ng-init-richtlijn is toegevoegd aan onze div-tag om een variabele te definiëren met de naam “chapters”, een arrayvariabele die 3 strings bevat.
- Het ng-repeat-element wordt gebruikt door een inline variabele genaamd “names” te declareren en elk element in de chapters-array te doorlopen.
- Ten slotte tonen we de waarde van de lokale inline variabele 'names'.
Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Output:
- De bovenstaande uitvoer laat alleen zien dat de ng-repeat-richtlijn elke waarde in de array genaamd "chapters" heeft overgenomen en HTML-lijstitems heeft gemaakt voor elk item in de array.
Samenvatting
- Richtlijnen worden gebruikt om de functionaliteit van HTML uit te breiden. Angular biedt ingebouwde richtlijnen zoals
- ng-app – Dit wordt gebruikt om een hoekapplicatie te initialiseren.
- ng-init – Dit wordt gebruikt om applicatievariabelen te maken
- ng-model – Dit wordt gebruikt om HTML-besturingselementen aan applicatiegegevens te binden
- ng-repeat – Wordt gebruikt om elementen met een hoek te herhalen.
