Scribd
Upload
27 views

Module 5

Uploaded by

Abhishek V
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
27 views

Module 5

Uploaded by

Abhishek V
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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 | yogeesh.sryd@gmail.com 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 | yogeesh.sryd@gmail.com 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 | yogeesh.sryd@gmail.com 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 | yogeesh.sryd@gmail.com 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 | yogeesh.sryd@gmail.com 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 | yogeesh.sryd@gmail.com 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 | yogeesh.sryd@gmail.com 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 | yogeesh.sryd@gmail.com 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 | yogeesh.sryd@gmail.com 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 | yogeesh.sryd@gmail.com 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 | yogeesh.sryd@gmail.com 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 | yogeesh.sryd@gmail.com 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 | yogeesh.sryd@gmail.com 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 | yogeesh.sryd@gmail.com 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 | yogeesh.sryd@gmail.com 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 | yogeesh.sryd@gmail.com 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 | yogeesh.sryd@gmail.com Page 17

You might also like