Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

Web Technologies
22MCA24 June / July 2023 Module 5 (MODULE 4 & 5 IN MMC105)

Q.9.a.  What is Angular JS?  Explain the following Angular JS directives: (8M)
(i) ng_app (ii) ng_model (iii) ng_bind
Q.9.b.  Write an Angular JS program to use expressions. (6M)
Q.9.c. Briefly discuss the use of filter in Angular JS with an example. (6M)
Q.10.a.  What is Angular JS Service?  Explain any three of them by using code snippet.
(10M)
Q.10.b.  Write an Angular JS program to demonstrate client-side form validation. (10M)

20MCA23 Jan. / Feb. 2023 Module 5

Q.9.a.  What is AngularJS? Explain the following AngularJS directives ng-app, ng-model, ng-
bind. (4M)

Q.9.b.  Write an AngularJS program to use expressions. (6M)

Q.9.c.  What is AngularJS data binding?  Write a AngularJS program to add a controller.
(10M)

Q.10.a.  What are AngularJS filters?  Write a AngularJS program to show how you can add
filters to expressions. (10M)
Q.10.b.  What is a AngularJS service? Explain any 4 of them. Write a AngularJS program to
show how you can use Slocation service. (10M)

20MCA23 July / August 2022 Module 5

Q.9.a. What is an angular JS directive? Explain the use of the following directives with code
snippet. ??? (Directives NOT given in Question Paper) (8M).

Q.9.b. What is the use of filter in AngularJS? Explain the use of JSON, Currency, Number,
Lowercase. (8M).

Q.9.c.Demonstrate $ Scope with an example. (4M).

Q.10.a.  Write an angular JS program to demonstrate client-side form validation. (10M).

Q.10.b. With code snippet, explain the use of controllers in Angular JS. (10M).

*** *** ***

These questions are given as per 2022 Scheme of MCA SEE QP i.e. subject code
is 22MCA24. Module 3 Bootstrap is removed in MMC105 i.e. 2024 scheme.
STUDENTS SHOULD NOT GET CONFUSED. It is Module 4 & 5 in MMC105.
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

Q.9.a. What is Angular JS? Explain the following Angular JS directives: (8M)
(i) ng_app (ii) ng_model (iii) ng_bind
[22MCA24 June / July 2023, 20MCA23 Jan. / Feb. 2023]
Definition : 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 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 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.
Definition : AngularJS is a structural framework for dynamic web apps. It lets you use HTML as
your template language and lets you extend HTML's syntax to express your application's
components clearly and succinctly. AngularJS's data binding and dependency injection eliminate
much of the code you would otherwise have to write.

[ Is AngularJS and JavaScript same?

The main difference between JavaScript and AngularJS is that JavaScript functions as a scripting
language, where developers write code in plain text, whereas AngularJS calls actual HTML
elements to create dynamic web pages. JavaScript uses its own syntax, while AngularJS works with
HTML's built-in elements. ]

Definition : AngularJS is an open-source front-end web application framework used for

developing single-page apps that is built on JavaScript. It is primarily supported and maintained by
Google, network of individuals and companies.

AngularJS Directives
AngularJS directives are HTML attributes with an ng prefix.
The ng-init directive initializes AngularJS application variables.
AngularJS Example
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>

Please refer website https://www.w3schools.com/angular/angular_ref_directives.asp for all

AngularJS Directives list
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

Q.9. a. (i) ng_app

AngularJS ng-app Directive
Example
Let the body element become the root element for the AngularJS application:
<body ng-app="">

<p>My first expression: {{ 5 + 5 }}</p>

</body>

Complete Program of above with Output :

<!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>

Output :

Definition and Usage

The ng-app directive tells AngularJS that this is the root element of the AngularJS application.
All AngularJS applications must have a root element.
You can only have one ng-app directive in your HTML document. If more than one ng-
app directive appears, the first appearance will be used.

Syntax
<element ng-app="modulename">
...
content inside the ng-app root element can contain AngularJS code
...
</element>
Supported by all HTML elements.
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

Parameter Values

Value Description
Optional. Specifies the name of a module to load
modulename
with the application

Example
Load a module to run in the application
<div ng-app="myApp" ng-controller="myCtrl">

{{ firstName + " " + lastName }}

</div>
<script>

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
Complete Program of above with Output :
<!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">

{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>

</body>
</html>

Output :
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

Q.9. a. (ii) ng_model

https://www.w3schools.com/angular/ng_ng-model.asp

AngularJS ng-model Directive

Example
Bind the value of an input field to a variable in the scope:
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>

Complete Program of above with Output :

<!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">

<input ng-model="name">

<p>The input field is bound to the "name" variable:</p>

{{name}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>

<p>This example shows how the ng-model directive binds the value of an input field to a variable
in the scope.</p>

</body>
</html>
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

Output :

Definition and Usage

The ng-model directive binds an HTML form element to a variable in the scope.

If the variable does not exist in the scope, it will be created.

Syntax
<element ng-model="name"></element>
Supported by <input>, <select>, and <textarea> elements.
Parameter Values
Value Description
name The name of the property you want to bind to the form
field.

Q.9. a. (iii) ng_bind

https://www.w3schools.com/angular/ng_ng-bind.asp

AngularJS ng-bind Directive

Example
Bind the innerHTML of the <p> element to the variable myText:
<div ng-app="" ng-init="myText='Hello World!'">

<p ng-bind="myText"></p>

</div>

Complete Program of above with Output :

<!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="myText='Hello World!'">

 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

<p ng-bind="myText"></p>

</div>

</body>
</html>

Output :

Definition and Usage

The ng-bind directive tells AngularJS to replace the content of an HTML element with the value of
a given variable, or expression.
If the value of the given variable, or expression, changes, the content of the specified HTML
element will be changed as well.

Syntax
<element ng-bind="expression"></element>
Or as a CSS class:
<element class="ng-bind: expression"></element>
Supported by all HTML elements.

Parameter Values

Value Description
expression Specifies a variable, or an expression to evaluate.

Q.9.b. Write an Angular JS program to use expressions. (6M)

 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

[22MCA24 June / July 2023, 20MCA23 Jan. / Feb. 2023]

https://www.w3schools.com/angular/angular_expressions.asp#:~:text=AngularJS%20expressions
%20can%20also%20be,literals%2C%20operators%2C%20and%20variables.
AngularJS Expressions
AngularJS binds data to HTML using 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.
Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}
Example: AngularJS program to demonstrate the expression,
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app=""> // Angular JS Expression

<p>My first expression: {{ 5 + 5 }}</p>
</div>

<div ng-app="" ng-init="quantity=1;cost=5"> // Angular JS Numbers

<p>Total in dollar: {{ quantity * cost }}</p>
</div>

<div ng-app="" ng-init="firstName='John';lastName='Doe'"> // Angular JS Strings

<p>The full name is: {{ firstName + " " + lastName }}</p>
</div>

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> // Angular JS Objects

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

<div ng-app="" ng-init="points=[1,15,19,2,40]"> // Angular JS Arrays

<p>The third result is {{ points[2] }}</p>
</div>

</body>
</html>

If you remove the ng-app directive, HTML will display the expression as it is, without solving it:
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

Output of above program :

My first expression: 10 o/p of // Angular JS Expression
Total in dollar: 5 o/p of // Angular JS Numbers
The full name is: John Doe o/p of // Angular JS Strings
The name is Doe o/p of // Angular JS Objects
The third result is 19 o/p of // Angular JS Arrays

Q.9.c. Briefly discuss the use of filter in Angular JS with an example. (6M)
[22MCA24 June / July 2023, 20MCA23 Jan. / Feb. 2023]
[ Filters are used for formatting data displayed to the user. They can be used in view templates,
controllers or services. AngularJS comes with a collection of built-in filters, but it is easy to define
your own as well. ]

AngularJS Filters
Filters can be added in AngularJS to format 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.
The uppercase filter format strings to upper case:
Example
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>

The lowercase filter format strings to lower case:

[
<!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="personCtrl">

 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

<p>The name is {{ lastName | uppercase }}</p>

</div>

<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
});
</script>

</body>
</html>

Output :
The name is DOE
]
Example
<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | lowercase }}</p>

</div>

[
<!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="personCtrl">

<p>The name is {{ lastName | lowercase }}</p>

</div>

<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
});
</script>

</body>
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

</html>
Output :
The name is doe
]

Adding Filters to Directives

Filters are added to directives, like ng-repeat, by using the pipe character |, followed by a filter:
Example
The orderBy filter sorts an array:
<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>

</div>

[
<!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>Looping with objects:</p>

<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];
});
</script>

</body>
</html>

Output :
Looping with objects:
 Joe, Denmark
 Birgit, Denmark
 Margareth, England
 Mary, England
 Jani, Norway
 Hege, Norway
 Kai, Norway
 Carl, Sweden
 Gustav, Sweden
]

The currency Filter

The currency filter formats a number as currency:
Example
<div ng-app="myApp" ng-controller="costCtrl">

<h1>Price: {{ price | currency }}</h1>

</div>
[
<!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="costCtrl">

<h1>Price: {{ price | currency }}</h1>

</div>

<script>
var app = angular.module('myApp', []);
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

app.controller('costCtrl', function($scope) {
$scope.price = 58;
});
</script>

<p>The currency filter formats a number to a currency format.</p>

</body>
</html>

Output :
Price: $58.00
The currency filter formats a number to a currency format.
]

The filter Filter

The filter filter selects a subset of an array.
The filter filter can only be used on arrays, and it returns an array containing only the matching items.
Example
Return the names that contains the letter "i":
<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
<li ng-repeat="x in names | filter : 'i'">
{{ x }}
</li>
</ul>

</div>

[
<!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">

<ul>
<li ng-repeat="x in names | filter : 'i'">
{{ x }}
</li>
</ul>
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>

<p>This example displays only the names containing the letter "i".</p>

</body>
</html>
Output :
 Jani
 Birgit
 Kai
This example displays only the names containing the letter "i".

Filter an Array Based on User Input

By setting the ng-model directive on an input field, we can use the value of the input field as an
expression in a filter.
Type a letter in the input field, and the list will shrink/grow depending on the match:

 Jani
 Carl
 Margareth
 Hege
 Joe
 Gustav
 Birgit
 Mary
 Kai
Example
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

<div ng-app="myApp" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

<ul>
<li ng-repeat="x in names | filter : test">
{{ x }}
</li>
</ul>

</div>

<!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',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

</script>

<p>The list will only consists of names matching the filter.</p>

</body>
</html>

Output :

Type a letter in the input field:

 Jani
 Carl
 Margareth
 Hege
 Joe
 Gustav
 Birgit
 Mary
 Kai

The list will only consists of names matching the filter.

--- x --- x ---
Type a letter in the input field:
M

 Margareth
 Mary

The list will only consists of names matching the filter.

]

Sort an Array Based on User Input

Click the table headers to change the sort order::
Name Country
Jani Norway
Carl Sweden
Margareth England
Hege Norway
Joe Denmark
Gustav Sweden
Birgit Denmark
Mary England
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

Kai Norway

By adding the ng-click directive on the table headers, we can run a function that changes the sorting
order of the array:
Example
<div ng-app="myApp" ng-controller="namesCtrl">

<table border="1" width="100%">

<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];
$scope.orderByMe = function(x) {
$scope.myOrderBy = x;
}
});
</script>

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

<p>Click the table headers to change the sorting order:</p>

 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

<div ng-app="myApp" ng-controller="namesCtrl">

<table border="1" width="100%">

<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];
$scope.orderByMe = function(x) {
$scope.myOrderBy = x;
}
});
</script>
</body>
</html>
Output :
Click the table headers to change the sorting order:
Name Country
Jani Norway
Carl Sweden
Margareth England
Hege Norway
Joe Denmark
Gustav Sweden
Birgit Denmark
Mary England
Kai Norway
]
Custom Filters
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

You can make your own filters by registering a new filter factory function with your module:
Example
Make a custom filter called "myFormat":
<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x in names">
{{x | myFormat}}
</li>
</ul>

<script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
return function(x) {
var i, c, txt = "";
for (i = 0; i < x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt += c;
}
return txt;
};
});
app.controller('namesCtrl', function($scope) {
$scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>

The myFormat filter will format every other character to uppercase.

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

<ul ng-app="myApp" ng-controller="namesCtrl">

<li ng-repeat="x in names">
{{x | myFormat}}
</li>
</ul>

<script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

return function(x) {
var i, c, txt = "";
for (i = 0; i < x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt += c;
}
return txt;
};
});
app.controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>

<p>Make your own filters.</p>

<p>This filter, called "myFormat", will uppercase every other character.</p>
</body>
</html>
]

The same answer can be referred from the following web site also :
https://www.geeksforgeeks.org/what-are-filters-in-angularjs/
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

Q.10.a. What is Angular JS Service? Explain any three of them by using code snippet.
(10M) [22MCA24 June / July 2023, 20MCA23 Jan. / Feb. 2023]
AngularJS Services
In AngularJS you can make your own service, or use one of the many built-in services.
What is a Service?
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
Use the $location service in a controller:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});

[
<!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>

Output :
The url of this page is:
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_services
This example uses the built-in $location service to get the absolute url of the page.

Note that the $location service is passed in to the controller as an argument. In order to use the
service in the controller, it must be defined as a dependency.
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

Why use Services?

For many services, like the $location service, it seems like you could use objects that are already in
the DOM, like the window.location object, and you could, but it would have some limitations, at
least for your AngularJS application.
AngularJS constantly supervises your application, and for it to handle changes and events properly,
AngularJS prefers that you use the $location service instead of the window.location object.

The $http Service

The $http service is one of the most common used services in AngularJS applications. The service
makes a request to the server, and lets your application handle the response.

Example
Use the $http service to request data from the server:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});

This example demonstrates a very simple use of the $http service.

[
<!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>Today's welcome message is:</p>

<h1>{{myWelcome}}</h1>

</div>

<p>The $http service requests a page on the server, and the response is set as the value of the
"myWelcome" variable.</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

</script>

</body>
</html>

Output :

Today's welcome message is:

Hello AngularJS Students

The $http service requests a page on the server, and the response is set as the value of
the "myWelcome" variable.

The $timeout Service

The $timeout service is AngularJS' version of the window.setTimeout function.
Example
Display a new message after two seconds:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});

[
<!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>
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
</script>

</body>
</html>

Output :
This header will change after two seconds:
Hello World!
The $timeout service runs a function after a specified number of milliseconds.
***
This header will change after two seconds:
How are you today?
The $timeout service runs a function after a specified number of milliseconds.
]

The $interval Service

The $interval service is AngularJS' version of the window.setInterval function.
Example
Display the time every second:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});

[
<!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 time is:</p>

 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

<h1>{{theTime}}</h1>

</div>

<p>The $interval service runs a function every specified millisecond.</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
</script>

</body>
</html>

Output :
The time is:
2:24:40 PM
The $interval service runs a function every specified millisecond.
]

Create Your Own Service

To create your own service, connect your service to the module:
Create a service named hexafy:
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});

To use your custom made service, add it as a dependency when defining the controller:
Example
Use the custom made service named hexafy to convert a number into a hexadecimal number:
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});

[
<!DOCTYPE html>
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

<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 hexadecimal value of 255 is:</p>

<h1>{{hex}}</h1>

</div>

<p>A custom service with a method that converts a given number into a hexadecimal number.</p>

<script>
var app = angular.module('myApp', []);

app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
</script>

</body>
</html>

Output :
The hexadecimal value of 255 is:
ff
A custom service with a method that converts a given number into a hexadecimal number.
]

Use a Custom Service Inside a Filter

 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

Once you have created a service, and connected it to your application, you can use the service in
any controller, directive, filter, or even inside other services.
To use the service inside a filter, add it as a dependency when defining the filter:
The service hexafy used in the filter myFormat:
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);

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

<div ng-app="myApp">
Convert the number 255, using a custom made service inside a custom made filter:

<h1>{{255 | myFormat}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);

</script>

</body>
</html>

Output :
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

Convert the number 255, using a custom made service inside a custom made filter:
ff
]

You can use the filter when displaying values from an object, or an array:
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>

[
<!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>Use a filter when displaying the array [255, 251, 200]:</p>

<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>

<p>This filter uses a service that converts numbers into hexadecimal values.</p>
</div>

<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
app.controller('myCtrl', function($scope) {
$scope.counts = [255, 251, 200];
});
</script>

</body>
</html>
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

Output :

Use a filter when displaying the array [255, 251, 200]:

 ff
 fb
 c8
This filter uses a service that converts numbers into hexadecimal values.

Q.10.b. Write an Angular JS program to demonstrate client-side form validation. (10M)

 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

[22MCA24 June / July 2023, 20MCA23 July / August 2022]

https://www.w3schools.com/angular/angular_validation.asp

AngularJS Form Validation

AngularJS can validate input data.

(1) 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.
Client-side validation cannot alone secure user input. Server side validation is also necessary.

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

Example
The input field is required:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>

<p>The input's valid state is:</p>

<h1>{{myForm.myInput.$valid}}</h1>
[
<!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>
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

Output :
Try writing in the input field:

The input's valid state is:

False
*** *** ***
Try writing in the input field:

The input's valid state is:

true
]

(2) E-mail Validation

Use the HTML5 type email to specify that the value must be an e-mail:
Example
The input field has to be an e-mail:
<form name="myForm">
<input name="myInput" ng-model="myInput" type="email">
</form>

<p>The input's valid state is:</p>

<h1>{{myForm.myInput.$valid}}</h1>

[
<!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>
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

Output :

(3) Custom Validation

To create your own validation function is a bit more tricky; You have to add a new directive to
your application, and deal with the validation inside a function with certain specified arguments.
Example
Create your own directive, containing a custom validation function, and refer to it by using my-
directive.
The field will only be valid if the value contains the character "e":
<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>

<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
return {
require: 'ngModel',
link: function(scope, element, attr, mCtrl) {
function myValidation(value) {
if (value.indexOf("e") > -1) {
mCtrl.$setValidity('charE', true);
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

} else {
mCtrl.$setValidity('charE', false);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});

</script>
[

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

<p>Try writing in the input field:</p>

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>

<p>The input's valid state is:</p>

<h1>{{myForm.myInput.$valid}}</h1>

<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
return {
require: 'ngModel',
link: function(scope, element, attr, mCtrl) {
function myValidation(value) {
if (value.indexOf("e") > -1) {
mCtrl.$setValidity('charE', true);
} else {
mCtrl.$setValidity('charE', false);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

</script>

<p>The input field must contain the character "e" to be consider valid.</p>

</body>
</html>

Output :

Example Explained:
In HTML, the new directive will be referred to by using the attribute my-directive.
In the JavaScript we start by adding a new directive named myDirective.
Remember, when naming a directive, you must use a camel case name, myDirective, but when
invoking it, you must use - separated name, my-directive.
Then, return an object where you specify that we require ngModel, which is the
ngModelController.
Make a linking function which takes some arguments, where the fourth argument, mCtrl, is
the ngModelController,
Then specify a function, in this case named myValidation, which takes one argument, this
argument is the value of the input element.
Test if the value contains the letter "e", and set the validity of the model controller to
either true or false.
At last, mCtrl.$parsers.push(myValidation); will add the myValidation function to an array of other
functions, which will be executed every time the input value changes.
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

Validation Example
<!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>
Output :
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

The HTML form attribute novalidate is used to disable default browser validation.

Example Explained

The AngularJS directive ng-model binds the input elements to the model.
The model object has two properties: user and email.
Because of ng-show, the spans with color:red are displayed only when user or email
is $dirty and $invalid.

Q.9.c. What is AngularJS data binding? Write a AngularJS program to add a controller.
(10M)
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

https://www.w3schools.com/angular/angular_databinding.asp

AngularJS Data Binding

Data binding in AngularJS is the synchronization between the model and the view. When data in
the model changes, the view reflects the change, and when data in the view changes, the model is
updated as well.
Data Model
AngularJS applications usually have a data model. The data model is a collection of data available
for the application.
Example
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
});

HTML View
The HTML container where the AngularJS application is displayed, is called the view.
The view has access to the model, and there are several ways of displaying model data in the view.
You can use the ng-bind directive, which will bind the innerHTML of the element to the specified
model property:
Example
<p ng-bind="firstname"></p>

[
<!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 ng-bind="firstname"></p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
});
</script>
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

<p>Use the ng-bind directive to bind the innerHTML of an element to a property in the data
model.</p>

</body>
</html>

Output :
John
Use the ng-bind directive to bind the innerHTML of an element to a property in the data model.
]

You can also use double braces {{ }} to display content from the model:
Example
<p>First name: {{firstname}}</p>

[
<!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>First name: {{firstname}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
});
</script>

<p>You can use double braces to display content from the data model.</p>

</body>
</html>

Output :
First name: John
You can use double braces to display content from the data model.
]
Or you can use the ng-model directive on HTML controls to bind the model to the view.
The ng-model Directive
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

Use the ng-model directive to bind data from the model to the view on HTML controls (input,
select, textarea)
Example
<input ng-model="firstname">

[
<!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">

<input ng-model="firstname">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
});
</script>

<p>Use the ng-model directive on HTML controls (input, select, textarea) to bind data between the
view and the data model.</p>

</body>
</html>

Output :

]
The ng-model directive provides a two-way binding between the model and the view.

Two-way Binding
Data binding in AngularJS is the synchronization between the model and the view.
When data in the model changes, the view reflects the change, and when data in the view changes,
the model is updated as well. This happens immediately and automatically, which makes sure that
the model and the view is updated at all times.
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

Example
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="firstname">
<h1>{{firstname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
});
</script>

[
<!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">

Name: <input ng-model="firstname">
<h1>{{firstname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
});
</script>

<p>Change the name inside the input field, and the model data will change automatically, and
therefore also the header will change its value.</p>

</body>
</html>

Output :
Name:
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

John

Change the name inside the input field, and the model data will change automatically, and therefore
also the header will change its value.
]

AngularJS Controller
Applications in AngularJS are controlled by controllers. Read about controllers in the AngularJS
Controllers chapter.
Because of the immediate synchronization of the model and the view, the controller can be
completely separated from the view, and simply concentrate on the model data. Thanks to the data
binding in AngularJS, the view will reflect any changes made in the controller.

Example

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-click="changeName()">{{firstname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.changeName = function() {
$scope.firstname = "Nelly";
}
});

</script>

[
<!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-click="changeName()">{{firstname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.changeName = function() {
 Answers are given in detail. Please answer to the point for the asked questions and allotted marks.

$scope.firstname = "Nelly";
}
});
</script>

<p>Click on the header to run the "changeName" function.</p>

<p>This example demonstrates how to use the controller to change model data.</p>

</body>
</html>

Output :

John
Click on the header to run the "changeName" function.
This example demonstrates how to use the controller to change model data.
]