wiki:2014/angularjs/part3

Version 20 (modified by japekall, 4 years ago) (diff)

--

3. Näkymät (Views) & Ohjaimet (Controllers) & Näkyvyys (scope)


3.1 Yleistä

MVC-mallin perusperiaatteena on siis tehdä sovelluksista mahdollisimman helposti ylläpidettäviä ja testattavia sekä vähentää ns.spagetti-koodin käyttäminen minimiin. Käytännössä tämä tarkoittaa sitä, ettei sovelluksen näkymään saa laittaa logiikka-aiheisia asioita, eikä kontrolleriin taas vastavuoroisesti näkymäkeskeisiä asioita. Ideaalisinta olisi, jos kummatkaan (näkymät ja kontrollerit) osapuolet eivät tietäisi mitään toistensa olemassaolosta. Kontrollerin tarkoituksena olisi pelkästään ohjata, kontrolloida sitä, mitä tietoa, dataa sidotaan aina kulloiseenkin näkymään ja erittäin tärkeää osaa - kontrollerin ja näkymät toisiinsa yhdistävänä tekijänä - näyttelee AngularJS:ssä

$scope

-niminen objekti. $scope toimii siis eräänlaisena liimana, jonka avulla voidaan sitoa näkymä ja kontrolleri toisiinsa kuitenkin niin, että osapuolten ei tarvitse tietää toisistaan mitään. Oheinen kuva havainnollistaa $scopen roolia entiteetit toisiinsa yhdistävänä liimana.

http://javacoder.eu/angular/mvc.png

3.2 Esimerkki

Havainnollistamme edellisiä asioita yksinkertaisen esimerkin avulla. Esimerkkiimme tarvitsemme näkymän sekä kontrollerin. Luomme ensiksi kontrollerin, jolle nimeksi annamme SimpleController?. Kontrolleri voidaan luoda ulkoiseen javascript-tiedostoon ja sisällöksi syötetään seuraava koodi:

function SimpleController($scope) {
	$scope.customers = [
	{name:'Sari',city:'Rauma'},
	{name:'Jouni',city:'Boston'},
	{name:'Jukka',city:'Tokyo'},
	{name:'Tanja',city:'Sastamala'}
	];
}

Huomattavaa on, että $scope välitetään SimpleControllerille? parametrinä sisään ja tästä operaatiosta käytetään AngularJS:ssä nimitystä dependency injection. Eli esimerkin tapauksessa - SimpleControlleria? käytettäessä - $scope injektoidaan sisään ja siihen on injektoinnin jälkeen mahdollista lisätä uusia


Edellinen luku Seuraava luku