Er Angular 2+ MVVM?

Lukas Marx
December 06, 2016

Angular

Jeg har læst om det forskellige steder nu: “Angular er MVVM” eller “Angular er MVC”. Huh, er det? Det tror jeg ikke.

Det spørgsmål kan faktisk ikke besvares med et almindeligt ja eller nej. Først og fremmest er angular 2+ ikke MVC! Helt ærligt, jeg ved ikke, hvordan folk kommer på den slags ting, nogle gange.

Dette er et affilieret link. Vi kan modtage en provision for køb, der foretages via dette link.

I stedet følger den en komponentorienteret arkitektur. Så det er hverken MVVM eller. Angular implementerer dog en masse af koncepterne i MVVM. Så hvis du har brug for det, kan du sige, at angular følger MVVM-princippet. For at se lighederne vil vi se nærmere på princippet i forbindelse med angular-komponenter.

“Meget fint … men hvad er MVVM?”

MVVVM står for Model, View, ViewModel. Det er et software desing pattern og suposed at øge læsbarhed og vedligeholdbarhed af kildekoden, ved at opdele koden i de 3 sektioner nævnt før. Hvordan ser det så ud i angular?

Model

En Model er en container, der definerer strukturen af en enhed, efter det objektorienterede princip. Den er defineret af dit indhold. Så hvis du vil bruge en Model til en bruger, kunne det se således ud:

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

I angular bruger vi typisk Typescript-klasser eller interfaces til at definere modellen. Modeller er dog bare almindelige Javascript-objekter.

View

View er det visuelle lag i programmet, herunder alle visuelle elementer, der vises på brugerens skærm. I tilfældet Angular 2 defineres visningen i en skabelon. Disse skabeloner er skrevet i HTML og CSS, men indeholder også angular-specifikke elementer. Disse skabeloner en forbundet til ViewModel via data-binding. Skabeloner er altid en del af en komponent.

ViewModel

ViewModel er en abstrakt del af visningen, der administrerer de modeller og egenskaber, der skal vises på skærmen. Den indeholder al logikken for siden. View og ViewModel er ofte forbundet via databinding. Det betyder, at ændringer i ViewModel, f.eks. på en egenskab, straks overføres til viewet, hvorved f.eks. den tekst, der vises på skærmen, ændres. I angular repræsenteres ViewModel af Typescript-delen af en komponent.

Så fandt vi ud af, at en angular-komponent består af to dele. Skabelon (View) og en klasse (ViewModel). Her er en oversigt over angular-komponenter.

Angular-komponenter

En grundlæggende komponent i angular består af to dele. Den første del er komponentdefinitionen. Den er omgivet af @Component({}). Inde i denne definition kan du angive egenskaber for denne komponent som en selector, hvilket vil give os mulighed for at placere vores komponent via HTML.

I denne blok definerer vi også visningen. Du kan gøre det ved at tilføje html inline eller bruge en ekstra fil. Jeg foretrækker normalt den anden mulighed for bedre læsbarhed og en klar adskillelse af disse to elementer. Så dette det, hvordan denne del kunne se ud:

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

Den anden del er den tilsvarende klasse til at implementere logikken. Denne klasse er placeret i den samme fil lige under definitionen. Det er i princippet en normal typescript-klasse, så du kan gøre, hvad du vil, derinde.

export class NavBar{}

For at vise vores komponent på skærmen skal vi knytte den til en html-visning, der allerede er vist. Udgangspunktet er app.component.html. Så ved at skrive

<nav-bar></nav-bar>

føjes vores komponent til visningen. I Angular kan komponenter ikke være der af sig selv, men skal altid tilføjes til et modul. For at gøre det, skal du blot tilføje vores komponent til deklarationsafsnittet i det overordnede modul. Rodmodulet er inde i app.module.ts

@NgModule({ declarations: })

Alt, hvad der er defineret i komponentens html-fil, vil blive placeret inde i komponentens selector-tag og derfor blive vist på skærmen.

Dette er et affilieret link. Vi kan modtage en provision for køb, der foretages via dette link.

For at lære mere om komponenter kan du læse min dybdegående guide om komponenter i angular.