Learn How MVC Works in AngularJS?

What is AngularJS MVC?

MVC is nothing but the software design pattern for designing and developing a web application. It is considered as the architectural pattern that has existed for a long time in software engineering. Many languages use MVC architecture with little variations in each one of them but conceptually it remains the same.

In angular, we organize things in some different manner as compare to regular javascript. Therefore, Model View Controller architecture is the most popular and latest way of organizing an application.

Do you know What are Directives in AngularJS?

AngularJs MVC Architecture & Components

AngularJS MVC divides an application into three parts- Model part, View Part, Controller Part. Let’s see for what purpose each component of MVC serves:

• MODEL PART

Model part consists of a database (use to store data), application data (application data are variables that are specific to a user. Application and logic (Logic refers to code that is written to perform a certain task).

• VIEW PART

View part is the user interface part of an application. The information that is being displayed to the user in an application is written in this part.

• CONTROLLER PART

The interaction between the model part and view part is controlled by a controller. It is more like software code.

How MVC Works in AngularJS?

We can implement MVC pattern through JavaScript and HTML. HTML helps to implement model part, while JavaScript is for model and controller part.

Recommended reading – Data Binding in AngularJS

When a user enters a URL in the browser, according to that specific URL control goes to the server and calls the controller. After that controller uses the appropriate model and appropriate view so that appropriate response can be made for user’s request. It creates the response and that response is sent back to the user.

MVC In AngularJS

Here, we will see how the components of MVC works in AngularJS:

i. Model Part In Angular Application

It responds to the request made from view part. It can obtain data dynamically means you can get data from database like from MySQL or you can get data from static JSON (JavaScript Object Notation) file.

1. <script>
2. $scope.person = {
3. 'Name' : 'Ram Kumar ',
4. 'Address' : 'AB Road, Katni',
5. 
   
6. }
7. </script>

ii. View Part In Angular Application

It is the presentation part of an application. Through the view part, a user can see the Model part. Therefore, the model and view part join together.

1. <h1> {{person.name}} </h1>

Also, read – ngmodel in AngularJS

Read Complete Article>>