AngularJS Directieven

AngularJS staat u toe om gebruik te maken van een genaamd “instructiesnieuwe eigenschappen om HTML uit te breiden.

AngularJS heeft een set ingebouwde instructies die functionaliteit bieden aan uw applicatie.

AngularJS laat je ook je eigen instructies definiëren.

AngularJS Directieven

AngularJS-instructies zijn uitgebreide HTML-eigenschappen met de voorvoegsel ng-.

ng-app Instructie initieert de AngularJS-toepassing.

ng-init Instructie initieert de toepassinggegevens.

ng-model Een instructie bindt de waarde van HTML-kontrolelelementen (input, select, textarea) aan toepassinggegevens.

Lees meer over alle AngularJS-instructies in onze AngularJS-instructiehandleiding.

instantie

<div ng-app="" ng-init="firstName='Bill'">
<p Naam: <input type="text" ng-model="firstName"></p>
<p>Je hebt geschreven: {{ firstName }}</p>
</div>

Probeer het zelf

ng-app de instructie laat AngularJS weten dat de <div>-element het "eigenaar" van de AngularJS-applicatie is.

data-binding

In het vorige voorbeeld {{ firstName }} Een expressie is een AngularJS data-binding expressie.

AngularJS koppelt AngularJS-expressies aan AngularJS-gegevens via data-binding.

{{ firstName }} en ng-model="firstName" gebonden.

In het volgende voorbeeld zijn twee tekstvelden gebonden via twee ng-model-instructies:

instantie

<div ng-app="" ng-init="quantity=1;price=5">
Aantal: <input type="number" ng-model="quantity">
Kosten:    <input type="number" ng-model="price">
Totaal in dollars: {{ quantity * price }}
</div>

Probeer het zelf

Gebruik ng-init is niet zo vaak te zien. Je zult in het hoofdstuk over controllers leren hoe je gegevens initieert.

Herhalen van HTML-elementen

ng-repeat Instructie die HTML-elementen herhaalt:

instantie

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

Probeer het zelf

ng-repeat de instructie kloont eigenlijk elk item in de verzamelingkloont een HTML-element eenmaal.

wordt gebruikt voor object arrays ng-repeat Instructie:

instantie

<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>

Probeer het zelf

AngularJS is zeer geschikt voor database CRUD (creëren, lezen, bijwerken, verwijderen) toepassingen.

Stel je voor dat deze objecten records zijn van een database.

ng-app-instructie

ng-app Definieert de AngularJS-toepassing.hoofd-element.

wanneer de webpagina wordt geladenng-app Een instructie bindtAutomatische boot(automatisch initialiseren) de toepassing.

ng-init-instructie

ng-init Definieert de AngularJS-toepassing.Startwaarde.

Over het algemeen gebruikt u ng-init niet. U zult overgaan op controllers of modules.

U zult later meer te weten komen over controllers en modules.

ng-model-instructie

ng-model Een instructie bindt de waarde van HTML-kontrolelelementen (input, select, textarea) aan toepassinggegevens.

ng-model Een instructie kan ook:

  • biedt typevalidatie aan voor toepassinggegevens (getal, e-mail, vereist)
  • biedt status aan voor toepassinggegevens (ongeldig, vuil, aangeraakt, fout)
  • biedt CSS-klassen aan voor HTML-elementen
  • bindt HTML-elementen aan HTML-formulieren

Lees meer over ng-model informatie over de instructie.

Nieuwe instructie maken

Naast alle ingebouwde AngularJS-instructies kunt u ook uw eigen instructies maken.

Een nieuwe instructie wordt gemaakt door .directive gemaakt door de functie.

Om een nieuwe instructie aan te roepen, maak een HTML-element aan met dezelfde merknaam als de nieuwe instructie.

bij het benoemen van een instructie moet u schuintoevoeging gebruikenw3TestDirectivemaar wanneer u het aanroept, moet u de naam scheiden met een -w3-test-directive:

instantie

<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "<h1>Gemaakt door een directieve!</h1>"
  });
});
</script>
</body>

Probeer het zelf

U kunt de instructie op de volgende manier aanroepen:

  • Elementnaam
  • Eigenschap
  • Klasse
  • Opmerking

De volgende voorbeelden zullen hetzelfde resultaat opleveren:

Elementnaam

<w3-test-directive></w3-test-directive>

Probeer het zelf

Eigenschap

<div w3-test-directive></div>

Probeer het zelf

Klasse

<div class="w3-test-directive"></div>

Probeer het zelf

Opmerking

<!-- directive: w3-test-directive -->

Probeer het zelf

Beperking

Je kunt je directieve beperken tot het worden aangeroepen via bepaalde methoden.

instantie

door een waarde van "A" van restrict eigenschappen, deze directieve kan alleen via eigenschappen worden aangeroepen:

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>Gemaakt door een directieve!</h1>"
  });
});

Probeer het zelf

Geldige restrict-waarden zijn:

  • E representeren elementnamen
  • A representeren eigenschappen
  • C representeren klassen
  • M representeren opmerkingen

Standaard is deze waarde EA, wat betekent dat zowel elementnamen als attribuutnamen direct kunnen worden aangeroepen.