Wat is een AngularJS-richtlijn?
Een instructie in AngularJS is een commando dat HTML nieuwe functionaliteit geeft. Wanneer de HTML-code hoekig 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-model-richtlijn". Deze richtlijn wordt gebruikt om ons datamodel aan onze visie te binden.
Opmerking: u kunt basishoekcode in een HTML-pagina hebben met de richtlijnen ng-init, ng-repeat en ng-model zonder dat u controllers nodig hebt. De logica voor deze richtlijnen zit in het Angular.js-bestand dat wordt geleverd door Google. Controllers zijn de hoekprogrammeringsconstructies van het volgende niveau die bedrijfslogica mogelijk maken, maar zoals vermeld voor een toepassing om een hoektoepassing te zijn, is het niet verplicht om een controller te hebben.
In deze tutorial leer je-
- Hoe een richtlijn te creëren
- ng-app
- ng-init
- ng-model
- ng-herhalen
Hoe een richtlijn te creëren
Zoals we in de inleiding hebben gedefinieerd, zijn AngularJS-richtlijnen een manier om de functionaliteit van HTML uit te breiden.
Er zijn 4 richtlijnen gedefinieerd in AngularJS.
Hieronder vindt u de lijst met de AngularJS-richtlijnen, samen met voorbeelden om ze allemaal uit te leggen.
1) ng-app
Dit wordt gebruikt om een Angular.JS-toepassing te initialiseren. Wanneer deze richtlijn op zijn plaats is in een HTML-pagina, vertelt het in feite aan Angular dat deze HTML-pagina een angular.js-toepassing is.
Het onderstaande voorbeeld laat zien hoe u de ng-app-instructie gebruikt. In dit voorbeeld laten we zien hoe je van een normale HTML-applicatie een angularJS-applicatie kunt maken.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Code Verklaring:
- De "ng-app" -instructie 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 uitdrukkingen om eenvoudig 2 strings samen te voegen.
Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Uitgang:
De uitvoer toont duidelijk de uitvoer van de uitdrukking die alleen mogelijk werd gemaakt omdat we de applicatie als een angularjs-applicatie hebben gedefinieerd.
2) ng-init
Dit wordt gebruikt om toepassingsgegevens te initialiseren. Soms heb je misschien wat lokale data nodig voor je applicatie, dit kan gedaan worden met de ng-init richtlijn.
Het onderstaande voorbeeld laat zien hoe u de instructie ng-init gebruikt.
In dit voorbeeld gaan we een variabele met de naam "TutorialName" maken met behulp van de instructie ng-init en de waarde van die variabele op de pagina weergeven.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Code Verklaring:
- De ng-init-instructie wordt aan onze div-tag toegevoegd om een lokale variabele genaamd "TutorialName" te definiëren en de waarde die hieraan wordt gegeven is "AngularJS".
- We gebruiken uitdrukkingen in AngularJs om de uitvoer van de variabelenaam "TutorialName" weer te geven die is gedefinieerd in onze ng-init-richtlijn.
Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Uitgang:
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.
3) ng-model
En tot slot hebben we de ng-model-richtlijn, die wordt gebruikt om de waarde van een HTML-besturingselement aan toepassingsgegevens te binden. Het onderstaande voorbeeld laat zien hoe u de ng-model-richtlijn kunt gebruiken.
In dit voorbeeld
- We gaan 2 variabelen maken genaamd "hoeveelheid" en "prijs". Deze variabelen worden gebonden aan 2 besturingselementen voor tekstinvoer.
- We gaan dan het totale bedrag weergeven op basis van de vermenigvuldiging van zowel prijs- als hoeveelheidswaarden.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Code Verklaring:
- De instructie ng-init wordt aan onze div-tag toegevoegd om 2 lokale variabelen te definiëren; de ene heet "hoeveelheid" en de andere is "prijs".
- Nu gebruiken we de ng-model-richtlijn om de tekstvakken "Mensen" en "Registratieprijs" te binden aan onze lokale variabelen "hoeveelheid" en "prijs" respectievelijk.
- Ten slotte laten we het totaal zien via een uitdrukking, die de vermenigvuldiging is van de hoeveelheid- en prijsvariabelen.
Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Uitgang:
- De output toont duidelijk de vermenigvuldiging van de waarden voor personen en registratieprijs.
Als u nu naar de tekstvakken gaat en de waarde van de prijs voor personen en registratie wijzigt, wordt het totaal automatisch gewijzigd.
- De bovenstaande uitvoer toont alleen de kracht van gegevensbinding in angularJs, die wordt bereikt met het gebruik van de ng-model-richtlijn.
4) ng-herhalen
Dit wordt gebruikt om een HTML-element te herhalen. Het onderstaande voorbeeld laat zien hoe u de instructie ng-repeat kunt gebruiken.
In dit voorbeeld
- We krijgen een reeks hoofdstuknamen in een reeksvariabele en
- gebruik vervolgens de instructie ng-repeat om elk element van de array als een lijstitem weer te geven
Event Registration Guru99 Global Event
- {{names}}
Code Verklaring:
- De instructie ng-init wordt aan onze div-tag toegevoegd om een variabele genaamd "chapters" te definiëren, een arrayvariabele die 3 strings bevat.
- Het ng-repeat element wordt gebruikt door een inline variabele genaamd "names" te declareren en door elk element in de chapters array te gaan.
- Ten slotte laten we de waarde zien van de lokale inline variabele 'namen'.
Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Uitgang:
- De bovenstaande uitvoer laat alleen zien dat de ng-repeat-instructie elke waarde in de array met de naam "chapters" heeft overgenomen en HTML-lijstitems heeft gemaakt voor elk item in de array.
Overzicht
- Er worden richtlijnen gebruikt om de functionaliteit van HTML uit te breiden. Angular biedt ingebouwde richtlijnen zoals
- ng-app - Dit wordt gebruikt om een hoektoepassing te initialiseren.
- ng-init - Dit wordt gebruikt om toepassingsvariabelen te maken
- ng-model - Dit wordt gebruikt om HTML-besturingselementen aan toepassingsgegevens te binden
- ng-repeat - Wordt gebruikt om elementen te herhalen met hoekig.
