== 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 [http://docs.angularjs.org/api/ng/directive/ngApp täältä]. Ohessa esimerkki typistetystä AngularJS-sovelluksesta. {{{ Hello Angular!
Name: {{name}} }}} 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 [http://docs.angularjs.org/api/ng/directive tästä linkistä]. ---- '''2.3 Datan sitominen''' ---- AngularJS:ssä datan sitominen tapahtuu käyttämällä {{{ {{ muuttuja }} }}} tyyppistä datan sitomislauseketta. Kaksoiskaarisulut alkuun ja loppuun ja sidottava muuttuja kaarisulkeiden väliin. Edellisessä koodiesimerkissä käytettiin koodia {{{ 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''' ---- Lähdetään tarkastelemaan AngularJS-suodattimia koodiesimerkin avulla. Seuraavassa koodissa määritellään html-tagi juurielementiksi, ng-init-direktiivin avulla määritellään names-niminen taulukko, johon ladotaan neljä nimeä. {{{ }}}