== 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ä esitystä. Kaksoiskaarisulut alkuun ja loppuun ja sidottava muuttuja kaarisulkeiden väliin. Edellisessä koodiesimerkissä käytettiin {{{ Name: {{name}} }}} ---- '''2.2 Suodattimet'''