Scribd
Upload
31 views

Angular Js Lab - 2

The document describes an AngularJS program to create a simple login form with validation. It includes a controller to manage the username and password fields, increment login attempts, and check credentials on login. The program displays success/failure alerts and locks login after 3 failed attempts.

Uploaded by

jeevenmr02
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
31 views

Angular Js Lab - 2

The document describes an AngularJS program to create a simple login form with validation. It includes a controller to manage the username and password fields, increment login attempts, and check credentials on login. The program displays success/failure alerts and locks login after 3 failed attempts.

Uploaded by

jeevenmr02
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/ 16

Program 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>
Lab Program to Display First and Last Name
</title>
<head>
<script
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="Rohit"
$scope.lastName="Sharma"
});
</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/> <br/>

<!-- using expression {{ }} -->


Displaying Full Name using Expression : {{firstName +" "+ lastName}}

<!-- using ng-bind directive --> <br>


Displaying Full Name using directive --ng-bind :
<span ng-bind = "firstName"> </span>
<span ng-bind = " lastName"> </span>
</div>
</body></html>
Program 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
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</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">


<br/><br/>

<button ng-click="factorial()">Compute Factorial</button>


<br/><br/>

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


<br/><br/>

Result : {{result}}
</div>
</body>
</html>
Lab 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 type="text/javascript" src="angular.min.js">
</script>

<script>
var app=angular.module("toDoApp",[]);
app.controller("toDoAppCntrl",function($scope){
$scope.tasks=[
{'TITLE':'Studing','COMPLETED':true,'EDITING':false},
{'TITLE':'Cooking','COMPLETED':false,'EDITING':false},
{'TITLE':'Cleaning','COMPLETED':false,'EDITING':false},
{'TITLE':'Screen-Time','COMPLETED':true,'EDITING':false}
]
$scope.addTask=function(){
if($scope.newTask)
{
var newentry={
'TITLE':$scope.newTask,
'COMPLETED':false,
'EDITING':false
}
$scope.tasks.push(newentry)
}
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) {
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> {{$index+1}} </td>

<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>
Lab 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 type="text/javascript" src=" angular.min.js">
</script>
<script>
var app=angular.module("userMgmtApp",[]);
app.controller("userMgmtAppCntrl",function($scope){
$scope.users=[
{'name':"Bindu Rao", 'email':'[email protected]','editing':false},
{'name':'Aman','email':'[email protected]','editing':false},
{'name':'Gupta','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
}

$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">
Enter 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 & EDIT </th>
<th>UPDATE</th>
<th>DELETE</th>
</tr>

<tr ng-repeat="user in users">


<td>{{$index+1}}</td>

<td> <span ng-how="!user.editing">{{user.name}}</span>&nbsp;&nbsp;&nbsp;&nbsp


<input type="text" ng-show="user.editing" ng-model="user.name">
</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 & Edit </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>
Lab 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 type="text/javascript" src="angular.min.js">
</script>

<script>
var app=angular.module("loginApp",[]);
app.controller('loginAppCntrl',function($scope){
$scope.userName=''
$scope.password=''
$scope.noAttempts=0

$scope.login=function(){
if($scope.userName=="Myname" && $scope.password=="Password")
{
alert("Login Successfull")
document.write("Welcome!!!!")
}
else{
$scope.noAttempts++
if($scope.noAttempts<=3)
{
alert("Incorrect user name/password! Attempt
No. "+$scope.noAttempts)
}
else{
alert("Incorrect User and Password . Login
Locked")
document.getElementById("loginButton").
disabled=true
}
}
}

});
</script>
<style>
.error-message{color:red; font-size: 20px;}
</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">
User Name is Required </span>

<span class="error-message"
ng-show="loginForm.userName.$error.minlength">
Minimum Length Must be 5 </span>

<span class="error-message"
ng-show="loginForm.userName.$error.maxlength">
Maximum user name length is limited 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>

<span class="error-message"
ng-show="loginForm.password.$error.minlength">
Minimum Password length is 5 </span>

<span class="error-message"
ng-show="loginForm.password.$error.maxlength">
Maximum password length is limited to 8</span>

<br/> <br/>
<button type="submit" ng-disabled="loginForm.$invalid"
ng-click="login()" id="loginButton">Login</button>

</form>
</body>
</html>
<!DOCTYPE html>
<html>
<title>
Shopping Items Application
</title>

<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></s
cript>
<script>
var app = angular.module("itemApp", []);
app.controller("itemCntrl", function ($scope) {
$scope.itemList = ['Bag', 'Perfume', 'Mobile', 'Watch']
$scope.addItem = function () {
$scope.itemList.push($scope.newItem);
$scope.newItem = '';
};
$scope.removeItem = function (index) {
$scope.itemList.splice(index, 1);
};
});
</script>
</head>

<body ng-app="itemApp">
<div ng-controller="itemCntrl">
<h1>Items Application</h1>
<h4>List of Items</h4>
<p>Total Items:{{itemList.length}}</p>
<ul>
<li ng-repeat="item in itemList">
{{item}}
<button ng-click="removeItem($index)">Remove</button>
</li>
</ul>
<form ng-submit="addItem()">
<input type="text" ng-model="newItem" placeholder="Add new item"
required>
<button type="submit">Add</button>
</form>
</div>
</body>

</html>
Lab 12. Create an AngularJS application that displays the date by
using date filter parameters.

<!DOCTYPE html>
<html>
<title>Date Application using date filter</title>
<head>
<script type="text/javascript" src="angular.min.js">
</script>

<script>
var app=angular.module("dateApp",[]);
app.controller("dateAppCntrl",function($scope){
$scope.currentDate = new Date();
});
</script>

</head>
<body ng-app="dateApp">
<h1 style="text-align:center;">Date in different formats</h1> <br/>
<div ng-controller="dateAppCntrl">

<h2 style="color:blue;"> Current Date and Time:


{{ currentDate }} </h2> <br/>

<h2 style="color:red;"> Short Date:


{{ currentDate| date: 'short' }} </h2> <br/>

<h2 style="color: green;"> Short Date:


{{ currentDate| date: 'M/d/yy h:mm a' }} </h2> <br/>
<h3 style="color:brown;"> Long Date:
{{ currentDate | date: 'fullDate' }} </h3> <br/>

<h3 style="color:darkblue;"> Medium Date:


{{ currentDate| date: 'medium' }} </h3>

<!--short/medium/fulldate/shortDate/mediumDate/
longDate/shortTime/mediumTime-->
</div>
</body>
</html>

You might also like