Thursday, July 16, 2015

Model-View-ViewModel Pattern in AngularJS

In the previous post What is Model-View-ViewModel Pattern? we have seen in detail on the MVVM pattern its architecture and its use, in this post we shall see on how to implement MVVM pattern using AngularJS.

AngularJS implements its own client side MVC pattern, this makes it so flexible to adopt to the MVVM pattern, the objective of MVVM pattern is to provide a ViewModel which binds with the view thereby isolating the binding between the View and the Model layers, this approach supports having multiple views for the same model.

Since AngularJS has its own model ($scope) and controller layers which are close to the client layer, we can treat the combination of $scope and AngularJS controller to play the role of view model, while the service side Model/API will act as the model. This approach achieves the objective of having multiple views for the same model, thereby enabling MVVM pattern using AngularJS


The difference between MVC and MVVM pattern in AngularJS it that in MVC pattern the service side model and the AngularJS model ($scope) have the same objects and properties they act as the Models for the server side and client side. In MVVM pattern the AngularJS model ($scope) is different from the server side model objects, the AngularJS model is more in sync with the view layer. 

Search Flipkart Products:
Flipkart.com

No comments: