AngularJS MVC Architecture

MVC is the abbreviation for Model View Controller, which is one of the most popular design pattern used in developing web applications. The MVC comprises of three parts

  • Model
  • View
  • Controller
mvc architecture

Model

The lowest level of the pattern, this represents the current state and is responsible for maintaining data.


View

This level displays the data to the user.


Controller

This is the connecting link between the Model and the View via a software code.

Why is MVC popular?

MVC is popular because it creates a clear demarcation between the application logic and the user interface layers. All requests are received by the controller, which then teams up with model to gather any data needed by View. The View then presents the response to the user, using the data prepared by the controller.

Now let's look at each of the components elaborately


Model- This part consists of primitive data types like int, string and Boolean and complex type in form of object; you can just call it a plain JavaScript object. The model can be build using any database like SQL Server or MySQL or from JSON file. It is basically used to manage application data. If you are comfortable with JavaScript, then this model should be easy for you.

View - The Document Object Model (DOM) elements which is used to display data, this displaying of data is triggered by the controller. Angular JS supports two-way data binding. It simply means that any change in Model will correspond to a change in View; you don't have to write extra code to achieve that. This is based on script based template systems like JSP, ASP, PHP which are really convenient to integrate using AJAX technology.

Controller - This is the space where we place our application logic. In MVC, the controller consists of JavaScript classes. This is place where the input given by the user is analyzed and then operations are performed on data model objects. After validation and modification of the data model, controller also gives instructions to the View to present the modified data to the user. The most important thing to understand is- your model lives within this controller.

So what is the relevance of MVC in AngularJS?

Well, AngularJS is completely based on MVC architecture, and the knowledge of MVC based framework is absolutely necessary. In the chapters later on, we will be seeing how we can apply MVC methodology in AngularJS.