| Version 27 (modified by japekall, 8 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.
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 seuraavan koodin:
<!DOCTYPE html>
<html ng-app>
<head>Näkymät (Views) & Ohjaimet (Controllers) & Näkyvyys (scope)</head>
<body>
<h3>Simple a Simple Controller</h3>
<div class="container" ng-controller="SimpleController">
<ul>
<li ng-repeat="cust in customers">
{{cust.name}} - {{cust.city}}
</li>
</ul>
</div>
<script src="angular.min.js"></script>
<script src="SimpleController.js"></script>
</body>
</html>
Huomattavaa on, että SimpleController?.js -skripti inkluudataan näkymään vasta angular.min.js-kirjaston sisällyttämisen 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 ja li-tagissa voidaan customers -taulukko iteroida läpi.
