Scribd
Upload
28 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 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
We take content rights seriously. If you suspect this is your content, claim it here.
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