Scribd
Upload
27 views

Module 5

Uploaded by

Abhishek V
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
27 views

Module 5

Uploaded by

Abhishek V
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

WEB Technologies 22MCAL24

MODULE 5
Angular JS
Introduction to Angular JS
• AngularJS is a very powerful JavaScript Framework. It is used in Single Page Application
(SPA) projects.
• AngularJS is open source, completely free, and used by thousands of developers around the
world.
• AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.
• AngularJS extends HTML attributes with Directives, and binds data to HTML with
Expressions.

AngularJS is a JavaScript Framework


• AngularJS is a JavaScript framework written in JavaScript.
• AngularJS is distributed as a JavaScript file, and can be added to a web page with a script
tag:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>

AngularJS Extends HTML


• AngularJS extends HTML with ng-directives.
• The ng-app directive defines an AngularJS application.
• The ng-model directive binds the value of HTML controls (input, select, textarea) to
application data.
• The ng-bind directive binds application data to the HTML view.

Example: prac1.html

<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/ang
ular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>

Example explained:
• AngularJS starts automatically when the web page has loaded.

YOGEESH S | [email protected] Page 1


WEB Technologies 22MCAL24

• The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS
application.
• The ng-model directive binds the value of the input field to the application variable name.
• The ng-bind directive binds the content of the <p> element to the application variable name.

AngularJS Directives
• AngularJS directives are extended HTML attributes with the prefix ng-.
• The ng-app directive initializes an AngularJS application.
• The ng-init directive initializes application data.
• The ng-model directive binds the value of HTML controls (input, select, textarea) to
application data.

Example: directives.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstName=''">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
</body>
</html>

Data Binding
• The {{ firstName }} expression, in the example above, is an AngularJS data binding
expression.
• Data binding in AngularJS binds AngularJS expressions with AngularJS data.
• {{ firstName }} is bound with ngmodel="firstName".

Example: binding.html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div data-ng-app="" data-ng-init="quantity=2;price=5">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">
<p><b>Total in dollar:</b> {{quantity * price}}</p>
</div>
</body>
</html>

YOGEESH S | [email protected] Page 2


WEB Technologies 22MCAL24

Repeating HTML Elements


• The ng-repeat directive repeats an HTML element:

Example: repeat.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<body>
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>Looping with ng-repeat:</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
</body>
</html>

The ng-app Directive


• The ng-app directive defines the root element of an AngularJS application.

The ng-init Directive


• The ng-init directive defines initial values for an AngularJS application.

The ng-model Directive


• The ng-model directive binds the value of HTML controls (input, select, textarea) to
application data.

The ng-model directive can also:


• 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.

AngularJS Expressions
• AngularJS expressions can be written inside double braces: {{ expression }}.
• AngularJS expressions can also be written inside a directive: ng-bind="expression".
• AngularJS will resolve the expression, and return the result exactly where the expression is
written.
• AngularJS expressions are much like JavaScript expressions: They can contain literals,
operators, and variables.

YOGEESH S | [email protected] Page 3


WEB Technologies 22MCAL24

Example: expressions.html

<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.
min.js"></script>
<body>
<div ng-app>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>

• If you remove the ng-app directive, HTML will display the expression as it is, without
solving it:

Example: solve.html

<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9
/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
• You can write expressions wherever you like, AngularJS will simply resolve the expression
and return the result.

Example: color.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.
9/angular.min.js"></script>
<body>
<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ngmodel="myCol">
</div>
</body>
</html>

YOGEESH S | [email protected] Page 4


WEB Technologies 22MCAL24

AngularJS Numbers
• AngularJS numbers are like JavaScript numbers:

Example: numbers.html

<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.
min.js"></script>
<body>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
</body>
</html>

AngularJS Strings
AngularJS strings are like JavaScript strings:

Example: string.html

<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<body>
<div ng-app="" ng-init="firstName='Sowmya';lastName='V'">
<p>The full name is: {{ firstName + " " + lastName }}</p>
</div>
</body>
</html>

AngularJS Objects
• AngularJS objects are like JavaScript objects:

Example: objects.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<body>
<div ng-app="" ng-init="person={firstName:'Sowmya',lastName:’Venkatesh'}">

YOGEESH S | [email protected] Page 5


WEB Technologies 22MCAL24

<p>The name is {{ person.lastName }}</p>


</div>
</body>
</html>

AngularJS Arrays
• AngularJS arrays are like JavaScript arrays:

Example: arrays1.html

<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/ang
ular.min.js"></script>
<body>
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
</body>
</html>

AngularJS Expressions vs. JavaScript Expressions


• Like JavaScript expressions, AngularJS expressions can contain literals, operators, and
variables.
• Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.
• AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript
expressions do.
• AngularJS expressions support filters, while JavaScript expressions do not.

AngularJS Controllers

• AngularJS controllers control the data of AngularJS applications.


• AngularJS controllers are regular JavaScript Objects.
• The ng-controller directive defines the application controller.
• A controller is a JavaScript Object, created by a standard JavaScript object constructor.

Example: controller.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">

YOGEESH S | [email protected] Page 6


WEB Technologies 22MCAL24

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('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "Sowmya";
$scope.lastName = "V";
});
</script>
</body>
</html>

• The AngularJS application is defined by ngapp="myApp". The application runs inside the
<div>.
• The ng-controller="myCtrl" attribute is an AngularJS directive. It defines a controller.
• The myCtrl function is a JavaScript function.
• AngularJS will invoke the controller with a $scope object.
• In AngularJS, $scope is the application object (the owner of application variables and
functions).
• The controller creates two properties (variables) in the scope (firstName and lastName).
• The ng-model directives bind the input fields to the controller properties (firstName and
lastName).

AngularJS Filters
AngularJS provides filters to transform data:

currency Format a number to a currency format.


date Format a date to a specified format.
filter Select a subset of items from an array.
json Format an object to a JSON string.
limitTo Limits an array/string, into a specified number of elements/characters.
lowercase Format a string to lower case.
number Format a number to a string.
orderBy Orders an array by an expression.
uppercase Format a string to upper case.

Example: upper.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>

YOGEESH S | [email protected] Page 7


WEB Technologies 22MCAL24

<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>college {{ firstName | uppercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "rnsit",
$scope.lastName = "Mca"
});
</script>
</body>
</html>

• The filter selects a subset of an array.


• The filter can only be used on arrays, and it returns an array containing only the matching
items.

Example: filter.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Kai'
];
});
</script>
<p>The list will only consists of names matching the filter.</p>
</body>
</html>

YOGEESH S | [email protected] Page 8


WEB Technologies 22MCAL24

AngularJS Services

• In AngularJS, a service is a function, or object, that is available for, and limited to, your
AngularJS application.
• AngularJS has about 30 built-in services. One of them is the $location service.
• The $location service has methods which return information about the location of the
current web page:

Example: location.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>The url of this page is:</p>
<h3>{{myUrl}}</h3>
</div>
<p>This example uses the built-in $location service to get the absolute url of the
page.</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
</script>
</body>
</html>

• The $timeout service is AngularJS' version of the window.setTimeout function.

Example: timeout.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>This header will change after two seconds:</p>
<h1>{{myHeader}}</h1>
</div>
<p>The $timeout service runs a function after a specified number of milliseconds.</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {

YOGEESH S | [email protected] Page 9


WEB Technologies 22MCAL24

$scope.myHeader = "Hello World!";


$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
</script>
</body>
</html>

AngularJS Events
You can add AngularJS event listeners to your HTML elements by using one or more of these
directives:

• ng-blur
• ng-change
• ng-click
• ng-copy
• ng-cut
• ng-dblclick
• ng-focus
• ng-keydown
• ng-keypress
• ng-keyup
• ng-mousedown
• ng-mouseenter
• ng-mouseleave
• ng-mousemove
• ng-mouseover
• ng-mouseup
• ng-paste

Mouse Events
• Mouse events occur when the cursor moves over an element, in this order:
• ng-mouseover
• ng-mouseenter
• ng-mousemove
• ng-mouseleave
• Or when a mouse button is clicked on an element, in this order:
• ng-mousedown
• ng-mouseup
• ng-click
• You can add mouse events on any HTML element.

Example: mouse.html

YOGEESH S | [email protected] Page 10


WEB Technologies 22MCAL24

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="count = count + 1">Mouse Over Me!</h1>
<h2>{{ count }}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
</body>
</html>

Example: click.html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click Me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
</body>
</html>

AngularJS Forms
• Forms in AngularJS provides data-binding and validation of input controls.
Input Controls
• Input controls are the HTML input elements:
• input elements
• select elements
• button elements
• textarea elements
Example:form.html

YOGEESH S | [email protected] Page 11


WEB Technologies 22MCAL24

<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<body>
<div ng-app="">
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
</div>
<p>Change the name inside the input field, and you will see the name in the
header changes accordingly.</p>
</body>
</html>

Checkbox
• A checkbox has the value true or false. Apply the ng-model directive to a checkbox, and use
its value in your application.

Example: check.html

<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<body>
<div ng-app="">
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My Header</h1>
</div>
<p>The header's ng-show attribute is set to true when the checkbox is
checked.</p>
</body>
</html>

YOGEESH S | [email protected] Page 12


WEB Technologies 22MCAL24

Radiobuttons
• Bind radio buttons to your application with the ng-model directive.
• Radio buttons with the same ng-model can have different values, but only the selected one
will be used.

Example:radio.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<form>
Pick a topic:
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
<div ng-switch="myVar">
<div ng-switch-when="tuts">
<h1>Tutorials</h1>
<p>Learn from examples.</p>
</div>
<div ng-switch-when="cars">
<h1>Cars</h1>
<p>Read about cars.</p>
</div>
</div>
<p>The ng-switch directive hides and shows HTML sections depending on the value of the
radio
buttons.</p>
</body>
</html>

Selectbox
• Bind select boxes to your application with the ng-model directive.
• The property defined in the ng-model attribute will have the value of the selected option in
the selectbox.

Example: select.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<form>
Select a topic:
<select ng-model="myVar">

YOGEESH S | [email protected] Page 13


WEB Technologies 22MCAL24

<option value="">
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>
<div ng-switch="myVar">
<div ng-switch-when="tuts">
<h1>Tutorials</h1>
<p>Learn from examples.</p>
</div>
<div ng-switch-when="cars">
<h1>Cars</h1>
<p>Read about cars.</p>
</div>
</div>
<p>The ng-switch directive hides and shows HTML sections depending on the value of the
dropdown
list.</p>
</body>
</html>

Form Validation
• AngularJS offers client-side form validation.

Required
• Use the HTML5 attribute required to specify that the input field must be filled out:

Example:requir.html

<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.
js"></script>
<body ng-app="">
<p>Try writing in the input field:</p>
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>

YOGEESH S | [email protected] Page 14


WEB Technologies 22MCAL24

E-mail
• Use the HTML5 type email to specify that the value must be an e-mail:

Example:email.html

<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<body ng-app="">
<p>Try writing an E-mail address in the input field:</p>
<form name="myForm">
<input type="email" name="myInput" ng-model="myInput">
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
<p>Note that the state of the input field is "true" before you start writing in it,
even if it does not contain an e-mail address.</p>
</body>
</html>

Form State and Input State


• AngularJS is constantly updating the state of both the form and the input fields.
• Input fields have the following states:
• $untouched The field has not been touched yet
• $touched The field has been touched
• $pristine The field has not been modified yet
• $dirty The field has been modified
• $invalid The field content is not valid
• $valid The field content is valid

• They are all properties of the input field, and are either true or false.
• Forms have the following states:
• $pristine No fields have been modified yet
• $dirty One or more have been modified
• $invalid The form content is not valid
• $valid The form content is valid
• $submitted The form is submitted
• They are all properties of the form, and are either true or false.

YOGEESH S | [email protected] Page 15


WEB Technologies 22MCAL24

Example: leave.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<p>Try leaving the first input field blank:</p>
<form name="myForm">
<p>Name:
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is
required.</span>
</p>
<p>Address:
<input name="myAddress" ng-model="myAddress" required>
</p>
</form>
<p>We use the ng-show directive to only show the error message if the field has been
touched AND is empty.</p>
</body>
</html>

CSS Classes
• AngularJS adds CSS classes to forms and input fields depending on their states.
• The following classes are added to, or removed from, input fields:
1. ng-untouched The field has not been touched yet
2. ng-touched The field has been touched
3. ng-pristine The field has not been modified yet
4. ng-dirty The field has been modified
5. ng-valid The field content is valid
6. ng-invalid The field content is not valid
7. ng-valid-key One key for each validation.
8. ng-invalid-key Example: ng-invalid-required

• The following classes are added to, or removed from, forms:


ng-pristine No fields has not been modified yet
ng-dirty One or more fields has been modified
ng-valid The form content is valid
ng-invalid The form content is not valid
ng-valid-key One key for each validation.
ng-invalid-key
• The classes are removed if the value they represent is false.

YOGEESH S | [email protected] Page 16


WEB Technologies 22MCAL24

Example: back.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style>
input.ng-invalid {
background-color:pink;
}
input.ng-valid {
background-color:lightgreen;
}
</style>
<body ng-app="">
<p>Try writing in the input field:</p>
<form name="myForm">
<input name="myName" ng-model="myName" required>
</form>
<p>The input field requires content, and will therefore become green when you write in
it.</p>
</body>
</html>

YOGEESH S | [email protected] Page 17

You might also like