Är Angular 2+ MVVM?

Lukas Marx
December 06, 2016

Angular

Jag har läst om det på flera ställen nu: ”Angular is MVVM” eller ”Angular is MVC”. Är det så? Jag tror inte det.

Frågan kan faktiskt inte besvaras med ett enkelt ja eller nej. För det första är angular 2+ inte MVC! Ärligt talat vet jag inte hur folk hittar på sånt ibland.

Detta är en affilierad länk. Vi kan få en provision för köp som görs via denna länk.

Istället följer den en komponentorienterad arkitektur. Den är alltså inte heller MVVM. Angular implementerar dock många av begreppen i MVVM. Så om du behöver kan du säga att angular följer MVVM-principen. För att se likheterna ska vi titta närmare på principen i samband med angularkomponenter.

”Mycket trevligt… men vad är MVVM?”

MVVVM står för Model, View, ViewModel. Det är ett mönster för programvarudesign och är tänkt att öka läsbarheten och underhållbarheten av källkoden genom att dela upp koden i de tre sektionerna som nämns ovan. Hur ser det ut i angular?

Model

En modell är en behållare som definierar strukturen för en enhet, enligt den objektorienterade principen. Den definieras av ditt innehåll. Så om du vill använda en modell för en användare kan den se ut så här:

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

I angular använder vi vanligtvis Typescript-klasser eller gränssnitt för att definiera modellen. Modeller är dock bara vanliga Javascript-objekt.

View

Vyn är det visuella lagret i programmet, inklusive alla visuella element som visas på användarens skärm. I fallet Angular 2 definieras vyn i en mall. Dessa mallar är skrivna i HTML och CSS men innehåller även angularspecifika element. Dessa mallar en anslutna till ViewModel via databindning. Mallar är alltid en del av en komponent.

ViewModel

ViewModel är en abstrakt del av vyn och hanterar de modeller och egenskaper som ska visas på skärmen. Den innehåller all logik för sidan. View och ViewModel är ofta sammankopplade via databindning. Det innebär att ändringar i ViewModel, t.ex. på en egenskap, omedelbart tillämpas på vyn och ändrar t.ex. den text som visas på skärmen. I angular representeras ViewModel av Typescript-delen av en komponent.

Så vi fick reda på, att en angular-komponent består av två delar. Mall (View) och en klass (ViewModel). Här är en översikt över angulära komponenter.

Angulära komponenter

En grundläggande komponent i angular består av två delar. Den första delen är komponentdefinitionen. Den är omgiven av @Component({}). Inom den definitionen kan du ange egenskaper för komponenten som en selektor, vilket gör att vi kan placera vår komponent via HTML.

I det blocket definierar vi också vyn. Du kan göra det genom att lägga till html inline eller använda en extra fil. Jag brukar föredra det andra alternativet för bättre läsbarhet och en tydlig separation av dessa två element. Så här kan den här delen se ut:

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

Den andra delen är motsvarande klass för att implementera logiken. Denna klass placeras i samma fil precis under definitionen. Det är i princip en vanlig typescript-klass, så du kan göra vad du vill där.

export class NavBar{}

För att visa vår komponent på skärmen måste vi koppla den till en html-vy, som redan är visad. Utgångspunkten är app.component.html. Så genom att skriva

<nav-bar></nav-bar>

fogas vår komponent till vyn. I Angular kan komponenter inte finnas där av sig själva, utan måste alltid läggas till i en modul. För att göra det är det bara att lägga till vår komponent i deklarationsavsnittet i den överordnade modulen. Rotmodulen finns inuti app.module.ts

@NgModule({ declarations: })

Allt som definieras i komponentens html-fil kommer att placeras inuti komponentens selector-tag och därför visas på skärmen.

Detta är en affiliate-länk. Vi kan få en provision för köp som görs via den här länken.

För att lära dig mer om komponenter kan du läsa min djupgående guide om komponenter i angular.