In AngularJS we organize things differently than regular JavaScript. One of the latest ways of organizing applications is MVC Architecture. AngularJS MVC (Model View Controller) as it is popularly called is a software design pattern for developing web applications. The Model View Controller pattern is made up of the following three parts such as:
- Model: In AngularS, the model provides the pattern responsible for maintaining the data.
- View: In AngularJS the view is responsible for displaying all or a portion of the data to the user.
- Controller: The controller is a software code that controls all the action between the Model and View.
Why MVC is popular?
MVC is popular because it provides the application logic from the user interface layer and supports individual of concerns. And the controller receives entire requests for the application and then works with the model to prepare different data needed by the view. The view then uses the data ready by the controller to generate a final presentable response.
The Model
The model is designed so that it can dynamically obtain data, that means you can get it from a database such as MySQL and you can also get data from static JSON (JavaScript Object Notation) file. It also responds to the request from view and to the instructions from controller to develop itself.
So, we create a model. Add following lines in a file name as index.html:
Syntax:
<script>
$scope.customer = {
'Name' : 'Meraj Ansari',
'Address' : 'Luncknow Road, Faizabad',
'Email' : 'merajansari15gmail.com'
'Contact' : '+919839810502'
}
</script>Code Description
$scope: is an object, customer: is a variable, added to the scope and in curly brackets that is JSON static data.
The View
The view provides a presentation of data in a special format, triggered by the controller decide to present the data. The view have script-based template systems like, ASP, JSP, PHP and very easy to integrate with AJAX technology. In other words, the View is display of model that is your data. It is used within double curly brackets and it is much like utilizing the JavaScript template library.
Let’s we create a view, add these lines in index.html
<h1> {{customer.name}} </h1>Code Description
The view is getting data from customer variable which holds JSON data for breakfast.
The Controller
The controller works based on the information from user input and performs interactions with the data model objects. It receives input, validates and then performs business operations that change the state of the data model. The controller also gives you control over the model and view that means it controls how data is retrieved and show to end user.
function food($scope){
}Code Description
Just like a simple function around model code. So, now add a div around view like this:
<div ng-controller = "address"> </div>
In this code a div that holds a controller directive. Note that “address” in ng-controller=’address” is same as a function name.
The final code looks like this:
<!doctype html>
<html ng-app>
<head>
<title>Angular MVC Architecture Course</title>
<script src=”lib/Angular/angular.min.js”></script>
</head>
<body>
<div ng-controller = “controller”>
<h1>{ {customer.Name} }</h1>
</div>
<script type=”text/javascript”>
function controller($scope){
$scope.customer= {
'Name' : 'Meraj Ansari',
'Address' : 'Luncknow Road, Faizabad',
'Email' : 'merajansari15gmail.com',
'Contact' : '+919839810502'
}
}
</script>
</body>
</html>More appropriate way to create the controller
Now we understand that, how to use the controller to declare model that contains our data. So, we use $scope as a glue between controller and view. We already have created our simple view to display the data from the controller, and using the ng-repeat to show an array of items from a model. However, in real application development, that example of controller creation is rarely used. So, the more appropriate way to create controller is to add it to an Angular module.