Angular design pattern: MVC, MVVM or MV*?

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?

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

https://stackoverflow.com/questions/35762515/is-angular2-mvc

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).

I am not too Keen on using M** notation (kind of abused and foggy). Anyways in my opinion the simplest and most effective way to put it is that in Angular2:

the class (Article in your case) represents the model

the Component merges view (in the Template) and controller (the Typescript logic)

I hope it helps

MVC and MVVM with AngularJS

MVC Design Pattern

To start with, MVC design pattern is not specific to AngularJS, you must have seen/implemented this pattern in many other programming languages.

MVC design pattern can be seen in AngularJS, but before getting into that let’s see what all does MVC design pattern includes:

Model: Model is nothing but data. View: View represents this data. Controller: Controller mediates between the two.

In MVC if we make any change in the the view it doesn’t gets updated in model. But in AngularJS, we have heard that there is something called 2-way binding and this 2-way binding enables MVVM design pattern.

MVVM basically includes 3 things:

Model View View Model Controller is actually replaced by View Model in MMVM design pattern. View Model is nothing but a JavaScript function which is again like a controller and is responsible for maintaining relationship between view and model, but the difference here is, if we update anything in view, it gets updated in model, change anything in model, it shows up in view, which is what we call 2-way binding.

This is why we say AngularJS follows MVVM design pattern.

In my humble opinion you can develop in Angular 2 using MVVM if you want to using some conventions:

1. A component contains the view (the template) and the viewmodel (the class).
2. You only miss the model and you can create it as a normal TypeScript class and pass it to the viewmodel as a constructor parameter.

The technology is pretty similar to the one available in PRISM and WPF and there you develop everything using MVVM (if you want to).

In Angular(excluding version 2 and above) we are using data binding feature. This data binding feature enforces MVVM pattern in ng application because controller in this case causing binding between V&M (changes to view causes change in model and vice versa) So in MVC terminology we can replace 'C' with 'VM' which give 'MVVM'