• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer
  • Core Java
  • Design Patterns
  • JSP
  • Servlets
  • Building Tools
  • jQuery
  • Spring
  • Hibernate
  • Mongo DB
  • More
    • HTML
    • SCJP
    • AJAX
    • UML
    • Struts
    • J2EE
    • Testing
    • Angular JS

J2EE Reference

  • Home
  • About Us
    • Java Learning Centers
  • Contact Us

Angular JS

AngularJS MVC Architecture

July 5, 2017 By j2eereference Leave a Comment

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:

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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>

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

Filed Under: Angular JS

Why to use AngularJS?

June 3, 2017 By j2eereference Leave a Comment

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

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js”></script>

Sample HTML page with AngularJS 

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

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.

 

Filed Under: Angular JS

Primary Sidebar

FOLLOW US ONLINE

  • View J2eereference-166104970118637’s profile on Facebook
  • View j2eereference’s profile on Twitter
  • View j2eereference’s profile on LinkedIn

Subscribe by email

Recent posts

  • Java Buzzwords
  • Anonymous Inner Class in Java
  • Network Programming – java.net Package
  • Java Regular Expressions
  • Method Local Inner Class in Java
  • URL Processing in Java
  • Iterator Design Pattern Implementation using Java
  • Strategy Design Pattern Implementation using Java
  • Decorator Design Pattern
  • Adapter Design Pattern Implementation using Java
  • JSF Composite Components
  • JSF UI Components
  • What is JavaServer Faces (JSF)?
  • GOF Design Patterns
  • History and Need for Design Patterns

Footer

Core Java
Design Patterns
JSP
Servlets
HTML
Building Tools
AJAX
SCJP
jQuery
Testing
Spring
UML
Struts
Java Centers
Java Training
Home
About Us
Contact Us
Copyright © j2eereference.com. All right reserved.