AngularJS MVC Architecture

Angular JS is using AngularJS MVC architecture for building the framework. AngularJS is a Javascript framework that is used in the creation of Rich Internet Application (RIA). AngularJS framework is popular due to the following reasons:

Two-way data binding
Dependency injection
Routing functionality
Early robust testing
Fully featured Single Page Application (SPA) framework
Usage of Plain Old Javascript Objects (POJO)
DOM manipulation using built-in jqLite.

All these features are achieved by AngularJS with the help of its MVC architecture.

What is MVC?

In order to understand AngularJS MVC Architecture better, we shall first explore on what is MVC. MVC is the acronym of Model View Controller. It is a famous design pattern for developing the web based applications. MVC is used to organize a web based application within three distinct layers and its ultimate aim is to separate the business logic from its associated presentation.

MVC design pattern encompasses three layers as listed below:

Model – Model of MVC is accountable for maintaining the data.
View – View of MVC is used to display the data in a presentable way to the User.
Controller – As the name insists, the Controller of MVC is responsible for controlling interaction between the View and the Model.

AngularJS MVC Architecture

AngularJS uses MVC Architecture for organizing its framework. Role of MVC components namely Model, View and Controller in AngularJS architecture is listed below:

AngularJS Model – The data that is maintained by AngularJS is received from databases like Oracle, SQL Server or from the static files likes JSON. The data is then used for creating dynamic documentation.
AngularJS View – In AngularJS, an angular view is created to display the data from the model. Double curly braces and directives are used in HTML code to create the view.
AngularJS Controller – In Angular application, major role is played by the controller. Controller is a Javascript that associates views to models. The controller includes both state and the logic. It permits additional functionality to be operated on the data.

Flow of information in AngularJS MVC architecture is demonstrated in the diagram below. As shown in the diagram, AngularJS view and AngularJS model are bound to each other, this two-way binding ensures that the view gets updated automatically when there is a change in the model. The binding between View and Model is achieved using AngularJS Controller.

AngularJS MVC Architecture Sample Code Implementation

Now that we have a clear picture on what is AngularJS MVC Architecture, we can now explore on how it is implemented in code. This is demonstrated in the code snippet below along with appropriate comments:

<html ng-app="J2EEReferenceSampleApp">
	<head>
		<title>J2EEReference.com AngularJS MVC Architecture</title>
		<!--LOAD ANGULARJS FRAMEWORK -->
		<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
		</script>

		<script type="text/javascript">
		<!-- ANGULARJS CONTROLLER CREATION -->

		var app = angular.module('J2EEReferenceSampleApp', []);
		app.controller('actualStudent', function($scope) {
		<!--ANGULARJS MODEL CREATION -->
		$scope.student =  {
		'StudentId' :   'S101',
		'StudentName' :   'JOHN',
		'Course' :   'COMPUTER SCIENCE'
		}
		});
		</script>
	</head>
	<body>
		<!--ANGULARJS VIEW CREATION AND DISPLAY OF DATA-->
		<p>View displaying data from model through the controller… </p>
		<div ng-controller="actualStudent">
			<h3>Student ID   :  {{ student.StudentId }} </h3>
			<h3>Student Name :  {{ student.StudentName }} </h3>
			<h3>Course       :  {{ student.Course }} </h3>
		</div>
	</body>
</html>

<head>

<title>J2EEReference.com AngularJS MVC Architecture</title>

</script>

var app = angular.module('J2EEReferenceSampleApp', []);

app.controller('actualStudent', function($scope) {

$scope.student = {

'StudentId' : 'S101',

'StudentName' : 'JOHN',

'Course' : 'COMPUTER SCIENCE'

}

});

</script>

</head>

<body>

<p>View displaying data from model through the controller… </p>

<h3>Student ID : {{ student.StudentId }} </h3>

<h3>Student Name : {{ student.StudentName }} </h3>

<h3>Course : {{ student.Course }} </h3>

</div>

</body>

</html>

You can see the html file by opening in the browser as below.

Related Posts

Reader Interactions

Leave a Reply Cancel reply

Footer