The world of web development is an ever-changing and changing world. Whether it’s about the framework, or how things are done, nothing really stays the same after a certain amount of time. During such developments, two things have become common among developers – Angular and the MVC architecture. In this blog, we will talk about both Angular and MVC architecture as well as how the former is used to implement the latter. The following topics covered in this blog include:
- What is Angular / AngularJS?
- What is MVC architecture?
- What are the components of the MVC?
- Angular’s MVC implementation?
- MVVM architecture
1. 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 is hotly advertised as a powerful framework for creating dynamic web applications by implementing Model -View-Controller is also commonly known as MVC architecture.
Google is also responsible for maintaining and constantly updating the framework. In their second update, the AngularJS was completely deprecated and started fresh with the Angular name. Since then, Angular has received updates every two years and today, the latest version of Angular is Angular 8. The only difference is that Angular is currently based on TypeScript, which is a super set of JavaScript, but it still maintains the MVC architecture.
That was a short introduction to Angular, now let’s see what is all behind the MVC architecture?
2. What is MVC architecture?
As you know, MVC stands for Model-View-Controller. The basic idea is to have three separate entities and never mix them together. Before the concept of the MVC architecture, developers struggled with integrating their logic into their views, which had to be modeled in a certain way as well. Things often become incredibly disorganized, something no one would want, especially when working on large projects that span thousands of lines of code. It makes debugging and maintenance operations really difficult.
With MVC architecture, entities are segregated so that the business logic that binds everything together is always written separately. Therefore, we can also say that MVC is like a software pattern which is architecture. Now that we have a brief idea of what MVC is, let’s take a look at its three main components.
3. What are the components of the MVC?
- Model – It is responsible for application data management. It responds to requests from View and instructions from Controller to update itself.
- View – It is responsible for displaying all or only part of the data to the user. It also specifies data in a specific format triggered by the Controller’s decision to present data. They are script-based template systems such as JSP, ASP, PHP and are very easy to integrate with AJAX technology.
- Controller – It is responsible for controlling the relationship between Models and Views. It responds to user input and performs interactions on data model objects. The controller takes the input, validates it, and then performs business operations modifying the data model’s state.
4. What is Angular’s implementation of MVC?
Well, when I wrote this blog it was late 2019 and AngularJS was long gone. AngularJS certainly has followed the MVC architecture, but Angular today cannot say so. Take a look at some example code to explain what I mean.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!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 code above, our text is represented by the variable demoText. This is our Model. The controller is updating the View by rendering the data on the view by replacing {{demoText}} with the value contained in the variable demoText. The controller that is managing the relationship between our Model and View is HTML.
One shortcoming of MVC is that if we make any changes to the View, it will not be updated in the Model. This issue has been resolved in Angular2 by moving to the MVVM architecture.
5. MVVM architecture
Basically MVVM consists of 3 things:
- Model
- View
- ViewModel
Controller is actually replaced by View Model in MVVM design pattern. The View Model is nothing but a JavaScript function like a Controller and is responsible for maintaining the relationship between the view and the model, but the difference is that, if we update anything in the view, it will be. update in model, change anything in model, it shows up in view, we call 2-way binding
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!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 will do the addition between the two numbers taken as user input and then display it in a box called result. Now let’s split it into its components – model, view, and ViewModel.
View is our HTML and by this type of function separation, View and ViewModel can communicate with each other. Therefore, whenever there is a change in View, ViewModel will know about it. Then ViewModel updates the Model. Here’s how the latest version of Angular works.
With this, I want to end my blog here. If you have any doubts or questions regarding this article, please feel free to post them in the comments section below. If you want to learn all that you’ve just learned from this blog and beyond, about the angle and direction of your career as a proficient Angular developer, then consider signing up for the Angular Certificate Course. ours.
The above article was translated on the blog https://www.edureka.co/blog/angular-mvc-architecture/