Is AngularJS really based on MVC architecture?

In this article, we discuss Is AngularJS really based on MVC architecture

Is AngularJS really based on MVC architecture?

The world of web development is one that is forever shifting and morphing. Whether it be in terms of a framework, or how things are implemented, nothing really remains the same after a certain period of time. In the course of such evolution, two things were made popular amongst developers – Angular and the MVC architecture. In this blog, we are going to talk about both Angular and the MVC architecture and how the former is used to implement the latter. The following topics are covered in this blog:

  • What is Angular/ AngularJS?
  • What is MVC Architecture?
  • Components of MVC
  • Angular’s Implementation of MVC.
  • MVVM Architecture

Before we move forward with the blog, I’d like to bring it to your notice, that if you wish to become a proficient angular developer, you should definitely check out our Angular course, which will be taught to you in a live online classroom by a certified industry expert.

What is Angular/ AngularJS?

AngularJS is a JavaScript-based framework, developed by Google. It was first released in late 2010 but only received its first stable release in early 2011. It was boisterously marketed as a robust framework for creating dynamic web apps by implementing the Model-View-Controller also commonly known as the MVC architecture.

Google is also responsible for maintaining and constantly updating the framework. In their second iteration of updates, AngularJS was completely deprecated and started fresh with the name of Angular. Since then, Angular has received bi-yearly updates and today, the latest version of Angular is Angular 8. The only difference is that Angular is now based on TypeScript, which is a superset of JavaScript, but it still maintains the MVC architecture.

So that was a short introduction to Angular, now let’s see what’s all the jazz behind the MVC architecture.

What is MVC Architecture?

As you must already know by now, MVC stands for Model-View-Controller. The basic idea is to have three separate entities and never mix them up. Prior to the concept of MVC architecture, developers struggled with integrating their logic into their view which had to be also modeled in a certain way. Things would normally get extremely disorganized, which is something that is not desired, especially when working on big projects that span thousands of lines of code. It makes activities like debugging and maintenance really tough.

MVC - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

With the MVC architecture, the entities are separated so that the business logic that ties everything together is always written separately. Therefore we can also say that MVC is more of a software pattern, rather than architecture. Now that we have a brief idea of what MVC is, let’s take a look into its three main components.

Components of MVC

  1. Model – It is responsible for managing application data. It responds to the requests from view and to the instructions from the controller to update itself.
  2. View – It is responsible for displaying all data or only a portion of data to the users. It also specifies the data in a particular format triggered by the controller’s decision to present the data. They are script-based template systems such as JSP, ASP, PHP and very easy to integrate with AJAX technology.
  3. Controller – It is responsible to control the relation between models and views. It responds to user input and performs interactions on the data model objects. The controller receives input, validates it, and then performs business operations that modify the state of the data model

Angular’s Implementation of MVC

Well, it’s late 2019 as of me writing this blog, and AngularJS has been deprecated for a long long time now. AngularJS surely followed the MVC architecture, but the same can’t be said for Angular today. Let’s have a look at some example code snippets to explain what I mean.

<!DOCTYPE html>
<html ng-demo>
<head>
<title>Example mvc</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-controller="DisplayText">
<p>{{demoText}}</p>
</body>
 
<script>
function DisplayText($scope) {
$scope.demoText= 'This is a demo!';
}
</script>
</html>

In the above snippet, our text is represented by the variable demoText. This is our model. The controller is updating the view by displaying the data on the view by replacing {{demoText}} with the value contained in the variable demoText. It is the controller that is managing the relationship between our model and the view which is the HTML.

A shortcoming of MVC is that if we make any change in the view it doesn’t get updated in the model. This problem was addressed in Angular2 by shifting to the MVVM architecture.

MVVM Architecture

MVVM basically includes 3 things:

  • Model
  • View
  • View Model

The controller is actually replaced by View Model in MMVM design pattern. View Model is nothing but a JavaScript function which is again like a controller and is responsible for maintaining the relationship between view and model, but the difference here is, if we update anything in view, it gets updated in the model, change anything in the model, it shows up in view, which is what we call 2-way binding.

<!DOCTYPE html>
<html ng-app>
<head>
<title>Number Adition</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<form ng-controller="AdditionController">
<label>Number :</label> <input name="number" ng-change="additionNeeded()" ng-model="data.number1">
<label>Number entered by User :</label> {{data.number1}} <br>
<label>Divisor :</label> <input name="divisor" ng-change="additionNeeded()" ng-model="data.number2">
<label>Number entered by User :</label> {{data.number2}} <br>
<label>Result :</label> {{data.result}}
</form>
</body>
<script>
function DivisionController($scope) {
$scope.data = {number1: 0, number2: 0, result: 0};
$scope.additionNeeded = function () {
$scope.data.result = $scope.data.number1 + $scope.data.number2;
}
}
</script>
</html>

The above code snippet will perform an addition between two numbers which are taken as user inputs and then display it in the box called result. Now let’s break it down into its components – model, view, and view model.

MVC

The VIEW is our HTML and in this fashion of segregation of functionality, the view and view model can communicate with each other. Therefore, whenever there is a change in the view, the view model gets to know about it. Then the view model updates the model. This is how the latest version of angular works.

With this, I’d like to end my blog here. If you have any doubts or queries regarding this article please post them in the comment section below. 

Also Check out What is Angular CLI and How to Implement it

Model Simran Kaur Hot Photos

Related Posts

2 thoughts on “Is AngularJS really based on MVC architecture?

  1. Great website I tried some codes in this websites

    This website helped alot

    Thank you stackoverflow team

Leave a Reply

Your email address will not be published. Required fields are marked *