EXPLORER
...
program1.html
program2.html
program3.html
program4.html
program5.html
program6.html
program7.html
program8.html
program9.html
program10.html
program11.html
program12.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
X
<!DOCTYPE html>
<html>
<head>
<title>Full Name Program</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>Full Name Program</h1>
<input type="text" ng-model="firstName" placeholder="Enter First Name">
<input type="text" ng-model="lastName" placeholder="Enter Last Name">
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Rajender";
$scope.lastName = "Tilak";
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
X
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Shopping List App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>Shopping List App</h1>
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<input type="text" ng-model="newItem" placeholder="Enter New Item">
<button ng-click="addItem()">Add Item</button>
<button ng-click="removeItem(index)">Remove Item</button>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.items = ["Milk", "Bread", "Eggs"];
$scope.addItem = function() {
$scope.items.push($scope.newItem);
$scope.newItem = "";
};
$scope.removeItem = function(index) {
$scope.items.splice(index, 1);
};
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
X
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Calculator App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>Calculator App</h1>
<input type="number" ng-model="num1" placeholder="Enter First Number">
<input type="number" ng-model="num2" placeholder="Enter Second Number">
<select ng-model="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<button ng-click="calculate()">Calculate</button>
<p>Result: {{result}}</p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.num1 = 0;
$scope.num2 = 0;
$scope.operator = "+";
$scope.result = 0;
$scope.calculate = function() {
switch ($scope.operator) {
case "+":
$scope.result = parseFloat($scope.num1) + parseFloat($scope.num2);
break;
case "-":
$scope.result = $scope.num1 - $scope.num2;
break;
case "*":
$scope.result = $scope.num1 * $scope.num2;
break;
case "/":
$scope.result = $scope.num1 / $scope.num2;
break;
}
};
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
X
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Factorial and Square Calculator App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>Factorial and Square Calculator App</h1>
<input type="number" ng-model="number" placeholder="Enter a Number">
<button ng-click="calculateFactorial()">Calculate Factorial</button>
<button ng-click="calculateSquare()">Calculate Square</button>
<p>Factorial: {{factorial}}</p>
<p>Square: {{square}}</p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.number = 0;
$scope.factorial = 0;
$scope.square = 0;
$scope.calculateFactorial = function() {
var factorial = 1;
for (var i = $scope.number; i > 1; i--) {
factorial *= i;
}
$scope.factorial = factorial;
};
$scope.calculateSquare = function() {
$scope.square = $scope.number * $scope.number;
};
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
X
<!DOCTYPE html>
<html>
<head>
<title>Student Details with CGPA</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<h2>Student Details</h2>
<p>Total number of students: {{ students.length }}</p>
<table border="1">
<tbody><tr>
<th>Name</th>
<th>CGPA</th>
</tr>
<tr ng-repeat="student in students">
<td>{{ student.name }}</td>
<td>{{ student.cgpa }}</td>
</tr>
</tbody></table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
// Default student details
$scope.students = [
{ name: 'Akshaya', cgpa: 8.8 },
{ name: 'Krishna Patel', cgpa: 7.2 },
{ name: 'Johnson', cgpa: 6.5 },
{ name: 'Safwan', cgpa: 7.5},
{ name: 'Zeenath', cgpa: 8.5}
];
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
X
<!DOCTYPE html>
<html>
<head>
<title>To-Do List Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<h2>To-Do List</h2>
<ul>
<li ng-repeat="task in tasks">
{{ task.name }}
<button ng-click="editTask(task)">Edit Task</button>
<button ng-click="deleteTask(task)">DeleteTask</button>
</li>
</ul>
<div>
<label>New Task: </label>
<input type="text" ng-model="newTaskName">
<button ng-click="addTask()">Add Task</button>
</div>
<div ng-show="editingTask">
<label>Edit Task: </label>
<input type="text" ng-model="editedTaskName">
<button ng-click="saveTask()">Save</button>
<button ng-click="cancelEdit()">Cancel</button>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
// Default tasks
$scope.tasks = [
{ name: 'Attend Class'},
{ name: 'Complete Assignment'},
{ name: 'Study for CIE'}
];
$scope.newTaskName = ' ';
$scope.editingTask = null;
$scope.editedTaskName = ' ';
$scope.addTask = function () {
if ($scope.newTaskName) {
$scope.tasks.push({ name: $scope.newTaskName });
$scope.newTaskName = ' ';
}
};
$scope.editTask = function (task) {
$scope.editingTask = task;
$scope.editedTaskName = task.name;
};
$scope.saveTask = function () {
if ($scope.editingTask) {
$scope.editingTask.name = $scope.editedTaskName;
$scope.cancelEdit();
}
};
$scope.cancelEdit = function () {
$scope.editingTask = null;
$scope.editedTaskName = '';
};
$scope.deleteTask = function (task) {
var index = $scope.tasks.indexOf(task);
if (index !== -1) {
$scope.tasks.splice(index, 1);
}
};
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
X
<!DOCTYPE html>
<html ng-app="userApp" >
<head>
<title>AngularJS CRUD Application for Users</title>
</head>
<body ng-controller="UserController">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.8.2/a
ngular.min.js"> </script>
<h1>User Management</h1>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
</table>
<hr>
<h2>Create User</h2>
<input type="text" ng-model="newUser.name" placeholder="Name">
<input type="email" ng-model="newUser.email" placeholder="Email">
<button ng-click="createUser()">Create</button>
<hr>
<h2>Edit User</h2>
<input type="text" ng-model="editedUser.name" placeholder="Name">
<input type="email" ng-model="editedUser.email" placeholder="Email">
<button ng-click="updateUser()">Update</button>
<script>
angular.module('userApp', []) .controller('UserController', function($scope) {
$scope.users = [
{ name: 'abcd', email: 'abcd@gmail.com' },
{ name: 'trainee', email: 'trainee@yahoo.com' }
];
$scope.newUser = {};
$scope.createUser = function() {
$scope.users.push($scope.newUser);
$scope.newUser = {};
};
$scope.editUser = function(user) {
$scope.editedUser = user;
};
$scope.updateUser = function() {
$scope.editedUser = {};
};
$scope.deleteUser = function(user) {
$scope.users.splice($scope.users.indexOf(user), 1);
};
})
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
X
<!DOCTYPE html>
<html>
<head>
<title>Login Form with Validation</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-app="myApp" >
<div ng-controller="LoginController">
<h2>Login Form</h2>
<form name="loginForm" novalidate="">
<label>Username:</label>
<input type="text" ng-model="user.username" name="username" required="">
<span ng-show="loginForm.username.$error.required && loginForm.username.$dirty">Username is required.</span>
<br>
<label>Password:</label>
<input type="password" ng-model="user.password" name="password" ng-pattern="/^(?=.[A-Za-z])(?=.\d)[A-Za-z\d]{8,}$/" required="">
<span ng-show="loginForm.password.$error.required && loginForm.password.$dirty">Password is required.</span>
<span ng-show="loginForm.password.$error.pattern && loginForm.password.$dirty">
Password must be alphanumeric and at least 8 characters long.
</span>
<br>
<button ng-click="login()" ng-disabled="loginForm.$invalid">Login</button>
</form>
<div ng-show="isLoggedIn">
<p>Login successful! Welcome, {{ user.username }}!</p>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('LoginController', function ($scope) {
$scope.user = { username: '', password: '' };
$scope.isLoggedIn = false;
$scope.login = function () {
$scope.isLoggedIn = true;
};
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
X
<!DOCTYPE html>
<html ng-app="myApp" >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body>
<div ng-controller="EmployeeController">
<h1>Employee List</h1>
<input type="text" ng-model="searchName" placeholder="Search by name">
<input type="number" ng-model="searchSalary" placeholder="Search by salary">
<button ng-click="searchEmployees()">Search</button>
<ul>
<li ng-repeat="employee in filteredEmployees">{{employee.name}} - {{employee.salary}}</li>
</ul>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('EmployeeController', function($scope) {
$scope.employees = [
{ name: 'John Doe', salary: 50000 },
{ name: 'Jane Doe', salary: 60000 },
{ name: 'Peter Parker', salary: 70000 },
{ name: 'Mary Jane Watson', salary: 80000 }
];
$scope.filteredEmployees = angular.copy($scope.employees);
$scope.searchEmployees = function() {
$scope.filteredEmployees = $scope.employees.filter(function(employee) {
return employee.name.toLowerCase().indexOf($scope.searchName.toLowerCase()) !== -1 &&
employee.salary >= $scope.searchSalary;
});
};
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
X
<!DOCTYPE html>
<html>
<head>
<title>Item Collection Management</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="ItemController">
<h2>Item Collection</h2>
<p>Total number of items: {{ items.length }}</p>
<ul>
<li ng-repeat="item in items">
{{ item.name }}
<button ng-click="removeItem(item)">Remove</button>
</li>
</ul>
<div>
<label>New Item: </label>
<input type="text" ng-model="newItemName">
<button ng-click="addItem()">Add Item</button>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('ItemController', function ($scope) {
$scope.items = [
{ name: 'Apple'},
{ name: 'Banana'},
{ name: 'Orange'}
];
$scope.newItemName = '';
$scope.addItem = function () {
if ($scope.newItemName) {
$scope.items.push({ name: $scope.newItemName });
$scope.newItemName = '';
}
};
$scope.removeItem = function (item) {
var index = $scope.items.indexOf(item);
if (index !== -1) {
$scope.items.splice(index, 1);
}
};
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
X
<!DOCTYPE html>
<html>
<head>
<title>Student Details</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-app="myApp" >
<h1>Student Details</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>CGPA</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in students">
<td>{{student.name | uppercase}}</td>
<td>{{student.cgpa}}</td>
</tr>
</tbody>
</table>
<script>
angular.module('myApp', []).controller('appCtrl', function($scope) {
$scope.students = [
{ name: "John Doe", cgpa: 3.8 },
{ name: "Jane Doe", cgpa: 3.6 },
{ name: "Peter Parker", cgpa: 3.9 },
{ name: "Mary Jane Watson", cgpa: 3.7 }
];
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
X
<!DOCTYPE html>
<html>
<head>
<title>AMJULAR JS DATE UPDATE</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-app="myApp" >
<div ng-controller="myController">
<h2>Date Display</h2>
<label>Date Format:
<select ng-model="selectedFormat" ng-change="updateDate()">
<option value="fullDate">Full Date</option>
<option value="shortDate">Short Date</option>
<option value="mediumTime">Medium Time</option>
<option value="shortTime">short Time</option>
<option value="yyyy-MM-dd HH:mm:ss">Custom Format (yyyy-MM-dd
HH:mm:ss)</option>
</select>
</label>
<p>Selected Date Format: {{ selectedFormat }}</p>
<p>Formatted Date: {{ formattedDate }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function ($scope, $filter) {
$scope.selectedFormat = 'fullDate'; // Default date format
$scope.updateDate = function () {
var currentDate = new Date();
$scope.formattedDate = $filter('date')(currentDate, $scope.selectedFormat);
};
// Initial date update
$scope.updateDate();
});
</script>
</body>
</html>
