Angular design pattern: MVC, MVVM or MV*?

Angular 2 isn’t really MVC (but I suppose you can draw parallels). It is Component Based. Let me explain:

Angular 1 is MVC and MVVM (MV*). Angular 1 was groundbreaking for several reasons, but one of the main reasons was because it used Dependency Injection. This was a new concept compared with other JS Frameworks like Backbone and Knockout.

Then React came out and completely transformed front end architecture. It made Front End think more about other options other than MVC and MVVM. Instead it created the idea of Component Based Architecture. This can be regarded as one of the most significant transformation of front-end architecture since HTML & JavaScript.

Angular 2 (and Angular 1.5.x) decided to take React’s approach and use Component Based Architecture. However, you can draw slight parallels between MVC, MVVM and Angular 2, which is why I think it can be a little confusing.

Having said this, there are no Controllers or ViewModels in Angular 2 (unless you hand craft them). Instead, there are components, which are made up of a Template (like a view), Classes and MetaData (Decorators).

For example, The Models are the classes that holds the data (eg a data contract to hold data returned by the http service using @angular/http). We can create a new class that adds methods and properties (logic), then merge the Model and the Class. This creates something like a ViewModel. We could then use this ViewModel within our Component.

But to call a Component’s Class or a Service a ViewModel or a Controller isn’t really correct. The Component contains the Template and the Class. IMO it’s a bit like Liskov’s Theory – a duck is not a duck – don’t try to force the MVC or MVVM pattern into Components as they are different. Think of Angular 2 as Components. But I can see why people would draw parallels to help their initial understanding.

Angular also uses Modules which is part of an upcoming version of JavaScript (ECMAScript 6). This is very powerful because JavaScript has always had problems with Namespaces and Code Organisation. This is where imports and exports come in to components.

Useful links:

https://medium.com/javascript-scene/angular-2-vs-react-the-ultimate-dance-off-60e7dfbc379c

Is angular2 mvc?

Leave a Comment