ANGULAR JS LAB PROGRAMS
1. All those which we have done in lab are similar to VTU SYLL, only 3 program which given below are need
to be studied.
2. According to old manual which we use to practice neglect (1a,1b,2,4), leaving this study below
programs and write in record.
3. Below given 6th and 10 th program (to do list & item collection) are similar programs
3.Develop a simple Angular JS calculator application that can perform basic mathematical operations (addition,
subtraction, multiplication, division) based on user input.( this program is similar 1a from our old
manual )
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.j
s">
</script>
</head>
<body>
<h2> AngularJS Expression Example</h2>
<div ng-app="">
<p> Addition: 6 + 2 = {{6 + 2}} </p> <br />
<p> Subtraction: 6 - 2 = {{6 - 2}} </p><br />
<p> Multiplication: 6 * 2 = {{6 * 2}} </p><br />
<p> Division: 6 / 2 = {{6 / 2}}</p>
</div>
</center>
</body>
</html>
7. Write an AngularJS program to create a simple CRUD application (Create, Read, Update, and Delete) for
managing users.
<!DOCTYPE html>
<html ng-app="crudApp">
<head>
<title>AngularJS CRUD Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="crudCtrl" id="userList">
<h2>Users List</h2>
<form ng-submit="addUser()">
<label for="userName">Name:</label>
<input type="text" id="userName" ng-model="newUser.name" required>
<label for="userEmail">Email:</label>
<input type="email" id="userEmail" ng-model="newUser.email" required>
<button type="submit">Add User</button>
</form>
<table ng-show="users.length > 0">
<tr>
<th>Name</th>
<th>Email</th>
<th>Actions</th>
</tr>
<tr ng-repeat="user in users">
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>
<button ng-click="editUser(user)">Edit</button>
<button ng-click="deleteUser(user)">Delete</button>
</td>
</tr>
</table>
</div>
<script>
var app = angular.module('crudApp', []);
app.controller('crudCtrl', function ($scope) {
$scope.users = [
{ name: 'Shiv Kumar', email: '
[email protected]' },
{ name: 'Iqbal Khan', email: '
[email protected]' }
];
$scope.newUser = {};
$scope.addUser = function () {
if ($scope.newUser.name && $scope.newUser.email) {
$scope.users.push(angular.copy($scope.newUser));
$scope.newUser = {};
}
};
$scope.editUser = function (user) {
var editedName = prompt("Edit user's name:", user.name);
var editedEmail = prompt("Edit user's email:", user.email);
if (editedName !== null && editedEmail !== null) {
user.name = editedName;
user.email = editedEmail;
}
};
$scope.deleteUser = function (user) {
var confirmDelete = confirm("Are you sure you want to delete this user?");
if (confirmDelete) {
var index = $scope.users.indexOf(user);
$scope.users.splice(index, 1);
}
};
});
</script>
</body>
</html>
8. Develop AngularJS program to create a login form, with validation for the username and password
fields.
<!DOCTYPE html>
<html ng-app="loginApp">
<head>
<title>AngularJS Login Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="loginCtrl" id="loginForm">
<h2>Login Form</h2>
<form name="loginForm" ng-submit="login()">
<label for="username">Username:</label>
<input type="text" id="username" ng-model="username" ng-pattern="/^[a-zA-Z_]{4,}$/" required>
<div class="error" ng-show="formSubmitted && loginForm.username.$error.required">Username is required.</div>
<div class="error" ng-show="formSubmitted && loginForm.username.$error.pattern">
Username should contain only alphabets and underscore and be at least 4 characters.
</div>
<label for="password">Password:</label>
<input type="password" id="password" ng-model="password" ng-minlength="6" required>
<div class="error" ng-show="formSubmitted && loginForm.password.$error.required">Password is required.</div>
<div class="error" ng-show="formSubmitted && loginForm.password.$error.minlength">
Password should be at least 6 characters.
</div>
<button type="submit">Login</button>
<div class="error" ng-show="loginFailed">Invalid username or password.</div>
</form>
</div>
<script>
var app = angular.module('loginApp', []);
app.controller('loginCtrl', function ($scope) {
$scope.username = "";
$scope.password = "";
$scope.formSubmitted = false;
$scope.loginFailed = false;
// In a real-world scenario, replace this with actual authentication logic.
var validUsername = "user123";
var validPassword = "pass123";
$scope.login = function () {
$scope.formSubmitted = true;
if ($scope.loginForm.$valid) {
if ($scope.username === validUsername && $scope.password === validPassword) {
// Authentication successful
console.log('Login successful!');
$scope.loginFailed = false;
} else {
// Authentication failed
console.log('Login failed!');
$scope.loginFailed = true;
}
}
};
});
</script>
</body>
</html>
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 ng-app="todoApp">
<head>
<title>AngularJS To-Do List</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="todoCtrl" id="todoList">
<h2>To-Do List</h2>
<form ng-submit="addTask()">
<label for="newTask">New Task:</label>
<input type="text" id="newTask" ng-model="newTask" required>
<button type="submit">Add</button>
</form>
<ul>
<li ng-repeat="task in tasks">
<span>{{ task }}</span>
<span>
<button ng-click="editTask($index)">Edit</button>
<button ng-click="deleteTask($index)">Delete</button>
</span>
</li>
</ul>
</div>
<script>
var app = angular.module('todoApp', []);
app.controller('todoCtrl', function ($scope) {
$scope.tasks = ["Breakfast", "Lunch", "Dinner"];
$scope.newTask = "";
$scope.addTask = function () {
if ($scope.newTask.trim() !== "") {
$scope.tasks.push($scope.newTask);
$scope.newTask = "";
}
};
$scope.editTask = function (index) {
var editedTask = prompt("Edit task:", $scope.tasks[index]);
if (editedTask !== null) {
$scope.tasks[index] = editedTask;
}
};
$scope.deleteTask = function (index) {
var confirmDelete = confirm("Are you sure you want to delete this task?");
if (confirmDelete) {
$scope.tasks.splice(index, 1);
}
};
});
</script>
</body>
</html>
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 ng-app="itemApp">
<head>
<title>AngularJS Item Collection</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="itemCtrl" id="itemCollection">
<h2>Item Collection</h2>
<label for="newItem">New Item:</label>
<input type="text" id="newItem" ng-model="newItem" required>
<button ng-click="addItem()">Add Item</button>
<ul>
<li ng-repeat="item in items">
{{ item }}
<button ng-click="removeItem($index)">Remove</button>
</li>
</ul>
<p>Total Items: {{ items.length }}</p>
</div>
<script>
var app = angular.module('itemApp', []);
app.controller('itemCtrl', function ($scope) {
$scope.items = ["Item 1", "Item 2", "Item 3"];
$scope.newItem = "";
$scope.addItem = function () {
if ($scope.newItem.trim() !== "") {
$scope.items.push($scope.newItem);
$scope.newItem = "";
}
};
$scope.removeItem = function (index) {
$scope.items.splice(index, 1);
};
});
</script>
</body>
</html>
2) <!DOCTYPE html>
<html ng-app="shoppingListApp">
<head>
<title>AngularJS Shopping List App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var app = angular.module('shoppingListApp', []);
app.controller('shoppingListCtrl', function ($scope) {
$scope.shoppingItems = ['Sugar', 'Milk', 'Flour'];
$scope.addItem = function () {
if ($scope.newItem) {
$scope.shoppingItems.push($scope.newItem);
$scope.newItem = '';
}
};
$scope.removeItem = function (index) {
$scope.shoppingItems.splice(index, 1);
};
});
</script>
</head>
<body>
<div ng-controller="shoppingListCtrl" id="shoppingListContainer">
<h2>Shopping List</h2>
<ul>
<li ng-repeat="item in shoppingItems">
<span>{{ item }}</span>
<button ng-click="removeItem($index)">Remove</button>
</li>
</ul>
<div>
<label for="newItem">Add New Item:</label>
<input type="text" id="newItem" ng-model="newItem" placeholder="Enter a new item">
<button ng-click="addItem()">Add Item</button>
</div>
</body>
</html>
