10

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 containing angular bindings as the View.

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

Can someone explain with example (in context of Angular) how we can implement MVC and MVVM.

I've read about the concept of using var vm = this; in Angular controllers. But does it mean by just using an alias for our controller we convert our Angular app from MVC to MVVM.

Community
  • 1
  • 1
Shreyas
  • 1,927
  • 17
  • 34

2 Answers2

20

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.

enter image description here

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.

enter image description here

  • 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.
Supun Wijerathne
  • 11,964
  • 10
  • 61
  • 87
  • you example was clear, but can you explain in context of actual angular implementation. that would be great. – Shreyas Sep 17 '16 at 18:37
  • Not completely. According to your answer, does it mean if I don't use an alias say `vm` (in this case), it's the MVC I've implemented. – Shreyas Sep 23 '16 at 05:10
  • @Shreyas definitely no. if you declare it as 'vm' or any other you want. it doesn't matter. Angular is a pretty much MVVM framework. That was what I explained. – Supun Wijerathne Sep 23 '16 at 05:20
  • ok so why is it called as MV* and how can i implement MVC in angular – Shreyas Sep 23 '16 at 05:44
  • it is called MV* (MVWhatever) because AngularJS is referred as both MVC and MVVM by different people. You can see thi video https://frontendmasters.com/courses/angularjs-mvc-mvvm-mvwhatever/ and get an idea. I think your second question will also get answered with that. Actually that one is not a pretty valid question according Angular architecture. – Supun Wijerathne Sep 23 '16 at 06:29
1

Let's just see a bit about the history of MVVM: MVVM was originally defined by Microsoft for use with Windows Presentation Foundation (WPF) and Silverlight, having been officially announced in 2005 by John Grossman in a blog post about Avalon (the code-name for WPF). It also found some popularity in the Adobe Flex community as an alternative to simply using MVC. In recent years, MVVM has been implemented in JavaScript in the form of structural frameworks such as KnockoutJS, Kendo MVVM and Knockback.js, with an overall positive response from the community.

Meanwhile, You are right, AngularJS was closer to MVC (or rather one of its client-side variants), but over time by many refactorings and API improvements, it's now closer to MVVM – the $scope object could be considered the ViewModel that is being decorated by a function that we call a Controller.

The software behaviors that are common to MVC, MVP, and MVVM are:

1)Data Layer / Business Logic (Model): This is the behavior which applies the business logic to the application's data

2) Presentation Layer / UI ( View ): View is responsible for the visual presentation of the application.

3) Application Logic ( Controller, Presentation or View Model ): This behavior holds the logic that implements the interaction between the model and the view.

MVVM

MVVM provides a clear separation between the UI and application logic.

Client-side library:Knockout.js, Kendo (MVVM)

Server-side library: Sil­verlight ,Win­dows Phone apps,Adobe Flex or Tanuki which is an MVVM-inspired web framework that fancies idiomatic Ruby, DRY and extensibility by its design, or another example would be The WebCore 3 PHP framework which is a platform-independent framework that uses the MVVM pattern.

So I would say this is not correct to say that a specific pattern is just for Client or Server side, It's totally related to the framework that we are using or probably environment that we are going to establish for our project whether in Front or in Back-end development.

Documentation: Here

enter image description here

Please read this article

Interesting Article for AngularJs MV*

Majid
  • 2,507
  • 2
  • 19
  • 18