Angular JS Lab Manual

21CSL581 ANGULAR JS Laboratory
CMR INSTITUTE OF TECHNOLOGY, BANGALORE

Affiliated to Visvesvaraya Technological University- Belagavi
DEPARTMENT OF ARTIFICIAL INTELLIGENCE & DATA SCIENCE
Angular JS Laboratory Manual

21CSL581
V-Semester
1
Department of Artificial Intelligence & Data Science, CMRIT
ANGULAR JS
Course Code 21CSL581 CIE Marks 50
Teaching Hours/Week (L:T:P: S) 0:0:2:0 SEE Marks 50
Credits 01 Total marks 100
Examination type (SEE) PRACTICAL
Course objectives:
 To learn the basics of Angular JS framework.
 To understand the Angular JS Modules, Forms, inputs, expression, data bindings and Filters
 To gain experience of modern tool usage (VS Code, Atom or any other] in developing Web applications
Sl.NO Experiments
1 Develop Angular JS program that allows user to input their first name and last name and display their full
name. Note: The default values for first name and last name may be included in the program.
2 Develop an Angular JS application that displays a list of shopping items. Allow users to add and remove
items from the list using directives and controllers. Note: The default values of items may be included in
the program.
3 Develop a simple Angular JS calculator application that can perform basic mathematical operations
(addition, subtraction, multiplication, division) based on user input.
4
Write an Angular JS application that can calculate factorial and compute square based on given user input.
5 Develop AngularJS application that displays a details of students and their CGPA. Allow users to read the
number of students and display the count. Note: Student details may be included in the program.
6 Develop an AngularJS program to create a simple to-do list application. Allow users to add, edit, and delete
tasks. Note: The default values for tasks may be included in the program.
7 Write an AngularJS program to create a simple CRUD application (Create, Read, Update, and Delete) for
managing users.
8 Develop AngularJS program to create a login form, with validation for the username and password fields.
9 Create an AngularJS application that displays a list of employees and their salaries. Allow users to search
for employees by name and salary. Note: Employee details may be included in the program.
10 Create AngularJS application that allows users to maintain a collection of items. The application should
display the current total number of items, and this count should automatically update as items are added
or removed. Users should be able to add items to the collection and remove them as needed.
Note: The default values for items may be included in the program.
11 Create AngularJS application to convert student details to Uppercase using angular filters.
Note: The default details of students may be included in the program.
12 Create an AngularJS application that displays the date by using date filter parameters
2
NOTE 1: Sample Programs are given at the end for the students to practice
Note 2: Since Internet is not allowed during the exams it is not possible to use the
angular.min.js from online. Hence, instead of using the online script, please download the
offline angular.min.js from the link below
https://drive.google.com/file/d/18WE3NQA7p2isaLzSnMDJYXLWfWiW3NvT/view?usp=drive_link
and paste it inside the same directory from where the program is being run and use the below
script to include the angular.min.js.
<script type="text/javascript" src="angular.min.js"></script>
3
1. Develop Angular JS program that allows user to input their first name and last
name and display their full name. Note: The default values for first name and
last name may be included in the program.
<!DOCTYPE html>
<html>
<title>
Angular JS Full Name Pgm
</title>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCntrl",function($scope){
$scope.firstName="Harish Kumar"
$scope.lastName="B T"
});
</script>
</head>
<body ng-app="myApp">
<h2>Anjular JS Application to Display Full Name</h2>
<div ng-controller="myCntrl">
Enter First Name: <input type="text" ng-model="firstName"><br/>
Enter Last Name: <input type="text" ng-model="lastName"><br/>
Your Full Name: {{firstName +" "+ lastName}}
</div>
</body>
</html>
4
Output:
5
2. Develop an Angular JS application that displays a list of shopping items. Allow

users to add and remove items from the list using directives and controllers.
Note: The default values of items may be included in the program.
<!DOCTYPE html>
<html>
<title>
Shopping Items Application
</title>
<head>
</script>
<script>
$scope.shoppingItems=['Apple','Mango','Banana','Grapes']
$scope.addItem=function(){
if($scope.newItem && $scope.shoppingItems.indexOf($scope.newItem)==-1)
{
$scope.shoppingItems.push($scope.newItem)
$scope.newItem=""
}
else
{
if($scope.newItem)
alert("This item is already there in the shopping list")
else
alert("Please enter an item to add")
}
}
$scope.removeItem=function(){
//console.log("function called")
if($scope.shoppingItems.indexOf($scope.selectItem)==-1)
{
alert("Please select an item to remove")
}
else{
var index=$scope.shoppingItems.indexOf($scope.selectItem)
$scope.shoppingItems.splice(index,1)
$scope.selectItem=""
}
}
});
</script>
6
</head>
<h2>Shopping Application</h2>
<h4>List of Shopping Items</h4>
<table border="1">
<tr>
<th>SLNO</th>
<th>Item</th>
</tr>
<tr ng-repeat="items in shoppingItems">
<td>{{$index+1}}</td>
<td>{{items}}</td>
</tr>
</table>
<br/>
<div>
Enter an Item to Add: <input type="text" ng-model="newItem">
<button ng-click="addItem()">Add Item</button>
</div>
<div>
Select an Item to Remove:
<select ng-model="selectItem" ng-options="item for item in shoppingItems"></select>
<button ng-click="removeItem()">Remove Item</button>
</div>
</div>
</body>
</html>
7
Output:
8
3. Develop a simple Angular JS calculator application that can perform basic

mathematical operations (addition, subtraction, multiplication, division) based
on user input.
<!DOCTYPE html>
<html>
<title>
AJS Simple Calculator
</title>
<head>
</script>
<script>
var app=angular.module("calcApp",[]);
app.controller("calcCntrl",function($scope)
{
$scope.num1=0
$scope.num2=0
$scope.result=0
$scope.operator="add"
$scope.compute=function(){
switch($scope.operator){
case 'add': $scope.result=$scope.num1 + $scope.num2
break
case 'sub': $scope.result=$scope.num1 - $scope.num2
break
case 'mul': $scope.result=$scope.num1 * $scope.num2
break
case 'div': if($scope.num2==0){
alert("Divide by zero error")
}
else{
$scope.result=$scope.num1/$scope.num2
}}}
});
</script>
</head>
<body ng-app="calcApp">
<h1>Angular JS Simple Calculator</h1>
<div ng-controller="calcCntrl">
9
Enter First Number: <input type="number" ng-model="num1">

Select Operator:<select ng-model="operator">
<option value="add">+</option>
<option value="sub">-</option>
<option value="mul">*</option>
<option value="div">/</option>
</select>
Enter Second Number:<input type="number" ng-model="num2">
<button ng-click="compute()">Compute</button>
<br/>
<b>{{num1 + " "+operator+ " "+ num2+ "="+result}}</b>
</div>
</body>
</html>
Output:
10
4. Write an Angular JS application that can calculate factorial and compute square
based on given user input.
<!DOCTYPE html>
<html>
<title>
AJS Square and Factorial Application
</title>
<head>
</script>
<script>
var app=angular.module("mySqFct", []);
app.controller("mySqFctCntrl", function($scope){
$scope.num=0
$scope.result
$scope.factorial=function()
{
if($scope.num==0)
{
$scope.result=1
}
else{
$scope.fact=1
for(var i=$scope.num; i>=1; i--)
{
$scope.fact=$scope.fact*i
}
$scope.result=$scope.fact
}
}
$scope.square=function(){
$scope.result=$scope.num*$scope.num
}
});
</script>
</head>
<body ng-app="mySqFct">
<h1> Angular JS Factorial and Square Application</h1>
<div ng-controller="mySqFctCntrl">
Enter the Number: <input type="number" ng-model="num">
<button ng-click="factorial()">Compute Factorial</button>
<button ng-click="square()">Compute Square</button>
11
<br/>
{{result}}
</div>
</body>
</html>
Output:
12
5. Develop AngularJS application that displays a details of students and their
CGPA. Allow users to read the number of students and display the count.
Note: Student details may be included in the program.
<!DOCTYPE html>
<html>
<title>Student Details Application</title>
<head>
</script>
<script>
var app=angular.module("studDetailsApp",[]);
app.controller("studDetailsAppCntrl",function($scope){
$scope.studData=[]
$scope.generateData=function()
{
$scope.studData=[]
for(var i=1;i<=$scope.num;i++)
{
var stud={
"SLNO":i,
"NAME":'Student-'+i,
"CGPA":(Math.random()*10+1).toFixed(2)
}
$scope.studData.push(stud)
}
}
});
</script>
</head>
<body ng-app="studDetailsApp">
<h1>Student Details Application</h1>
<div ng-controller="studDetailsAppCntrl">
Enter the Number of Students to Generate the Data:
<input type="number" ng-model="num">
<button ng-click="generateData()">Generate</button>
<br/>
<table border="1" ng-show="studData.length>0">
<tr>
<th>SLNO</th>
<th>NAME</th>
<th>CGPA</th>
</tr>
<tr ng-repeat="student in studData">
<td>{{student.SLNO}}</td>
13
<td>{{student.NAME}}</td>
<td>{{student.CGPA}}</td>
</tr>
</table>
<br/>
Number of Students={{studData.length}}
</div>
</body>
</html>
Output:
14
6. Develop an AngularJS program to create a simple to-do list application. Allow
users to add, edit, and delete tasks. Note: The default values for tasks may be
included in the program.
<!DOCTYPE html>
<html>
<title>TO DO Application</title>
<head>
</script>
<script>
var app=angular.module("toDoApp",[]);
app.controller("toDoAppCntrl",function($scope){
$scope.tasks=[
{'TITLE':'Task-1','COMPLETED':true,'EDITING':false},
{'TITLE':'Task-2','COMPLETED':false,'EDITING':false},
{'TITLE':'Task-3','COMPLETED':false,'EDITING':false}
]
$scope.addTask=function(){
if($scope.newTask)
{
var t={
'TITLE':$scope.newTask,
'COMPLETED':false,
'EDITING':false
}
$scope.tasks.push(t)
}
else{
alert("Please enter the task to add")
}
}
$scope.editTask=function(task)
{
task.EDITING=true
}
$scope.turnOffEditing=function(task){
task.EDITING=false
}
$scope.deleteTask=function(task)
{
15
var index=$scope.tasks.indexOf(task)
$scope.tasks.splice(index,1)
}
});
</script>
</head>
<body ng-app="toDoApp">
<h1>TO DO APPLICATION</h1>
<div ng-controller="toDoAppCntrl">
Enter the name of the Task:
<input type="text" ng-model="newTask">
<button ng-click="addTask()">Add Task</button>
<br/>
<br/>
<table border="1">
<tr>
<th>SLNO</th>
<th>Status</th>
<th>Task</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<tr ng-repeat="task in tasks">
<td>
<input type="checkbox" ng-model="task.COMPLETED">
</td>
<td>
<span ng-show="!task.EDITING">{{task.TITLE}}</span>
<input type="text" ng-show="task.EDITING"
ng-model="task.TITLE" ng- blur="turnOffEditing(task)">
</td>
<td>
<button ng-click="editTask(task)">Edit</button>
</td>
<td>
<button ng-click="deleteTask(task)">Delete</button>
</td>
</tr>
</table>
</div>
</body>
</html>
16
Output:
17
7. Write an AngularJS program to create a simple CRUD application (Create,

Read, Update, and Delete) for managing users.
<!DOCTYPE html>
<html>
<title>USER MANAGEMENT APPLICATION</title>
<head>
</script>
<script>
var app=angular.module("userMgmtApp",[]);
app.controller("userMgmtAppCntrl",function($scope){
$scope.users=[
{'name':"Dr. Harish Kumar BT",
'email':'[email protected]','editing':false},
{'name':'ABC','email':'[email protected]','editing':false},
{'name':'XYZ','email':'[email protected]','editing':false}
]
$scope.createUser=function()
{
if($scope.newUserName && $scope.newUserEmail)

{
var u={
'name':$scope.newUserName,
'email':$scope.newUserEmail,
'editing':false
}
$scope.users.push(u)
$scope.newUserName=''
$scope.newUserEmail=''
}
else{
alert("Please provide the user name and email id")
}
$scope.readUser=function(user)
{
user.editing=true
}
18
$scope.updateUser=function(user){
user.editing=false
}
$scope.deleteUser=function(user)
{
var yes=confirm("Are you sure you want to delete")

if(yes==true)
{
var index=$scope.users.indexOf(user)
$scope.users.splice(index,1)
}
}
});
</script>
</head>
<body ng-app="userMgmtApp">
<h1>USER MANAGEMENT APPLICATION</h1>

<div ng-controller="userMgmtAppCntrl">
Enter the User Name:<input type="text" ng-model="newUserName">

Enther the User Email:<input type="text" ng-model="newUserEmail">
<button ng-click="createUser()">Create</button>
<br/>
<br/>
<table border="1">
<tr>
<th>SLNO</th>
<th>NAME</th>
<th>EMAIL</th>
<th>READ</th>
<th>UPDATE</th>
<th>DELETE</th>
</tr>
<tr ng-repeat="user in users">
<td>
<span
ng-how="!user.editing">{{user.name}}</span> &nbsp
<input type="text" ng-show="user.editing" ng-model="user.name">
19
</td>
<td>
<span ng-show="!user.editing">{{user.email}}</span>
<input type="text" ng-show="user.editing" ng-model="user.email">
</td>
<td>
<button ng-click="readUser(user)">Read</button>
</td>
<td>
<button ng-click="updateUser(user)">Update</button>
</td>
<td>
<button ng-click="deleteUser(user)">Delete</button>
</td>
</tr>
</table>
</div>
</body>
</html>
Output:
20
8. Develop AngularJS program to create a login form, with validation for the
username and password fields.
<!DOCTYPE html>
<html>
<title>Angular JS Login Form</title>
<head>
</script>
<script>
var app=angular.module("loginApp",[]);
app.controller('loginAppCntrl',function($scope){
$scope.userName=''
$scope.password=''
$scope.noAttempts=0
$scope.login=function(){
// console.log("Inside login function")
if($scope.userName=="harish" &&
$scope.password=="12345678")
{
alert("Login Successfull")
}
else{
$scope.noAttempts++
if($scope.noAttempts<=3)
{
alert("Incorrect user name/password! Attempt No.
"+$scope.noAttempts)
}
else{
document.getElementById("loginButton").disabled=true
}
}
}
});
</script>
<style>
.error-message{
color:red;
font-size: 20px;
21
}
</style>
</head>
<body ng-app="loginApp" ng-controller="loginAppCntrl">
<h1>Angular JS Login Form</h1>

<form name="loginForm" ng-submit="submitForm()">
Enter the User Name:<input type="text" name="userName"

ng-model="userName" ng-minlength="5" ng-maxlength="8" required placeholder="Enter
User Name">
<span class="error-message"
ng-show="loginForm.userName.$error.required && loginForm.userName.$dirty">User
Name is Required</span>
ng-show="loginForm.userName.$error.minlength">Minimum Length Must be 5</span>
ng-show="loginForm.userName.$error.maxlength">Maximum user name length is limitted
to 8</span>
<br/>
<br/>
Enter the Password: <input type="password" name="password"
ng-model="password" ng-minlength="5" ng-maxlength="8" required placeholder="Enter
your password">
<span class="error-message" ng-show="loginForm.password.$error.required
&& loginForm.password.$dirty">Password is required</span>
ng-show="loginForm.password.$error.minlength">Minimum Password length is 5</span>
ng-show="loginForm.password.$error.maxlength">Maximum password length is limitted
to 8</span>
<br/>
<br/>
<button type="submit" ng-disabled="loginForm.$invalid"
ng-click="login()" id="loginButton">Login</button>
</form>
</body>
</html>
22
Output:
23
9. Create an AngularJS application that displays a list of employees and their

salaries. Allow users to search for employees by name and salary. Note:
Employee details may be included in the program.
<!DOCTYPE html>
<html>
<title>Angular JS Filter Employee Search Application</title>
<head>
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.mi
n.js">
</script>
<script>
var app=angular.module("empSearchApp",[]);
app.controller("empSearchAppCntrl",function($scope){
$scope.empList=[
{'name':'Harish Kumar B T','salary':500000},
{'name':'Chetan','salary':400000},
{'name':'Manju','salary':300000},
{'name':'Prashanth','salary':400000},
{'name':'Thanuja','salary':500000},
{'name':'Manasa','salary':600000}
]
$scope.clearFilters=function()
{
$scope.searchName=''
$scope.searchSalary=''
}
});
</script>
</head>
<body ng-app="empSearchApp">
<h1>Employee Search Application</h1>
<div ng-controller="empSearchAppCntrl">
Search by Employee Name:<input type="text" ng-model="searchName">
Search by Employee salary:<input type="number"
ng-model="searchSalary">
<button ng-click="clearFilters()">Clear Filters</button>

<br/>
<h3>List of Employees</h3>
<table border="1">
24
<tr>
<th>SLNO</th>
<th>EMP NAME</th>
<th>SALARY</th>
</tr>
<tr ng-repeat="emp in empList |
filter:{name:searchName,salary:searchSalary}">
<td>{{emp.name}}</td>
<td>{{emp.salary}}</td>
</tr>
</table>
</div>
</body>
</html>
Output:
25
26
10.Create AngularJS application that allows users to maintain a collection of

items. The application should display the current total number of items, and
this count should automatically update as items are added or removed. Users
should be able to add items to the collection and remove them as needed.
Note: The default values for items may be included in the program.
<!DOCTYPE html>
<html>
<title>Item Management Application</title>
<head>
</script>
<script>
var app=angular.module("itemMgmtApp",[]);
app.controller("itemMgmtAppCntrl",function($scope){
$scope.itemList=['Pen','Pencil','Eraser','Book']
$scope.addItem=function()
{
if($scope.newItem)
{
if($scope.itemList.indexOf($scope.newItem)==-1)
{
$scope.itemList.push($scope.newItem)
}
else{
alert('This item is already there in the item collection')
}
}
else{
alert('Please Enter the item to add')
}
}
$scope.removeItem=function(item)
{
var yes=confirm("Are you sure you want to delete "+item)
if(yes==true)
{
var index=$scope.itemList.indexOf(item)
$scope.itemList.splice(index,1)
}
}
27
});
</script>
</head>
<body ng-app="itemMgmtApp">
<h1>Item Management Application</h1>
<div ng-controller="itemMgmtAppCntrl">
Enter an item to add: <input type="text" ng-model="newItem">
<button ng-click="addItem()">ADD</button>
<br/><br/>
<b>List of Items</b>
<table border="1">
<tr>
<th>SLNO</th>
<th>Item</th>
<th>Remove</th>
</tr>
<tr ng-repeat="item in itemList">
<td>{{item}}</td>
<td><button ng-click=removeItem(item)>Remove</button></td>
</tr>
</table>
<br/>
Total Number of Items=<b>{{itemList.length}}</b>

</div>
</body>
</html>
28
Output:
29
11.Create AngularJS application to convert student details to Uppercase using

angular filters.
Note: The default details of students may be included in the program.
<!DOCTYPE html>
<html>
<title>Student Details in Uppercase</title>
<head>
</script>
<script>
var app=angular.module("studDetailsUpperApp",[]);
app.controller("studDetailsUpperAppCntrl",function($scope){
$scope.studDetails=['harish','kumar','chetan','prashanth','thanuja']
$scope.upper=true
$scope.lower=false
$scope.Lower=function()
{
//console.log('called')
$scope.upper=false
$scope.lower=true
}
$scope.Upper=function()
{
$scope.upper=true
$scope.lower=false
}
});
</script>
</head>
<body ng-app="studDetailsUpperApp">
<h1>Student Details in Uppercase</h1>
<div ng-controller="studDetailsUpperAppCntrl">
<button ng-click="Upper()">Upper</button>
<button ng-click="Lower()">Lower</button>
<table border="1">
<tr>
<th>SLNO</th>
<th>NAME</th>
30
</tr>
<tr ng-repeat="student in studDetails">
<td ng-show="upper">{{student|uppercase}}</td>
<td ng-show="lower">{{student|lowercase}}</td>
</tr>
</table>
</div>
</body>
</html>
Output:
31
12.Create an AngularJS application that displays the date by using date filter
parameters.
<!DOCTYPE html>
<html>
<title>Date Application</title>
<head>
</script>
<script>
var app=angular.module("dateApp",[]);
app.controller("dateAppCntrl",function($scope){
$scope.currentDate=new Date();
});
</script>
</head>
<body ng-app="dateApp">
<h1>Date in different formats</h1>
<div ng-controller="dateAppCntrl">
Current Date and Time: {{currentDate}}<br/>

Short Date: {{currentDate|date: 'short'}}<br/>
Long Date: {{currentDate |date: 'fullDate'}}<br/>
Medium Date:{{currentDate| date: 'medium'}}
</div>
</body>
</html>
32
Output:
33
Sample Programs
1. Example Program on Angular expression

<!DOCTYPE html>
<html>
<title>
This is my first angular progarm
</title>
<head>
src="https:\\ajax.googleapis.com\ajax\libs\angularjs\1.8.2\angular.min.js"
>
</script>
</head>
<body>
<div ng-app="">
{{5+5}}
</div>
</body>
</html>
2. Example on ng-model, ng-bind, ng-init

<!DOCTYPE html>
<html>
<title>Demo example on ng-model</title>
<head>
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js
">
</script>
</head>
<body>
<div ng-app="" ng-init="age=41">
Enter Your Name: <input type="text" ng-model="name"><br/>
Your Name is using angular expression: {{name}} <br/>
Your Name is using ng-bind: <p ng-bind="name"></p><br/>
your age is: <p ng-bind="age"></p>
</div>
</body>
</html>
34
3. Example on ng-click
<!DOCTYPE html>
<html>
<title>
Demo on ng-click directive
</title>
<head>
">
</script>
<script>
$scope.num1=20
$scope.num2=30
$scope.result
$scope.add=function()
{
console.log("Function Called")
$scope.result=$scope.num1 + $scope.num2
// return $scope.result
}
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCntrl">
Click the button to get the result
<button ng-click="add()">Click Here</button><br/>
Result: {{result}}
</div>
</body>
</html>
35
4. Addition program
<!DOCTYPE html>
<html>
<title>
Addition Program
</title>
<head>
">
</script>
<script>
$scope.num1=0
$scope.num2=0
$scope.result=0
$scope.add=function()
{
$scope.result=$scope.num1 + $scope.num2
}
});
</script>
</head>
<h1>Addition Program</h1>
Enter First Number: <input type="number" ng-model="num1"><br/>

Enter Second Number: <input type="number" ng-model="num2"><br/>
<button ng-click="add()">ADD</button><br/>
Sum of {{num1}} and {{num2}} = {{result}}
</div>
</body>
</html>
36
5. Example on rootScope and Controller scope variables

<!DOCTYPE html>
<html>
<title>Demo on root scope variable</title>
<head>
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"
>
</script>
<script>
app.run(function($rootScope){
$rootScope.dept1="CSE"
$rootScope.dept2="ECE"
});
app.controller("myCntrl", function($scope){
$scope.name1="Harish Kumar B T"
});
app.controller("myAnotherCntrl", function($scope){
$scope.name2="Chetan Kumar B T"
});
</script>
</head>
Dept. of {{dept1}} Faculties<br/>
1. {{name1}}
2. {{name2}}
</div>
<div ng-controller="myAnotherCntrl">
Dept. of {{dept2}} Faculties<br/>
1. {{name1}}
2. {{name2}}
</div>
</body>
</html>
37
6. Example on ng-options
<!DOCTYPE html>
<html>
<title> Demo on Using the ng-options to fill the dropdown list from the list
of values</title>
<head>
">
</script>
<script>
$scope.myList=['Apple','Mango','Banana','Orange']
});
</script>
</head>
List of Fruits: <select ng-model="selectFruit" ng-options="fruit for
fruit in myList"></select>
</div>
</body>
</html>
38
7. Example on ng-repeat
<!DOCTYPE html>
<html>
<title>
Demo on using ng-repeat
</title>
<head>
">
</script>
<script>
$scope.myList=['Cow','Lion','Tiger','Deer','Sheep']
});
</script>
</head>
<ul>
<li ng-repeat="animal in myList">{{animal}}</li>
</ul>
</div>
</body>
</html>
39
8. Example on ng-show
<!DOCTYPE html>
<html>
<title>
Demo pgm on using ng-show directive
</title>
<head>
</script>
<script>
$scope.display=true;
});
</script>
</head>
<li ng-show="display">Harish</li>
</div>
</body>
</html>
40
9. Example on random number generation
<!DOCTYPE html>
<html>
<title>Random Number Generation Demo</title>
<head>
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"
>
</script>
<script>
$scope.randomList=[]
$scope.generateRandomNumbers=function(){
$scope.randomList=[]
for(var i=1;i<=$scope.num;i++)
{
$scope.randomList.push((Math.random()*$scope.num+1).toFixed(2
))
}
}
});
</script>
</head>
Enter the Number of random numbers to be generated: <input
type="numbers" ng-model="num">
<button ng-
click="generateRandomNumbers()">Generate</button><br/>
<li ng-repeat="x in randomList">{{x}}</li>
</div>
</body>
</html>
41
10. Example on student List Object
<!DOCTYPE html>
<html>
<title> Demo on List of Student Objects</title>
<head>
</script>
<script>
var app=angular.module("studListApp",[]);
app.controller("studListAppCntrl", function($scope){
$scope.studList=[
{'USN':'1BI20CS001','NAME':'ABC','DEPT':'CSE','SEM':7,'MARKS':78},
{'USN':'1BI20EC002','NAME':'XYZ','DEPT':'ECE','SEM':6,'MARKS':89},
{'USN':'1BI20EE003','NAME':'PQR','DEPT':'EEE','SEM':7,'MARKS':56},
{'USN':'1BI20CS002','NAME':'LMN','DEPT':'CSE','SEM':7,'MARKS':90},
]
});
</script>
</head>
<body ng-app="studListApp">
<h1>Student List</h1>
<div ng-controller="studListAppCntrl">
<table border="1">
<tr>
<th>USN</th>
<th>NAME</th>
<th>DEPT</th>
<th>SEM</th>
<th>MARKS</th>
</tr>
<tr ng-repeat="student in studList">
<td>{{student.USN}}</td>
<td>{{student.NAME}}</td>
<td>{{student.DEPT}}</td>
<td>{{student.SEM}}</td>
<td>{{student.MARKS}}</td>
</tr>
</table>
</div>
</body>
</html>
42
11. Example on ng-blur
<!DOCTYPE html>
<html>
<title>
Demo on ng-blur directive
</title>
<head>
</script>
</head>
<body ng-app="">
Keep focus and keep losing focus from me to get the action done:
<input type="text" ng-model="name" ng-init="count=0"
ng-blur="count=count+1">
<br/>
{{count}}
</body>
</html>
43

Angular JS Lab Manual

Uploaded by

Copyright:

Available Formats

Angular JS Lab Manual

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Angular JS Lab Manual

Uploaded by

Copyright:

Available Formats

21CSL581 ANGULAR JS Laboratory

CMR INSTITUTE OF TECHNOLOGY, BANGALORE

DEPARTMENT OF ARTIFICIAL INTELLIGENCE & DATA SCIENCE

Angular JS Laboratory Manual

2. Develop an Angular JS application that displays a list of shopping items. Allow

3. Develop a simple Angular JS calculator application that can perform basic

Enter First Number: <input type="number" ng-model="num1">

<button ng-click="square()">Compute Square</button>

7. Write an AngularJS program to create a simple CRUD application (Create,

if($scope.newUserName && $scope.newUserEmail)

var yes=confirm("Are you sure you want to delete")

<h1>USER MANAGEMENT APPLICATION</h1>

Enter the User Name:<input type="text" ng-model="newUserName">

<body ng-app="loginApp" ng-controller="loginAppCntrl">

<h1>Angular JS Login Form</h1>

Enter the User Name:<input type="text" name="userName"

9. Create an AngularJS application that displays a list of employees and their

<button ng-click="clearFilters()">Clear Filters</button>

10.Create AngularJS application that allows users to maintain a collection of

Total Number of Items=<b>{{itemList.length}}</b>

11.Create AngularJS application to convert student details to Uppercase using

Current Date and Time: {{currentDate}}<br/>

1. Example Program on Angular expression

2. Example on ng-model, ng-bind, ng-init

Enter First Number: <input type="number" ng-model="num1"><br/>

5. Example on rootScope and Controller scope variables

9. Example on random number generation

10. Example on student List Object

11. Example on ng-blur

You might also like