wiki:2014/angularjs/part2

Version 51 (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ä datan sitomislauseketta. 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


Lähdetään tarkastelemaan AngularJS-suodattimia koodiesimerkin avulla. Seuraavassa esimerkissä määritellään ensin html-tagi juurielementiksi, body-tagissa ng-init-direktiivin avulla määritellään customers-niminen taulukko, jonne lisätään kolme henkilöä ja henkilöille paikkakunnat. Syötekenttään on mahdollista kirjoittaa haettavan henkilön nimi. li -elementissä sitten tulostetaan customers-taulukon sisältö ng-repeat-direktiivin avulla.

<html ng-app>
	<head>Directivess, Databingins Syntax</head>
	<body data-ng-init="customers=[
	{name:'Jan Kallio',city:'Lohja'},
	{name:'Jori Suikkala',city:'Mertala'},
	{name:'Sanna Luomala',city:'Helsinki'}
	]">
	<br/>
		<input type="text" data-ng-model="nameText" />
		<ul>
			<li ng-repeat="cust in customers">
			{{cust.name}}  - {{cust.city}}
			</li>
		</ul>
		<script src="angular.min.js"></script>
	</body>
</html>

Mitä jos vaikka nimiä haluttaisiin suodattaa jotenkin? Haluttaisiin vaikkapa tulostaa nimet isolla ja kaupungien nimet pienellä. AngularJS:ään sisäänrakennetun "putkituksen" avulla operaatiot onnistuvat hyvinkin helposti seuraavanlaisesti:

{{cust.name | uppercase}}  - {{cust.city | lowercase}}

Tai entä jos halutaan hyödyntää hakua ja hakea henkilöitä syötekentän (nameText) sisällön perusteella? Suodattaminen onnistuu helposti. Lisätään vain li ng-repeat-direktiiviin putkitus ja filter: nameText -teksti. Jos suodatusta halutaan edelleen tarkentaa ja halutaan lajitella henkilöt kaupungien mukaan nousevaan järjestykseen. Kuten arvata voi, operaatio onnistuu jälleen putkittamalla ng-repeat-direktiiviä ja lisäämällä listan perään orderBy: 'city' -teksti.

<li ng-repeat="cust in customers | filter:nameText">
{{cust.name | uppercase}}  - {{cust.city | lowercase}}
</li>

li-pätkä koodista lopullisessa muodossa

<li ng-repeat="cust in customers | filter:nameText | orderBy:'city'">
{{cust.name | uppercase}}  - {{cust.city | lowercase}}
</li>

Seuraava luku Edellinen luku