Scribd
Upload
25 views

56 Angular JS Module Controller Scope Object Filters Event Handling Form Handling 02-03-2023

The document includes an AngularJS app with the following key points: 1. It includes the AngularJS JavaScript file to use AngularJS functionality. 2. It defines an Angular app named "myapp" and a controller named "HelloController". 3. The controller adds a "helloTo" object to the $scope with a "title" property set to "AngularJS". 4. The view displays a welcome message binding the "title" property to the view. When the page loads, Angular populates the view with data from the model defined in the controller.

Uploaded by

fokac40868
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
25 views

56 Angular JS Module Controller Scope Object Filters Event Handling Form Handling 02-03-2023

The document includes an AngularJS app with the following key points: 1. It includes the AngularJS JavaScript file to use AngularJS functionality. 2. It defines an Angular app named "myapp" and a controller named "HelloController". 3. The controller adds a "helloTo" object to the $scope with a "title" property set to "AngularJS". 4. The view displays a welcome message binding the "title" property to the view. When the page loads, Angular populates the view with data from the model defined in the controller.

Uploaded by

fokac40868
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

<!

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]" />
 EmailWe 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"
/>
 NumberWe 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" />
 URLWe 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

You might also like