Angular JS Archives - J2EE Reference

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.

What is AngularJS ?

AngularJS is the most popular and dominant JavaScript framework for professional web development.
It is well suited for small, large and any sized web app and web application. AngularJS can be added in an HTML page using the <script> tag as below

Sample HTML page with AngularJS

<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="name" placeholder="Enter your name here">
      <hr>
      <h1>Hello {{name}} , Welcome to j2eereference.com!</h1>
    </div>
  </body>
</html>

<head>

</head>

<body>

<div>

<hr>

<h1>Hello {{name}} , Welcome to j2eereference.com!</h1>

</div>

</body>

</html>

output

Why to use AngularJS?

There are following reasons,why to use AngularJS as a web development framework:

1. It follows MVC pattern which helps to organize your web apps or web application properly.

2. It extends HTML by attaching directives to your HTML markup with new attributes or tags and expressions in order to define very powerful templates.

3. It also allows you to create your own directives.

4.. AngularJS supports two-way data binding , Any change in model will update the view and vice versa without any DOM manipulation.

5. It encapsulates the behavior of your application in controllers which are instantiated with the help of dependency injection.

6. It provides $http service to communicate with REST service.

7. AngularJS mark-up lives in the DOM.

8. AngularJS uses plain old JavaScript objects (POJO).

9. AngularJS can be easily integrate with any other java script library.

Angular JS

Footer