Angular design pattern: MVC, MVVM or MV*?

Question

Angular 1.x (AngularJS) was following more or less the MV* design principle because of its two-way data binding functionality.

Angular2 is adopting a component-based UI, a concept that might be familiar to React developers. In a sense, the Angular 1.x controllers and directives blur into the new Angular 2 Component.

This means that in Angular 2 there are no controllers and no directives. Instead, a component has a selector which corresponds to the html tag that the component will represent and a @View to specify an HTML template for the component to populate.

Angular2 still implements two-way data-binding but does not consist of models for example if I have a @Component that displays a list of articles and a class that defines the article object:

class Article { title: string; link: string; votes: number;  constructor(title: string, link: string, votes?: number){     this.title = title;     this.link = link;     this.votes = votes || 0; } 

This, in the MVC pattern would be considered the model.

So considering this what design pattern does Angular follow the closest?

Answer 1

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?

Answer 2

Both Angular 1 & Angular 2 are following MVC (Model, View, Controller) pattern.

In Angular 1, HTML markup is the View, Controller is the Controller & the Service (when it used to retrieve data) is the model.

In Angular 2, template is the View, class is the Controller & the Service (when it used to retrieve data) is the model.

Because Angular is a client side framework, the MVC pattern Angular follows may be called as MVVC (Model, View, View Controller).