Thursday, May 6, 2021

The Model-View-ViewModel Pattern and Angular Development

Back in the early days of the Angular framework, when it was still called AngularJS, web developers were introduced to the Model-View-ViewModel (MVVM) architectural pattern. Understandably, this required a bit of a paradigm shift for many coders. Moreover, there was much confusion about whether Angular was really Model-View Controller (MVC) or Model-View-ViewModel (MVVM) . In reality, it was neither! Rather, Angular follows a component-oriented architecture. Having said that, Angular does share some of the concepts of both MVC and MVVM. In this tutorial, we’ll be looking at a couple of Angular coding examples following MVC and MVVM principles within the context of a component-based architecture.

MVVM: The Short Story

Let’s begin by clarifying what MVVM is since it’s far less ubiquitous than MVC. MVVM is a refinement of the MVC design whereby the ViewModel in MVVM facilitates the separation of development of the graphical user interface (UI) – i.e. the Presentation Layer. The ViewModel (VM) is responsible for exposing (converting) the data objects from the model in such a way that objects are more easily managed and presented. In this respect, the ViewModel is more model than view, and handles most if not all of the view’s display logic. MVVM is a variation of Martin Fowler’s Presentation Model design pattern in that a Presentation Model abstracts the View in a way that is not dependent on the specific UI platform. Hence, neither the Presenter or the View are aware of each other.

MVVM was invented by Microsoft architects Ken Cooper and Ted Peters in an effort to simplify event-driven programming of UIs. The pattern was incorporated into Windows Presentation Foundation (WPF) (Microsoft’s .NET graphics system) and Silverlight (WPF’s Internet application implementation). John Gossman, one of Microsoft’s WPF and Silverlight architects, first announced MVVM on his blog in 2005.

Model-view-viewmodel is sometimes also referred to as model-view-binder to reflect the fact that the View handles behaviors, events and data binding information.

MVC vs. MVVM Demos

To illustrate the differences between MVC and MVVM, we’ll build a simple example of each.

Let’s start by quickly reviewing the main features of the MVC design pattern. It includes:

  1. Model: Model is nothing but data.
  2. View: View represents this data.
  3. Controller: Controller tells to View to present some of the data from the Model.

In the following snippet, the view is the HTML. Our text is stored in the $scope’s sampleText attribute, making it our Model. The Controller is the TextController() function, which updates the view by replacing “{{sampleText}}” with the sampleText variable’s value. Thus, the controller manages the relationship between our model and the view.

<!DOCTYPE html>
<html ng-app>
    <title>Angular MVC Demo</title>
    <script type="text/javascript" src="angular.min.js"></script>
<body ng-controller="TextController">
    function TextController($scope) {
        $scope.sampleText = 'This is an Angular MVC demo.';


Remember, while you can imbue elements of both MVC and MVVM structures in Angular, it follows a component-oriented architecture. Components are a logical choice for web apps because of their encapsulation of DOM element, data, and logic.

Popular Articles