AngularJS was developed and maintained by Google. As a latest Technology AngularJS comes with many Advanced features. Depending upon its feature rich functionalities today it is one of the most popular JS Framework. It Supports MVVM, MVW and MVC Architecture. Among these Architectures MVC is the most popular one. Before Discuss more into MVC Architecture using AngularJS let us Start with what is design pattern. Design pattern is nothing but a structural approach to develop quality codes. Design pattern improves Code reuse-ability.
Model – Model is the layer using which we design data inside a Controller. In MVC Architecture model resides in lowest level. Let’s talk about an Employee Management System. Here we can Create various models like Employee Details, Manager Details or Salary Details. In side a controller we can create models depending upon our data requirement. Model not only helps to Organize data but also it is capable to handle business logics.
To represent model in view AngularJS provides $scope object. Any object assign to $scope it is accessible in view. Look at the below Example of model. Here I am storing some string value to a variable under $Scope object.
$scope.employees = {
'Name':'Jimmy Jose',
'Address':'New Delhi, India',
'Email':'jimmy_jose@gmail.com'
}
Model was specially designed to plan structured data. Let’s take one more example where you want to show list of States depending upon the on change event of a Country dropdown. In this case while creating a data model we have to go like the below example.
$scope.countries = {
'Country':'India',
'States': { 'Utar Pradesh', 'Andra Pradesh', 'Odhisha', 'Karnatak', 'New Delhi' }
}
View – View is nothing but what user watch. I mean the rendered HTML. AngularJS makes HTML enrich. In Controller AngularJS provides a $scope object. Which is responsible to inter-exchange data in between View and Controller. To display Controller data in view generally we use the following Syntax.
{{ variable from Controller }}
Controller – Controller is the unit which Controls application logic. Whether we do an operation in a variable or implement a function Controller handles all that. Controller receives input from view, validates it and performs business operations that modify the state of the data model. To create Controller in AngularJS we use the following Syntax.
CusFilterMod.controller('CusFilterCtrl', ['$scope', '$filter', function($scope, $filter) ...... });
Example of MVC Architecture in AngularJS
<html ng-app="myModel">
<head>
<title>Example to implement MVC Design Pattern using AngularJS</title>
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</script>
<script type="text/javascript">
var app = angular.module('myModel', []);
/*Creating Controller Here*/
app.controller('myController', function($scope) {
/*Creating Model Here*/
$scope.employees = {
'Name':'Jimmy Jose',
'Address':'New Delhi, India',
'Email':'jimi_jose@gmail.com'
}
});
</script>
</head>
<body>
<p>Displing model data in view through controller</p>
<div ng-controller="myController">
<h3>{{ employees.Name }} </h3>
<h3>{{ employees.Address }} </h3>
<h3>{{ employees.Email }} </h3>
</div>
</body>
</html>
