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.
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.
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:
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>
<head>
<title>Angular MVC Demo</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-controller="TextController">
<p>{{sampleText}}</p>
</body>
<script>
function TextController($scope) {
$scope.sampleText = 'This is an Angular MVC demo.';
}
</script>
</html>
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.
Rob Gravelle resides in Ottawa, Canada, and has been an IT guru for over 20 years. In that time, Rob has built systems for intelligence-related organizations such as Canada Border Services and various commercial businesses. In his spare time, Rob has become an accomplished music artist with several CDs and digital releases to his credit.
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
