== 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. [[Image(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 SimpleControlleriin parametrinä sisään ja tästä operaatiosta käytetään AngularJS:ssä nimitystä ''dependency injection''. Esimerkin tapauksessa - SimpleControlleria käytettäessä - $scope injektoidaan sisään ja siihen on injektoinnin jälkeen mahdollista linkittää uusia attribuutteja, tietoja, kuten esimerkissä tehdään. $scopeen linkitetään esimerkissä customers -niminen taulukko, johon on mahdollista päästä käsiksi näkymässä. Näkymän koodiksi syötämme seuraavaa: {{{ Näkymät (Views) & Ohjaimet (Controllers) & Näkyvyys (scope)

Simple a Simple Controller

}}} Huomattavaa on, että SimpleController.js -skripti inkluudataan näkymään vasta angular.min.js-kirjaston sisällyttämise jälkeen ja että div-tagissa otamme varsinaisesti käyttöön aiemmin luomamme SimpleControllerin ng-controller-direktiivin avulla. Nyt kontrollerin vaikutusalue ulottuu koko divin alueelle. ---- [https://trac.cc.jyu.fi/projects/web-sovellukset/wiki/2014/angularjs/part2 Edellinen luku] [https://trac.cc.jyu.fi/projects/web-sovellukset/wiki/2014/angularjs/part4 Seuraava luku]