<!
doctype html><html><head>
<script src = Include AngularJS
"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js
"></script></head>
Point to AngularJS app
<body ng-app = "myapp">
<div ng-controller = "HelloController" >
<h2>Welcome {{helloTo.title}} to the world of Web
Technology!</h2> View
</div><script>
angular.module("myapp", []).controller("HelloController",
function($scope) {
$scope.helloTo = {}; Controller
$scope.helloTo.title = "AngularJS";
});</script></body></html>
40 R.Vijayani / Asso Prof / SITE / VIT
Include AngularJS
included the AngularJS JavaScript file in the HTML page so we can use
AngularJS
Point to AngularJS app
tell what part of the HTML contains the AngularJS app either add it
to html element or body element
View
ng-controller tells AngularJS what controller to use with this
view. helloTo.title tells AngularJS to write the "model" value named
helloTo.title to the HTML at this location.
Controller
code registers a controller function named HelloController in the angular
module named myapp.
The $scope parameter passed to the controller function is the model. The
controller function adds a helloTo JavaScript object, and in that object it
adds a title field.
41 R.Vijayani / Asso Prof / SITE / VIT
When the page is loaded in the browser,
following things happen:
HTML document is loaded into the browser, and evaluated by the
browser.
AngularJS JavaScript file is loaded, the angular global object is created.
Next, JavaScript which registers controller functions is executed.
Next AngularJS scans through the HTML to look for AngularJS apps
and views.
Once view is located, it connects that view to the corresponding
controller function.
Next, AngularJS executes the controller functions.
It then renders the views with data from the model populated by the
controller.The page is now ready.
42 R.Vijayani / Asso Prof / SITE / VIT
AngularJS $Scope
It is the binding part between the HTML (view) and the JavaScript
(controller).
It is an object with the available properties and methods.
It is available for both the view and the controller.
If we consider an AngularJS application to consist of:
View, which is the HTML.
Model, which is the data available for the current view.
Controller, which is the JavaScript function that
makes/changes/removes/controls the data.
Then the scope is the Model.
The scope is a JavaScript object with properties and methods,
which are available for both the view and the controller.
43 R.Vijayani / Asso Prof / SITE / VIT
The controller's primary responsibility is to control the data which
gets passed to the view. The scope and the view have two-way
communication.
The properties of the view can call "functions" on the scope.
Moreover events on the view can call "methods" on the scope.
44 R.Vijayani / Asso Prof / SITE / VIT
<div ng-app = "mainApp" ng-controller = "shapeController">
<p>{{message}} <br/> {{type}} </p>
<div ng-controller = "circleController">
<p>{{message}} <br/> {{type}} </p> </div>
<div ng-controller = "squareController">
<p>{{message}} <br/> {{type}} </p>
• We assign values to the
var mainApp = angular.module("mainApp", []);
models in
shapeController.
mainApp.controller("shapeController", function($scope) { • We override message in
$scope.message = "In shape controller"; child controller
$scope.type = "Shape"; named circleController.
}); • When message is used
mainApp.controller("circleController", function($scope) { within the module of
$scope.message = "In circle controller"; controller
}); named circleController,
mainApp.controller("squareController", function($scope) { the overridden message
$scope.message = "In square controller"; is used.
$scope.type = "Square";
}); /p> </div>
45
R.Vijayani / Asso Prof / SITE / VIT
AngularJS Filters
Filters can be added in AngularJS to format or modify data.
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.
Adding Filters to Expressions
Filters can be added to expressions by using the pipe character |,
followed by a filter.
46 R.Vijayani / Asso Prof / SITE / VIT
Enter first name:<input type = "text" ng-model =
"student.firstName"> Enter last name: <input type = "text" ng-
model = "student.lastName">
Name in Lower Case: {{student.fullName() | lowercase}}
Name in Upper Case: {{student.fullName() | uppercase}}
Enter fees: <input type = "text" ng-model = "student.fees">
fees: {{student.fees | currency}}
Enter subject: <input type = "text" ng-model = "subjectName">
Subject: <ul> <li ng-repeat = "subject in student.subjects |
filter: subjectName"> {{ subject.name + ', marks:' +
subject.marks }} </li> </ul>
<li ng-repeat = "subject in student.subjects | orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }} </li>
47 R.Vijayani / Asso Prof / SITE / VIT
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees:500,
subjects:[ {name:'Physics',marks:70}, {name:'Chemistry',marks:80},
{name:'Math',marks:65} ],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
} };
$scope.today = new Date();
$scope.weight = 9999;
$scope.prize=100;
$scope.cars = ["Audi", "BMW", "Dodge", "Fiat", "Ford", "Volvo"];
$scope.customer = {
"name" : "Alfreds Futterkiste",
"city" : "Berlin",
"country" : "Germany"
48 }; }); / Asso Prof / SITE / VIT
R.Vijayani
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-focus
ng-click, ng-dblclick
ng-copy, ng-cut, ng-paste
ng-keydown, ng-keypress, ng-keyup
Mouse Events : Mouse events occur when the cursor moves over an
element, in this order:
1.ng-mouseover 2. ng-mouseenter 3. ng-mousemove 4. ng-mouseleave
Or when a mouse button is clicked on an element, in this order:
1. ng-mousedown 2. ng-mouseup 3. ng-click
You can add mouse events on any HTML element.
49 R.Vijayani / Asso Prof / SITE / VIT
<!DOCTYPE html><html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.m
in.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>
50 R.Vijayani / Asso Prof / SITE / VIT
51 R.Vijayani / Asso Prof / SITE / VIT
<!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="myFunc()">Click Me!</button>
<div ng-show="showMe">
<table border=1 bgcolor="yellow"><caption>Details</caption>
<tr><td>Vijayan</td><td>SITE</td></tr>
<tr><td>Tharun</td><td>SCOPE</td></tr></table>
</div> </div> <script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) { Call function at click
$scope.showMe = false; for show / hide
$scope.myFunc = function() {
$scope.showMe = !$scope.showMe;
} });</script> <p>Click the button to show/hide the details.</p>
</body></html>
52 R.Vijayani / Asso Prof / SITE / VIT
53 R.Vijayani / Asso Prof / SITE / VIT
Angular JS Forms
Forms in AngularJS provides data-binding and validation of
input controls.
Input controls are the HTML input elements:
input elements
select elements
button elements
Radiobutton
textarea elements
Input controls provides data-binding by using the ng-model
directive.
54 R.Vijayani / Asso Prof / SITE / VIT
ng-show and ng-hide
The ng-show directive shows or hides an HTML element.
<p ng-show="true"> I am visible.</p>
<p ng-show="false">I am not visible.</p>
The ng-show directive shows (or hides) an HTML element
based on the value of ng-show.
You can use any expression that evaluates to true or false:
<div ng-app="" ng-init="hour=13"> <p ng-show="hour >
12">I am visible.</p> </div>
The ng-hide directive hides or shows an HTML element.
55 R.Vijayani / Asso Prof / SITE / VIT
Text
<input type="text" ng-model="firstname">
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "John";
});
</script>
Checkbox
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My Header</h1>
56
R.Vijayani / Asso Prof / SITE / VIT
Radio
Pick a topic:
<input type="radio" ng-model="myVar" value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
<p>Welcome to a world of dogs.</p>
</div>
<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>
57
R.Vijayani / Asso Prof / SITE / VIT
AngularJS Select Boxes
Creating a Select Box Using ng-options
If you want to create a dropdown list, based on an object or
an array in AngularJS, you should use the ng-options
directive:
ng-options vs ng-repeat
You can also use the ng-repeat directive to make the same
dropdown list
58 R.Vijayani / Asso Prof / SITE / VIT
AngularJS HTML DOM
AngularJS has directives for binding application data to the
attributes of HTML DOM elements.
The ng-disabled Directive
The ng-disabled directive binds AngularJS application data
to the disabled attribute of HTML elements.
59 R.Vijayani / Asso Prof / SITE / VIT
AngularJS HTML DOM
The ng-disabled directive binds the application data
mySwitch to the HTML button's disabled attribute.
The ng-model directive binds the value of the HTML
checkbox element to the value of mySwitch.
If the value of mySwitch evaluates to true, the button will
be disabled:
60 R.Vijayani / Asso Prof / SITE / VIT
Select
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
<p>Welcome to a world of dogs.</p>
</div>
<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>
61
R.Vijayani / Asso Prof / SITE / VIT
Form Validation
AngularJS offers client-side form validation.
AngularJS monitors the state of the form and
input fields (input, textarea, select), and lets you
notify the user about the current state.
AngularJS also holds information about whether
they have been touched, or modified, or not.
You can use standard HTML5 attributes to
validate input, or you can make your own
validation functions.
62 R.Vijayani / Asso Prof / SITE / VIT
Input Fields 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.
63 R.Vijayani / Asso Prof / SITE / VIT
Form State
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.
64 R.Vijayani / Asso Prof / SITE / VIT
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:
ng-untouched-> The field has not been touched yet
ng-touched The field has been touched
ng-pristine The field has not been modified yet
ng-dirty The field has been modified
ng-valid The field content is valid
ng-invalid The field content is not valid
ng-valid-key One key for each validation.
Example: ng-valid-required, useful when there are more than one
thing that must be validated
ng-invalid-key Example: ng-invalid-required
65 R.Vijayani / Asso Prof / SITE / VIT
CSS Classes
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-validThe form content is valid
ng-invalidThe form content is not valid
ng-valid-key One key for each validation.
Example: ng-valid-required, useful when there are more than one
thing that must be validated
ng-invalid-key Example: ng-invalid-required
The classes are removed if the value they represent is false.
66 R.Vijayani / Asso Prof / SITE / VIT
Validation directives
ng-required directive to do the same thing. Using this directive
you have the flexibility to set the input field should have a value or
not.
<input type="text" ng-required="true" />
ng-minlength is used to validate the minimum length of the
input value.
<input type="text" ng-minlength=10 />
ng-maxlength is used to validate the maximum length of the
input value.
<input type="text" ng-maxlength=20 />
67 R.Vijayani / Asso Prof / SITE / VIT
Validation directives
ng-pattern directive is used to ensure that an input matches
a regex pattern, the following syntax is used.
<input type="text" ng-pattern="[a-zA-Z]" />
EmailWe can set the input type to email to ensure that the
input field is a valid email id.
<input type="email" name="email" ng-model="user.email"
/>
NumberWe can set the input type to number to ensure that
the input field is a number.
<input type="number" name="age" ng-model="user.age" />
URLWe can set the input type to url to ensure that the input
field is a url.
<input type="url" name="homepage" ng-model="user.url" />
68 R.Vijayani / Asso Prof / SITE / VIT
Angular Form Validation Using $error
property
$error , is an object hash, containing references to controls
or forms with failing validators, where its keys are validation
tokens (error names) and values are arrays of controls or
forms that have a failing validator for given error name.
The following list shows the Built-in validation tokens:
email , max, maxlength, min,minlength,number
pattern, required, url
date, datetimelocal,time
week,month
69 R.Vijayani / Asso Prof / SITE / VIT
Form Validation
<!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>
70 R.Vijayani / Asso Prof / SITE / VIT
<!DOCTYPE html><html><script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body><h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>Username:<br><input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is
required.</span></span></p>
<p>Email:<br><input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span></span></p>
<p><input type="submit“ ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid"></p></form>
<script>var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = '
[email protected]';
});</script></body></html>
71 R.Vijayani / Asso Prof / SITE / VIT
72 R.Vijayani / Asso Prof / SITE / VIT
