AngularJS Introduction

AngularJS goals are to augment browser based applications with model –view- controller (MVC) potential, in an effort to make both improvement and checking easier. AngularJS takes declarative programming to an entire new level. An AngularJS accepts and extends traditional Hyper Text Markup Language (HTML) to better serve dynamic content through two-way data-binding that allows for the automatic synchronization of models and views.

AngularJS is a very powerful JavaScript library. AngularJS are used in Single Page Application (SPA) projects. It extends HTML DOM with different elements and makes it more attractive to user actions. It is open source completely free and used by thousands of developers around the world. AngularJS is licensed under the Apache license version 2.0.

Model View Whatever (MVW)

There are several software architecture patterns which separates the representation of instruction from the user’s interaction with it. The central ideas behind MVW patterns are code reusability and separation of concerns. The most famous pattern that is utilized widely today is a Model View Controller (MVC). Similar to Model View Controller there is different pattern called Model View Presenter. The Model View Presenter is based on Model View Controller and the presenter assumes the functionality of the middle man. In Model View Presenter all presentation logic is pushed to the presenter. Sometime, the model becomes strictly a domain model. Some other patterns like, Model –View-View- Model (MVVM).

An AngularJS does not care actually what software architecture pattern you want to use in your applications. The basic concept of Model –View- Whatever (MVW) is that all definitions are combined with a named Module. The Module can then be accumulated to form complete WebApplications. The Module can depend on one another, so that involving a single Module in your Web Applications may bring along additional functionality on which that Module depends. An AnguarJS gives you with a rich set of Application Programming Interface (APIs) to define these modules and linked them together with dependency injection.

Hello World in AngularJS Code

In order to write a hello world application in AngularJS code all we have to do is it involves AngularJS JavaScript in our Hyper Text Markup Language (HTML) document.

<script type="text/javascript"    src="//ajax.j2eebrain.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

Now define your HTML page like below.

<!DOCTYPE html>
<html ng-app>
<head>
 <title>Hello World, AngularJS – J2eebrain.com</title>
 <script type="text/javascript"
 src="//ajax.j2eebrain.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
 
</head>
<body>
 Write some text in textbox:
 <input type="text" ng-model="mAnsari" />
  <h1>Hello {{ sometext }}</h1>
 </body>
</html>

There are some Angular related tags we put in our HTML document.

The ng-app Tag

The first thing that we notice is an attribute ng-app within <html> tag. The ng-app attribute tells the Angular to be active in this portion of the page. If you want to enable AngualrJS only at specific locations in your webpage, then you can describe ng-app attribute to any DIV to another tag.

In this case you are building an application that also works within IE7, add id=”ngapp”. Example:

<html ng-app id="ng-app">

If you select to use the previous style directive syntax ng: then involve xml-namespace in html to make IE happy.

<html xmlns:ng="http://j2eebrain.com">

The {{ sometext }} tag

Note that how we wrap our model value in double curly braces. This tells AngularJS to build the value of model sometext in place of {{ sometext }}. Thus the any change in sometext model value changes the text inside <h1> tag

The ng-show / ng-hide tag

Now we further change our demo and add one more AngularJS attribute ng-show. In this code we added attribute ng-show=”sometext” to <h1> tag.

<script type="text/javascript"
 src="//ajax.j2eebrain.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

Now define your HTML page like this:

<!DOCTYPE html>
<html ng-app>
<head>
 <title>Hello World, AngularJS - J2EEbrain.com</title>
 <script type="text/javascript"
 src="//ajax.j2eebarin.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
  Write some text in textbox:
 <input type="text" ng-model="mAnsari" />
  <h1 ng-show="sometext">Hello {{ sometext }}</h1>
 </body>
</html>

In this demo, the text Hello does not display unless we type anything in the textbox. So, we added just one small attribute to <h1> tag and see how the functionality modified.

The ng-show attribute conditionally show an attribute depends on the value of a Boolean expression. So, we can say that, the similar to ng-show you can use ng-hide which exactly does opposite of ng-show.