Angularin MVC-mallin arkkitehtuuri portletissa

Angularin käyttö portletissa ei poikkea Angularin käytöstä ”tavallisilla” web-sivuilla. Seppien esittämässä ratkaisussa ei käytetä muita kuin Angularin peruskirjastoa ja Angularin router-kirjastoa. Angular on MVC-framwork-kirjasto, ei komponenttikirjasto. Angular-pohjaisia komponenttikirjastoja on toteutettu useita, mutta tässä esimerkkiportletissa käytimme puhdasta HTML:aa kirjastokomponenttien sijasta.

Angular (tai tarkemmin AngularJS) mainitaan usein MVC-arkkitehtuurimallin esimerkkinä. Pikemminkin malli on MVVM, koska keskeinen osa mallia on kaksisuuntainen datan sidonta, joka vapauttaa web-koodarin työläältä HTML-sivun DOM-elementtipuun käsittelyltä. Data on sidottu HTML-elementteihin ja kun dataa sovelluslogiikasta muutetaan, muuttuu data myös elementeillä ja vice versa. MVC-malli on oikeastaan saanut yleisnimen aseman tämäntyyppisille arkkitehtuureille ja hyvä niin. Oleellisempaa on miettiä, miten Angular toimii, kuin se minkä arkkitehtuurimallin se tarkasti ottaen toteuttaa. SPA-arkkitehtuuri ottaa puolestaan kantaa toiseen seikkaan, eli miten sivuja ladataan useamman sivun sovelluksessa.

Angularin perusominaisuudet tiivistetysti:
– selkeä erottelu käyttöliittymän, sovelluslogiikkakoodin ja modelin välillä
– kaksisuuntainen datan sidonta HTML-elementtien sisällön ja modelilta haetun datan välillä
– modelin kutsujen kapselointi $http-service -olioiden taakse
– controllerit kapseloivat yhden näkymän takana olevan koodin ($scope)
– $router-service, joka mahdollistaa SPA-portletin toteutuksen

Angular on paljon muutakin, mutta keskitymme selkeyden vuoksi minimiin. Kun SPA-arkkitehtuurin saa toimimaan, Angularin omaisuuksia on helppo lisätä. Sepät käyttävät tässä MVC-termistöä niin, että View tarkoittaa HTML-tagitusta sivulla, sehän on sivun näkyvä osuus. Model on palvelimella ja RESTful sen käyttörajapinta selaimella, jota Angularin $http-service kutsuu. Sitä Angularin osaa, joka kutsuu Modelia, kutsumme ”pikku-modeliksi”. Puolestaan se osa, joka on sidottu käyttöliittymän elementteihin ($scope), kutsutaan vastaavasti ”pikku-viewiksi”. Näiden väliin jää Javascriptilla Angularin controllereihin kirjoitettava sovelluslogiikka. Siellä säilytetään myös sovelluksen tila. Tämä juhlava termi tarkoittaa datan arvojen säilyttämistä – ei sitä kannata aina palvelimelta hakea, jos sen voi pitää tallessa selaimessa.

Tässä termistössä varsinaiset View (HTML) ja Model (RESTful-Server) ovat siis Angularin MVC-rakenteen ulkopuolella. Tavallaan on kyse tällaisesta arkkitehtuurimallista: HTML-VCM-RESTful-Server. Mallin voi vapaasti ymmärtää toisinkin, ymmärrys on tärkeintä, pitää tietää mitä mikin osa tekee ja miten ne kommunikoivat keskenään. Kuva kertoo tarkemmin.

Seuraavassa blogissa sepät käsittelevät Angular-koodia JSP-sivuilla ja Javascript-tiedostoissa.