wiki:2014/angularjs/part2

Version 26 (modified by japekall, 5 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 html-sivun AngularJS-sovellukseksi. AngularJS-dokumentaatiossa selvennetään ng-app -direktiivin määrävään sovelluksen juurielementin, joka tyypillisesti on

body
}}} tai 
{{{
html
}}} -tagi.

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

Yllä olevasta esimerkistä voidaan "bongata" myös toinen direktiivi - ng-model, jonka avulla voidaan taustalla linkittää uusi ominaisuus - name (nimi) - näkyvyysavaruuteen, skouppiin ja koska esimerkissämme ei ole erikseen määritelty käytettävää em. näkyvyyttä, mallia, AngularJS luo automaattisesti tyhjän skoupin, 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'''

----
'''2.2 Suodattimet'''

}}}