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 later. 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 Certification course, which will be taught to you in a live online classroom by a certified industry expert.
What is Angular/ AngularJS?
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 modelled in a certain way. Things would normally get extremely disorganised, 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.
Components of MVC
- 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.
- 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.
- 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 a 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 relationship between view and model, but the difference here is, if we update anything in view, it gets updated in model, change anything in 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.
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 work.
A Flutter Training Online is the perfect way to learn how to create amazing mobile apps for both iOS and Android.
Got a question for us? Please mention it in the comments section of this “Angular MVC” and we will get back to you.