Preloader BmnTeam

Understanding data binding and difference between MVC pattern and MVVM pattern

Model View Controller (MVC pattern)

Let me tell you a little bit about MVC pattern, that used in many frameworks nowadays. MVC pattern is the pattern where we have three major parts:
Example of MVC patter

Model(files that contain data for manipulation)
View (files that represent data to the end User.
Controller (files which manipulate with models to generate data to view and from view);

But as Angular framework use on client side it might be call as MVVM (Model, View, ViewModel). There is a small difference between traditional MVC (AngularJS) and current components base approaches. As picture shows this approach was usually used as AngularJS but in Angular 2+ applications, components approach became more popular. If you want to know how install Angular application using command line interface check out this article

In the picture we can see MVC pattern in Angular terms (a little bit simplified), the key aspect, which is not popular now, is the data binding, in the picture we see two ways data binding, which is not a mainstream now in Angular 2+, we will learn more about one way data binding in the following articles.

Model View ViewModel (MVVM pattern)

So now we split our MVC to MVC components which connected to each other through Services or @Input and @Output binding.

The modern approach has shown in the last picture. Here whole application based on components, which could be bind to a module, and all modules connected to the MainModule (AppModule by default).

This modern components base approach helps user to simplify interaction between components. One component could be stateful, which means that it may control some logic, but other can be stateless component, so they usually used as data representational components.

But does all of this mean that Angular use MVVM approach? The answer is rather yes than no, because the traditional ViewModel approach means that you just transfer data from or to UI, it's what all frontend frameworks do.

Hope Angular 6 development approach is more cleaner now, so let’s have a look how it’s connected with file structure in our application.

Front End Developer Maksim B.
Front End Web Developer Maksim B.