AngularJS-richtlijnen
Met AngularJS kun je HTML uitbreiden met nieuwe attributen die Richtlijnen worden genoemd .
AngularJS heeft een set ingebouwde richtlijnen die functionaliteit bieden aan uw applicaties.
Met AngularJS kunt u ook uw eigen richtlijnen definiëren.
AngularJS-richtlijnen
AngularJS-richtlijnen zijn uitgebreide HTML-attributen met het voorvoegsel ng-.
De ng-apprichtlijn initialiseert een AngularJS-toepassing.
De ng-initrichtlijn initialiseert toepassingsgegevens.
De ng-modelrichtlijn bindt de waarde van HTML-besturingselementen (invoer, selectie, tekstgebied) aan toepassingsgegevens.
Lees over alle AngularJS-richtlijnen in onze AngularJS-richtlijnenreferentie .
Voorbeeld
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
De ng-apprichtlijn vertelt AngularJS ook dat het <div> -element de "eigenaar" is van de AngularJS-toepassing.
Dataverbinding
De {{ firstName }}uitdrukking in het bovenstaande voorbeeld is een AngularJS-gegevensbindingsuitdrukking.
Gegevensbinding in AngularJS bindt AngularJS-expressies met AngularJS-gegevens.
{{ firstName }}is gebonden met ng-model="firstName".
In het volgende voorbeeld zijn twee tekstvelden aan elkaar gebonden met twee ng-model-richtlijnen:
Voorbeeld
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>
Gebruik ng-initis niet erg gebruikelijk. In het hoofdstuk over controllers leert u hoe u gegevens initialiseert.
Herhalende HTML-elementen
De ng-repeatrichtlijn herhaalt een HTML-element:
Voorbeeld
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
De ng-repeatrichtlijn kloont in feite eenmaal HTML-elementen
voor elk item in een verzameling.
De ng-repeatrichtlijn die wordt gebruikt voor een reeks objecten:
Voorbeeld
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
AngularJS is perfect voor database CRUD-toepassingen (Create Read Update Delete).
Stelt u zich eens voor dat deze objecten records uit een database zouden zijn.
De in-app-richtlijn
De ng-apprichtlijn definieert het root-element van een AngularJS-toepassing.
De ng-apprichtlijn zal de toepassing automatisch opstarten (automatisch initialiseren) wanneer een webpagina wordt geladen.
De Warmterichtlijn
De ng-initrichtlijn definieert initiële waarden voor een AngularJS-toepassing.
Normaal gesproken gebruikt u ng-init niet. U gebruikt in plaats daarvan een controller of module.
Later leer je meer over controllers en modules.
De modellenrichtlijn
De ng-modelrichtlijn bindt de waarde van HTML-besturingselementen (invoer, selectie, tekstgebied) aan toepassingsgegevens.
De ng-modelrichtlijn kan ook:
- Geef typevalidatie voor toepassingsgegevens (nummer, e-mail, vereist).
- Geef de status van de applicatiegegevens op (ongeldig, vies, aangeraakt, fout).
- Geef CSS-klassen voor HTML-elementen.
- Bind HTML-elementen aan HTML-formulieren.
Lees meer over de ng-modelrichtlijn in het volgende hoofdstuk.
Nieuwe richtlijnen maken
Naast alle ingebouwde AngularJS-richtlijnen, kunt u uw eigen richtlijnen maken.
Nieuwe richtlijnen worden gemaakt met behulp van de .directivefunctie.
Om de nieuwe richtlijn aan te roepen, maakt u een HTML-element met dezelfde tagnaam als de nieuwe richtlijn.
Wanneer u een richtlijn een naam geeft, moet u een camel case-naam gebruiken
w3TestDirective, maar wanneer u deze aanroept, moet u een -gescheiden naam gebruiken w3-test-directive:
Voorbeeld
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
U kunt een richtlijn aanroepen door gebruik te maken van:
- Elementnaam
- Attribuut
- Klas
- Commentaar
De onderstaande voorbeelden zullen allemaal hetzelfde resultaat opleveren:
Elementnaam
<w3-test-directive></w3-test-directive>
Attribuut
<div w3-test-directive></div>
Klas
<div class="w3-test-directive"></div>
Commentaar
<!-- directive: w3-test-directive -->
Beperkingen
U kunt uw richtlijnen beperken om alleen door enkele van de methoden te worden aangeroepen.
Voorbeeld
Door een restricteigenschap toe te voegen met de waarde "A", kan de richtlijn alleen worden aangeroepen door attributen:
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
De wettelijke limietwaarden zijn:
Evoor ElementnaamAvoor AttribuutCvoor de lesMvoor commentaar
Standaard is de waarde EA, wat betekent dat zowel elementnamen als attribuutnamen de richtlijn kunnen aanroepen.