How MVC pattern can be explained in Angular 2?

Question

Found a helpful blog for Angular: MVC Implementation but still looking for good explanation for Angular 2

Answer 1

General

I think that the pattern is really quite language agnostic. That is to say, the design/architecture patterns are rather abstract, and implementing them in different languages follows this more abstract presentation. That is not to say we can not make it more concrete given an example language, such as C# or Java, or an example framework such as Angular2.

Given that you already read some source on the MVC pattern, I am assuming that you have an understanding of how the pattern looks like in it's abstract form. It's a separation of Model, View and Controller. I will not dive further into the abstract presentation of this. Let's just take a look at Angular2.

Angular2-specific

Assuming that you are using angular2-cli. When you create a new component, a bunch of files are generated for you. The important ones are the ones ending on component.html and component.ts for understanding MVC. These are the view and controller respectively. The HTML, is what is presented to the user (along with some CSS for layout). It is easy to see how this represents the view. Next to it, we have the accompanying component.ts file. This is the controller. Essentially, it can choose which data to push to our view (.html) with the various forms of binding.

If you do not use angular2-cli, you could have them combined in one file. The HTML section is our view, Typescript our controller.

Lastly, we have the model. In angular2, the model will mostly be our services, which we can access through our controller. (sidenote: the services can be seen as another pattern, singleton pattern. Sidenote to the sidenote: this is true in most cases but look on SO for some workaround))

Though our model can extend beyond that. Our 'backend' can have more classes, that our services use to process or store information for example. This can belong to our model as well. We can have a class file for Person. A PersonService can then manage an array of Person. We could say that Person is still a model class.