Why is Angular called MV* framework

Question

From what I\'ve read until now (this answer precisely), it tends more towards MVVM pattern. Considering the data from services as Model, Angular controllers as VM and the HTML c

Answer 1

First I think, It is better to give some idea about MVC and MVVM.

More than describing on much more theoretical context. I'd rather explain with a simple example. Lets take buying a pizza.

MVC - It is something like what happens, when you call the pizza center and get delivered.

• You call a Call Center Guy(Controller) and make an order(input).
• Then the Call Center Guy(Controller) arranges Some Cooks(Model) to make the pizza, a Delivery Guy(View) to deliver the pizza.
• Then Delivery Guy(View) gets the pizza from Cooks(Model), wrap it nicely(output) and deliver to you.

MVVM - More like, what happens, when you go the shop and place your order to the waiter.

• You place your order(input) to the Waiter(View).
• The Waiter(View) place you order to the Cafe Manager(View Model).
• The Cafe Manager(View Model) arranges some Cooks(Model) to make the pizza.
• Cooks(Model) makes it ready and pass it to the Cafe Manager(View Model).
• Then the Cafe Manager(View Model) puts it into a nice plate, adds forks/knives, sauce dispenser etc. (Presentation).
• Waiter(View) keeps track of Cafe Manager(View Model). Once it's ready, then the Waiter(View) delivers to you.

When getting back to your question,

Can we say that MVC is a pattern for server side and MVVM for client side?

What I can say is Generally Yes. (might have some corner cases). I hope, you can use my above explanation to better deal in depth of your problem.

Addition to that since you are referring about AngularJS, in architecture, it is much close to MVVM (I am telling like that because it is more like there's no answer). Though we have Controllers in AngularJS, actually they exactly do the work of View-Models.

----------Update with AngularJS Specific Example----------

Since I would like to remain our scope inside Angular architecture. I am taking a general example.

• You have your HTML template for the component you are going to implement with AngularJS. [View]
• That HTML template is bound to a Controller, where inside that you would probably have something like this.controllerAs = vm. Actually this term vm refers to View-Model. [View-Model]

Ideally inside this controller, we should not implement business specific logic. If you want them to be included in the client side, you should have separate Factories, Services (custom) etc. to do that. What you can do is, you can include those (Factories, Services) inside the controller and call their required functions/methods to perform the operation required. Otherwise you can consider having your business logic in the server side and using inbuilt services(Ex: $http) to call them.

So Inside the controller we only have the implementations bound to view logic (display requirements) we want.

• So as I mentioned in the second point, you have either your [custom Factories, Services] or [set of REST services + $http], which consists your business logic. [Model]

So inside the communication flow what really happens is,

• A client(end user/another component) calls/initiates the HTML(View) preferably with some input.
• Then the controller(View-Model) gets the inputs and knows what the required task is.
• Then the controller calls the Factories, Services etc. inside the it(Model) to prepare the desired business specific output bound to the given input.
• The Model then processes the input and gives the desired output to the controller.
• Then the controller makes some display specific adjustments.
• Then the HTML will display.