10 May 2015

Introduction

AngularJS

  • is an open source web application framework
  • extends HTML with ng-directives
  • latest version is 1.3.14
  • is the best candidate for data binding with browser
  • is the cross browser compliant
  • helps to write the client side code in a clean MVC way

Write your first AngularJS application

AngularJS application has two major parts called modules and controllers Module(ng-app) defines the Angular js application Controller(ng-controller) controls AngularJS application

Code snippet and output given below


<!DOCTYPE html>
<html>

<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body>

<p>Try to change the name</p>

<div ng-app="angularJSApp" ng-controller="agularJSController">

First Name: <input type="text" ng-model="firstName"><br/>
Last Name: <input type="text" ng-model="lastName"><br/>
<br/>
Full Name: { { firstName + " " + lastName } }

</div>

<script>
  var app = angular.module('angularJSApp', []);  // This is angular js module
  app.controller('agularJSController', function($scope) { // This is angular js controller
      $scope.firstName= 'Ashish';
      $scope.lastName= 'Mondal';
 });
</script>

</body>

Output of the above code

Know different types of ng-directives…

ng-app, ng-model, ng-bind

ng-app

Defines an AngularJS application

  • This is root element of angularJS application
  • This will auto-bootstrap (automatically initialize) the application when a web page is loaded
  • can have a value (like ng-app=”directiveExample “), to connect code modules

ng-model

Binds the value of HTML controls (input, select, textarea) to application data.

  • Provide type validation for application data (number, email, required).
  • Provide status for application data (invalid, dirty, touched, error).
  • Provide CSS classes for HTML elements
  • Bind HTML elements to HTML forms

ng-bind

Binds application data to the HTML view

Example of ng-app, ng-model, ng-bind


<!DOCTYPE html>
<html>
<head>
<script
	src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
	<div ng-app="directiveExample">
		<p>Input something in the input box:</p>
		<p>
			Name: <input type="text" ng-model="name">
		</p>
		ng-bind example:
		<p ng-bind="name"></p>
		An alternative to ng-bind is: { { name } }
	</div>
</body>
</html>

snapshot

ng-bind, ng-init, ng-repeat

ng-bind

Binds application data to the HTML view

ng-init

Defines initial values for an AngularJS application

ng-repeat

Repeats an HTML element

Example of ng-bind, ng-init, ng-repeat



<div ng-app="" ng-init="names=['Ashish','Dona','Ujan']">
  <p>Looping with ng-repeat:</p>
  <ul>
    <li ng-repeat="x in names">
      Name:  <br/>
      Alternative way: <span ng-bind="x"/>
    </li>
  </ul>
</div>

snapshot

ng-disabled

Binds AngularJS application data to the disabled attribute of HTML elements


<!DOCTYPE html>
<html>

<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="mySwitch=true">
	<p>
	<button ng-disabled="mySwitch">Click Me!</button>
	</p>
	<p>
	<input type="checkbox" ng-model="mySwitch"/>Button
	</p>
	<p>
	Button disabled: 
	</p>
</div> 
</body>
</html>

snapshot

ng-show/ng-hide, ng-click, ng-if

ng-show/ng-hide

Shows or hides an HTML element

ng-click

Defines an AngularJS click event

ng-if

Defines condition

Example of ng-show/ng-hide, ng-click, ng-if


<body>
<div ng-app="myUserCtrlApp" ng-controller="personCtrl">
 <div ng-if="displayUser">
   <button ng-click="toggleUserDtls()">Display user</button>
 </div>
 <div ng-if="!displayUser">
   <button ng-click="toggleUserDtls()">Hide user</button>
 </div>

 <p ng-hide="displayUser">
  First Name: <input type=text ng-model="fName"><br>
  Last Name: <input type=text ng-model="lName"><br><br>
  Full Name: 
 </p>

</div>

<script>
var app = angular.module('myUserCtrlApp', []);
app.controller('personCtrl', function($scope) {
    $scope.fName = "Ashish",
    $scope.lName = "Mondal"
    $scope.displayUser = false;
    $scope.toggleUserDtls = function() {
        $scope.displayUser = !$scope.displayUser;
    }
});
</script> 

</body>

snapshot

AngularJS filters

AngularJS filters are currency, filter, lowercase, orderBy, uppercase
currency: Format a number to a currency format filter: Select a subset of items from an array lowercase: Format a string to lower case orderBy: Orders an array by an expression uppercase: Format a string to upper case

Below is the example of filter implementation

filter.html

Download and include angular.js as shown in the code snippet. Write your own js file called controller.js

 
<!DOCTYPE html>
<html ng-app="myFilterApp">
<head>
<title></title>
<script type="text/javascript" src="lib/angular.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</head>
<body>
<form>
<div ng-controller="myFilterController">
	
    Enter principal amount : <input type="text"  ng-model="principal" placeholder="Principle Amount" maxlength="10" autocomplete="off"/> <br/>
    Enter rate of interest : <input type="text"  ng-model="rate" placeholder="Rate of Interest" maxlength="2" autocomplete="off"/><br/>
    Enter Tenure of the loan (Years) : <input type="text"  ng-model="duration" placeholder="Tenure of the Loan" maxlength="2" autocomplete="off"/><br/>
    <br/><br/><span>Interest amount using ng-bind</span>
    <h3 ng-bind="((principal * rate * duration) /100) | currency"></h3>
    <h2>Interest amount is </h2>
	
</div>
</form>
</body>
</html> 

controller.js

 
var myFilterController = angular.module('myFilterApp', []);
myFilterController.controller('myFilterController', function($scope) {
	$scope.principal = '';
	$scope.rate='';
	$scope.duration='';
	$scope.interest = $scope.principal * ($scope.rate/100) * $scope.duration;
  }); 

Output

AngularJS parser parses the angular directives and render the HTML output. Angular parser works in three steps
Step 1: HTML browser parses the HTML and creates a DOM Step 2: Angular framework runs over the DOM to find out the ng-directives and manipulates the DOM Step 3: This manipulated DOM will be rendered as HTML in the browser.
Above mentioned three steps happens in two phases called Compile and Link
Compile: In this phase the angular parser parses the DOM and creates a function as soon as it encounters ng-directives. These functions are called as template or compiled function. In this phase we do not have access to the $scope data
Link: In this phase $scope will get attached with the template function and gets executed to get the final HTML output.

AngularJS Routes

AngularJS routes enable you to create different URLs for different content in your application. Having different URLs for different content enables the user to bookmark and share URLs to specific content. In AngularJS each such bookmarkable URL is called a route.

Bootstrapping in angular JS

Bootstapping is equivalent to the initializing or starting of AngularJS application. Below are the ways of bootstrapping the angularJS application automatically.

  • By using ng-app to an HTML element
<html ng-app="myApp">
...
</html>
  • From java script also you can bootstrap angularJS application as shown below
angular.module('myApp',[]);


blog comments powered by Disqus
J2EE,SOAP,RESTful,SVN,PMD,SONAR,JaCoCo,HTTP,API,MAVEN,AngularJS,GitHub,LDAP,AOP,ORM,JMS,MVC,AWS,SQL,PHP,H2DB,JDBC