Scribd
Upload
28 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
Available Formats
Download as PDF, TXT or read online on Scribd
28 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
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