Onko Angular 2+ MVVM?

Lukas Marx
December 06, 2016

Angular

Olen lukenut tuollaisesta nyt useammasta eri paikasta: ”Angular on MVVM” tai ”Angular on MVC”. Huh, onko se sitä? En usko.

Kysymykseen ei oikeastaan voi vastata pelkällä kyllä tai ei. Ensinnäkin angular 2+ ei ole MVC! Rehellisesti sanottuna en tiedä, miten ihmiset joskus keksivät tuollaisia juttuja.

Tämä on affiliate-linkki. Saatamme saada provisiota tämän linkin kautta tehdyistä ostoksista.

Sen sijaan se noudattaa komponenttipainotteista arkkitehtuuria. Se ei siis ole MVVM eikä MVVM. Angular kuitenkin toteuttaa paljon MVVM:n käsitteitä. Joten tarvittaessa voi sanoa, että angular noudattaa MVVM-periaatetta. Nähdäksemme yhtäläisyydet tarkastelemme periaatetta tarkemmin angular-komponenttien yhteydessä.

”Oikein hienoa… mutta mikä on MVVM?”

MVVM tarkoittaa Model, View, ViewModel. Se on ohjelmistosuunnittelumalli ja sen tarkoitus on lisätä lähdekoodin luettavuutta ja ylläpidettävyyttä jakamalla koodi edellä mainittuihin kolmeen osaan. Joten miltä se näyttää angularissa?

Model

Model on säiliö, joka määrittelee kokonaisuuden rakenteen objektikeskeisen periaatteen mukaisesti. Se määritellään sisällön mukaan. Jos siis haluat käyttää Modelia käyttäjälle, se voisi näyttää tältä.

class User { name:string; email:string; address:string;}

Angularissa käytämme tyypillisesti Typescript-luokkia tai rajapintoja mallin määrittelyyn. Mallit ovat kuitenkin vain tavallisia vanhoja Javascript-objekteja.

Näkymä

Näkymä on sovelluksen visuaalinen kerros, joka sisältää kaikki käyttäjän näytöllä näkyvät visuaaliset elementit. Angular 2:n tapauksessa näkymä määritellään mallissa. Nämä mallit on kirjoitettu HTML- ja CSS-kielellä, mutta ne sisältävät myös Angular-kohtaisia elementtejä. Nämä mallit on liitetty ViewModeliin datan sitomisen kautta. Mallit ovat aina osa komponenttia.

ViewModel

Näkymämalli on näkymän abstrakti osa, joka hallinnoi näytöllä näytettäviä malleja ja ominaisuuksia. Se sisältää kaiken sivun logiikan. View ja ViewModel ovat usein yhteydessä toisiinsa datan sitomisella. Tämä tarkoittaa, että muutokset ViewModelissa, esimerkiksi jossakin ominaisuudessa, kohdistuvat välittömästi näkymään ja muuttavat esimerkiksi näytöllä näytettävää tekstiä. Angularissa ViewModelia edustaa komponentin Typescript-osa.

Havaitsimme siis, että angular-komponentti koostuu kahdesta osasta. Mallin (View) ja luokan (ViewModel). Tässä on yleiskatsaus angular-komponentteihin.

Angular-komponentit

Peruskomponentti angularissa koostuu kahdesta osasta. Ensimmäinen osa on komponentin määrittely. Sitä ympäröi @Component({}). Tuon määrittelyn sisällä voit määrittää komponentin ominaisuuksia, kuten valitsijan, jonka avulla voimme sijoittaa komponenttimme HTML:n kautta.

Tässä lohkossa määrittelemme myös näkymän. Voit tehdä sen lisäämällä html inline tai käyttämällä ylimääräistä tiedostoa. Suosin yleensä toista vaihtoehtoa paremman luettavuuden ja näiden kahden elementin selkeän erottamisen vuoksi. Tältä tämä osa voisi siis näyttää:

@Component({ selector:"nav-bar", templateUrl:"./component.html", styleUrls: })

Toinen osa on vastaava luokka logiikan toteuttamiseksi. Tämä luokka sijoitetaan samaan tiedostoon heti määrittelyn alapuolelle. Se on periaatteessa normaali typescript-luokka, joten siellä voi tehdä mitä tahansa.

export class NavBar{}

Näyttääksemme komponenttimme ruudulla meidän täytyy liittää se html-näkymään, joka on jo näytetty. Lähtökohtana on app.component.html. Joten kirjoittamalla

<nav-bar></nav-bar>

komponenttimme lisätään näkymään. Angularissa komponentit eivät voi olla siellä itsestään, vaan ne on aina lisättävä moduuliin. Tehdäksemme niin, lisäämme komponenttimme vain vanhemman moduulin declarations-osioon. Juurimoduuli on app.module.ts:n sisällä

@NgModule({ declarations: })

Kaikki komponenttien html-tiedostossa määritellyt asiat sijoitetaan komponentin selector-tagin sisälle ja näin ollen ne näkyvät näkymässä.

Tämä on affiliate-linkki. Saatamme saada palkkion tämän linkin kautta tehdyistä ostoksista.

Jos haluat oppia lisää komponenteista, tutustu perusteelliseen oppaaseeni angularin komponenteista.