Model View Controller is abbreviated as MVC. MVC is the popular web design architecture because it separates the business logic from its view or presentation.
It has three components:-
- Model- an object carrying data.
- View- visualization of data that model contains.
- Controller-controls the flow of data and relation between the model and view.
Now, lets understand how these components works in AngularJS MVC architecture-
1.Model - It contains all the data(primitive data types and in the form of objects). It interacts with local database and backend JSON. For example:-
<script>
$scope.webseries = {
ShowName' : TVF Pitchers,
Channel : TVF Play,
ImdbRating : 22
}
</script>
In the above example webseries is a variable which is added to the object($scope).
2.View - It is the presentation of the data that the model contains. In Angular we use expressions to display the data from the controller. It is simply the manipulation of the DOM elements to display the data. For example:-
<script>
<p>{{webseries.ShowName}}</p>
<p>{{webseries.Channel}}</p>
<p>{{webseries.ImdbRating}}</p>
</script>
3.Controller - In Angular controller controls the flow of data into model object and updates the view whenever data changes. It keeps the view and model separate. It provides great controller as to displaying of data in the view according to the request. For example:-
<script>
function Worldwebseries($scope){
}
</script>
The complete code will look like this:-
<html ng-app=myApp">
<head>
<title> AngularJS MVC Architecture small example</title>
<script src="js/angular.min.js"></script>
</script>
<script type="text/javascript">
//Creating controller here
var app = angular.module(myApp', []);
app.controller('Worldwebseries', function($scope) {
//Creating model here
$scope.webseries = {
ShowName' : TVF Pitchers,
Channel : TVF Play,
ImdbRating : 22
}
});
</script>
</head>
<body>
<p>Displing model data in view through controller</p>
<div ng-controller="Worldwebseries">
<p>{{webseries.ShowName}}</p>
<p>{{webseries.Channel}}</p>
<p>{{webseries.ImdbRating}}</p>
</div>
</body>
</html>
0 Comment(s)