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.
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.
MVVM - More like, what happens, when you go the shop and place your order to the waiter.
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.
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 inside the communication flow what really happens is,
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: Silverlight ,Windows 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
Please read this article
Interesting Article for AngularJs MV*
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With