Is Angular 2+ MVVM?
December 06, 2016
Over dat laatste heb ik nu op verschillende plaatsen gelezen: “Angular is MVVM” of “Angular is MVC”. Huh, is dat zo? Ik denk het niet.
Daadwerkelijk is de vraag niet met een gewoon ja of nee te beantwoorden. Allereerst, angular 2+ is niet MVC! Eerlijk gezegd weet ik niet hoe mensen daar soms bij komen.
Dit is een affiliate link. Wij kunnen een commissie ontvangen voor aankopen die via deze link zijn gedaan.
In plaats daarvan volgt het een componentgeoriënteerde architectuur. Het is dus ook geen MVVM. Echter, angular implementeert veel van de concepten van MVVM. Dus als je moet, kun je zeggen dat angular het MVVM principe volgt. Om de overeenkomsten te zien, gaan we het principe nader bekijken in de context van angular componenten.
“Heel leuk… maar wat is MVVM?”
MVVM staat voor Model, View, ViewModel. Het is een software ontwerppatroon en is bedoeld om de leesbaarheid en onderhoudbaarheid van de broncode te vergroten, door de code op te delen in de drie eerder genoemde secties. Hoe ziet het er in Angular uit?
Model
Een Model is een container die de structuur van een entiteit definieert, volgens het object georiënteerde principe. Het wordt gedefinieerd door je inhoud. Dus als u een Model voor een Gebruiker wilt gebruiken, zou het er zo uit kunnen zien.
undefined
class User { name:string; email:string; address:string;}
In Angular gebruiken we Typescript-klassen of interfaces om het model te definiëren. Modellen zijn echter gewoon Javascript-objecten.
Merk op dat modellen geen logica mogen bevatten. Al uw logica moet worden gedefinieerd in het ViewModel.
View
De View is de visuele laag van de toepassing, inclusief alle visuele elementen die op het scherm van de gebruiker worden weergegeven. In het geval van Angular 2 wordt de view gedefinieerd in een template. Deze templates zijn geschreven in HTML en CSS maar bevatten ook Angular specifieke elementen. Deze templates zijn via data-binding verbonden met het ViewModel. Templates zijn altijd onderdeel van een component.
ViewModel
Het ViewModel is een abstract onderdeel van de View en beheert de modellen en eigenschappen die op het scherm getoond moeten worden. Het bevat alle logica voor de pagina. View en ViewModel zijn vaak verbonden via gegevensbinding. Dat betekent, dat veranderingen in het ViewModel, bijvoorbeeld aan een eigenschap, direct worden toegepast op de view, waardoor bijvoorbeeld de tekst die op het scherm wordt getoond verandert. In angular wordt het ViewModel gerepresenteerd door het Typescript deel van een component.
Dus we zijn erachter gekomen, dat een angular component uit twee delen bestaat. Template (View) en een Class (ViewModel). Hier is een overzicht van angular components.
Angular Components
Een basiscomponent in angular bestaat uit twee delen. Het eerste deel is de Component definitie. Het wordt omgeven door @Component({}). Binnen die definitie kun je eigenschappen van die component opgeven, zoals een selector, waarmee we onze component via HTML kunnen plaatsen.
In dat blok definiëren we ook de view. Je kunt dat doen door html inline toe te voegen of een extra bestand te gebruiken. Ik geef meestal de voorkeur aan de tweede optie voor een betere leesbaarheid en een duidelijke scheiding van deze twee elementen. Dus zo zou dit deel er uit kunnen zien:
undefined
@Component({ selector:"nav-bar", templateUrl:"./component.html", styleUrls: })
Het tweede deel is de bijbehorende klasse om de logica te implementeren. Deze klasse wordt in hetzelfde bestand geplaatst, direct onder de definitie. Het is in principe een normale typescript klasse, dus je kunt er in doen wat je wilt.
undefined
export class NavBar{}
Om ons component op het scherm te laten zien moeten we het koppelen aan een html view, die al getoond wordt. Het startpunt is de app.component.html. Dus door te schrijven
undefined
<nav-bar></nav-bar>
wordt onze component toegevoegd aan de view. In Angular kunnen componenten er niet zelf staan, maar moeten ze altijd aan een module worden toegevoegd. Om dit te doen, voeg gewoon onze component toe aan de declaraties sectie van de bovenliggende module. De hoofdmodule bevindt zich in de app.module.ts
undefined
@NgModule({ declarations: })
Alles wat in het html-bestand van de component wordt gedefinieerd, wordt in de selector-tag van de component geplaatst en dus op het scherm weergegeven.
Dit is een affiliatelink. Wij kunnen een commissie ontvangen voor aankopen die via deze link worden gedaan.
Wil je meer weten over componenten, bekijk dan mijn uitgebreide handleiding over componenten in angular.