| Version 39 (modified by japekall, 8 years ago) (diff) |
|---|
2. Direktiivit (Directives) & Datan sitominen (Data binding) & Suodattimet (Filters)
2.1 Direktiivit
Direktiivit muodostavat AngularJS-frameworkin keskiön, joten on hyvä ymmärtää heti alkuunsa niiden merkitys. Voitaisiin todeta, että direktiivien avulla voidaan opettaa perusHTML:lle uusia tapoja esittää sovelluksen sisältöä ja logiikkaa. Direktiivien voidaan määrittää olevan attribuutteja, joita voidaan sisällyttää html-tagien sisään.
Tärkein AngularJS-direktiivi on
ng-app
jonka avulla angular.min.js -kirjasto tunnistaa jonkin elementin juurielementiksi. Tällainen juurielementti voi olla esimerkiksi
body
tai
html
-tagit. Tarkempia lisätietoja ng-app -direktiivistä löytyy täältä.
Ohessa esimerkki typistetystä AngularJS-sovelluksesta.
<!DOCTYPE html>
<html ng-app>
<body>
Hello Angular! <br/>
Name: <input type="text" ng-model="name"/> {{name}}
<script src="angular.min.js"></script>
</body>
</html>
Esimerkistä voidaan "bongata" myös toinen direktiivi - ng-model, jonka avulla voidaan taustalla linkittää uusi ominaisuus - name (nimi) - scopeen ja koska esimerkissämme ei ole erikseen määritelty käytettävää mallia, AngularJS luo automaattisesti tyhjän scopen, jonne esimerkin nimi -ominaisuus lisätään.
Esimerkkejä muista direktiiveistä ovat mm.
ng-repeat data-ng-init
joiden käytöstä lisätietoja sekä direktiivin määrittelylle löytyy AngularJS-sivuilta tästä linkistä.
2.3 Datan sitominen
AngularJS:ssä datan sitominen tapahtuu käyttämällä
{{ muuttuja }}
tyyppistä esitystä. Kaksoiskaarisulut alkuun ja loppuun ja sidottava muuttuja kaarisulkeiden väliin. Edellisessä koodiesimerkissä käytettiin koodia
Name: <input type="text" ng-model="name"/> {{name}}
joka käytännössä saisi aikaan sen, että html-sivulla olevan syötelaatikon viereen alkaisi ilmestyä sitä mukaan syötteitä, kun niitä syötetään tekstilaatikkoon. Tämä kaikki mahdollista pelkillä oletuksilla, ilman, että tarvitsee luoda erikseen modelia tai kontrolleria.
2.2 Suodattimet
