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
Compile and Link phase in AngularJS
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',[]);