Saturday, March 12, 2016

Have you ever wish to learn about AngularJS framework for java web development?

Though online article directories and blogs of Java web development professionals are feed with distinct stories and articles about different products; still you can consider this post to learn every important fact about AngularJS. The author will explain the framework, its features, architecture, and the steps to build an AngularJS application. Read every point thoroughly to get a clear vision about the framework.

AngularJS is an open source javascript framework for web application. It was originally developed in 2009 by Misko Hevery and Adam Abrons. It can be added to an HTML page with a <script> tag.

Definition of AngularJS:

AngularJS is a structural dynamic web apps framework. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data compulsory and dependency injection eliminate much of the code you generally have to write. And it all occurs within the browser, making it an excellent partner with any server technology.

Features of AngularJs:
  • AngularJS is a powerful JavaScript based web development framework which is useful to develop powerful web application.
  • AngularJS provides developers options to write client side application in a clean MVC architecture.
  • Application written in AngularJS is cross-browser compliant. AngularJS automatically handles JavaScript code for each browser.
  • AngularJS is open source, completely free, and used by thousands of developers around the world.

Overall, AngularJS is a framework to build large scale and high performance web application while keeping them as easy-to-maintain.

AngularJs is divided in three major parts which are called ng-directives. Those are listed below.
  1. ng-app - This directive defines and links an AngularJS application to HTML.
  2. ng-model - This directive binds the values of AngularJS application data to HTML input controls.
  3. ng-bind - This directive binds the AngularJS Application data to HTML tags.


Integration of AngularJS with HTML

  • ng-app directive indicates the start of AngularJS application.
  • ng-model directive creates a model variable with name "name" which is used with the html page and within the div which have ng-app directive.
  • ng-bind then uses the name model to be displayed in the html  span tag whenever user input something in the text box.
  • Closing </div> tag indicates AngularJS application end.


AngularJS is an MVC based architecture in which application logic separates from user interface. In AngularJs functions of model, view and controller are:
  • Model: Model manages application data. It responds to all requests from view side and to the instructions from controller for any updation.
  • View: View represents data in a particular format, triggered by the controller's decision to present the data. Views are script-based template systems such as JSP, ASP, PHP and very easy to integrate with AJAX technology.
  • Controller: The controller responds to user input and performs interactions on the data model objects. The controller receives input, validates it, and then performs business operations that modify the state of the data model.


AngularJs Expressions:

AngularJs Supports expressions embedded in its code. Expressions can be written in double braces: {{Expression}}
Expressions can be written inside ng-bind directive also: ng-bind=”Expression” 
When AngularJS resolves this expressions, it returns result exactly where the expression is written. Like Javascript expressions, AngularJs Expressions also can contain literals, variables and operators.
Ex:
Example {{12 + 12}} or {{stateName + " " + countryName}}

Steps for AngularJS App

There are three steps to create AngularJS application that are:

Step 1 − Loading AngularJs framework
It can be added using <Script> tag, because it is pure JavaScript framework, 
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

Step 2 − Defining AngularJS Application using ng-app directive
Ex:
<div ng-app = ""> ... </div>

Step 3 − Defining a model name using ng-model directive
Ex:
<p>Enter Name: <input type = "text" ng-model = "name"></p>

Step 3 − Binding value of above model defined using ng-bind directive
Ex:
<p>Welcome <span ng-bind = "name"></span>! </p>

AngularJs Sample Application

<html>
  <head>
<title>AngularJS Application</title>
  </head>
  <body>
<h1>Demo Application</h1>
<div ng-app = "">
<p>Enter Name: <input type = "text" ng-model = "name"></p>
<p>Welcome <span ng-bind = "name"></span>! </p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  </body>
</html>     

Conclusion: - Author of this post is a proficient java web development expert. If any point is not clear or you want to know more about AngularJS, you can ask the author and get precise answer. For more updates, keep looking for this space in future.

Bio: - James Warner is a highly qualified digital marketing and entrepreneurship. I'm a contributing editor of NexSoftsys for many years in a various role including editor Technology, Health & Media editor and also working as a freelance. You can contact me on Facebook or Follow me on Twitter or add your circle Google+

5 comments: