Scribd
Upload
62 views

Anjularjs Programs Revisedcirc Syllabus

Uploaded by

Sajeev Kannati
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
62 views

Anjularjs Programs Revisedcirc Syllabus

Uploaded by

Sajeev Kannati
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 27

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 lang="en" ng-app="fullNameApp">
<head>
<meta charset="UTF-8">
<title>Full Name App</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

<div ng-controller="fullNameCtrl">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" ng-model="firstName" placeholder="Enter your
first name">

<label for="lastName">Last Name:</label>


<input type="text" id="lastName" ng-model="lastName" placeholder="Enter your last
name">

<p>Your Full Name: {{ fullName() }}</p>


</div>

<script>
var app = angular.module('fullNameApp', []);

app.controller('fullNameCtrl', function($scope) {
// Set default values
$scope.firstName = 'John';
$scope.lastName = 'Doe';

// Function to concatenate first and last names


$scope.fullName = function() {
return $scope.firstName + ' ' + $scope.lastName;
};
});
</script>

</body>
</html>

In this example:

 We've included AngularJS library from a CDN.


 Created an AngularJS module named 'fullNameApp'.
 Defined a controller named 'fullNameCtrl' that manages the data and functions for the
application.
 Used ng-model to bind input fields to the controller's variables ($scope.firstName and
$scope.lastName).
 Created a function $scope.fullName to concatenate the first and last names.
 The default values for first name and last name are set to 'John' and 'Doe' respectively.

In this example:

 The ng-app directive defines the AngularJS application module named "fullNameApp."
 The ng-controller directive attaches the "fullNameController" controller to the
specified HTML element, in this case, the div element.
 Two input fields allow the user to input their first name and last name, and their values
are bound to the $scope.firstName and $scope.lastName variables using ng-model.
 The ng-click directive triggers the displayFullName function when the "Display Full
Name" button is clicked.
 The ng-if directive is used to conditionally display the full name only if it is defined.

Remember to include the AngularJS library in your project, either by downloading it and
hosting it locally or by using a CDN, as shown in the example.

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 lang="en" ng-app="shoppingApp">
<head>
<meta charset="UTF-8">
<title>Shopping App</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
</head>
<body>
<div ng-controller="ShoppingController as shoppingCtrl">
<h2>Shopping List</h2>

<ul>
<li ng-repeat="item in shoppingCtrl.items">
{{ item.name }} - {{ item.price | currency }}
<button ng-click="shoppingCtrl.removeItem(item)">Remove</button>
</li>
</ul>

<form ng-submit="shoppingCtrl.addItem()">
<label for="itemName">Item Name:</label>
<input type="text" id="itemName" ng-model="shoppingCtrl.newItemName"
required>

<label for="itemPrice">Item Price:</label>


<input type="number" id="itemPrice" ng-model="shoppingCtrl.newItemPrice"
required>

<button type="submit">Add Item</button>


</form>
</div>

<script>
angular.module('shoppingApp', [])
.controller('ShoppingController', function () {
var vm = this;

// Default items
vm.items = [
{ name: 'Item 1', price: 10 },
{ name: 'Item 2', price: 20 },
{ name: 'Item 3', price: 30 }
];

vm.newItemName = '';
vm.newItemPrice = '';

vm.addItem = function () {
if (vm.newItemName && vm.newItemPrice) {
vm.items.push({
name: vm.newItemName,
price: parseFloat(vm.newItemPrice)
});
vm.newItemName = '';
vm.newItemPrice = '';
}
};

vm.removeItem = function (item) {


var index = vm.items.indexOf(item);
if (index !== -1) {
vm.items.splice(index, 1);
}
};
});
</script>

</body>
</html>
3. Develop a simple Angular JS calculator application that can perform basic
mathematical operations (addition, subtraction, multiplication, division) based
on user input.

Create a new HTML file and include the AngularJS library. You can download it or
include it from a CDN.
<!DOCTYPE html>
<html lang="en" ng-app="calculatorApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Calculator</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
/* Add some basic styling if needed */
input {
width: 50px;
margin: 5px;
}
</style>
</head>
<body>
<div ng-controller="CalculatorController">
<!-- Calculator UI goes here -->
<!-- Inside the div with ng-controller="CalculatorController" -->
<input type="text" ng-model="result" readonly>
<br>
<input type="button" value="1" ng-click="appendToExpression('1')">
<input type="button" value="2" ng-click="appendToExpression('2')">
<input type="button" value="3" ng-click="appendToExpression('3')">
<input type="button" value="+" ng-click="appendToExpression('+')">
<br>

<input type="button" value="4" ng-click="appendToExpression('4')">


<input type="button" value="5" ng-click="appendToExpression('5')">
<input type="button" value="6" ng-click="appendToExpression('6')">
<input type="button" value="-" ng-click="appendToExpression('-')">

<br>

<input type="button" value="7" ng-click="appendToExpression('7')">


<input type="button" value="8" ng-click="appendToExpression('8')">
<input type="button" value="9" ng-click="appendToExpression('9')">
<input type="button" value="*" ng-click="appendToExpression('*')">

<br>

<input type="button" value="C" ng-click="clearExpression()">


<input type="button" value="0" ng-click="appendToExpression('0')">
<input type="button" value="/" ng-click="appendToExpression('/')">
<input type="button" value="=" ng-click="evaluateExpression()">
</div>
<script src="app.js"></script>
</body>
</html>
Create the AngularJS module and controller.Create a new JavaScript file (e.g., app.js)
and define the AngularJS module and controller.
// app.js

angular.module('calculatorApp', [])
.controller('CalculatorController', function ($scope) {
// Controller logic goes here
// Inside the CalculatorController
$scope.result = '';
$scope.appendToExpression = function (value) {
$scope.result += value;
};

$scope.clearExpression = function () {
$scope.result = '';
};

$scope.evaluateExpression = function () {
try {
$scope.result = eval($scope.result).toString();
}
catch (e) {
$scope.result = 'Error';
}
};

});

4. Write an Angular JS application that can calculate factorial and compute square
based on given user input.
<!DOCTYPE html>
<html ng-app="calculatorApp">

<head>
<title>AngularJS Calculator</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
</head>

<body ng-controller="calculatorController">
<h1>Factorial and Square Calculator</h1>
<label for="numberInput">Enter a number:</label>
<input type="number" id="numberInput" ng-model="userInput" />
<br />
<button ng-click="calculateFactorial()">Calculate Factorial</button>
<button ng-click="calculateSquare()">Calculate Square</button>
<br />
<p ng-show="result">Result: {{ result }}</p>
<script>
var app = angular.module('calculatorApp', []);
app.controller('calculatorController', function ($scope) {
$scope.calculateFactorial = function () {
var num = $scope.userInput;
$scope.result = factorial(num);
};
$scope.calculateSquare = function () {
var num = $scope.userInput;
$scope.result = square(num);
};

function factorial(n) {
if (n === 0 || n === 1) {
return 1;
} else {
return n * factorial(n - 1);
}
}
function square(n) {
return n * n;
}
});
</script>
</body>
</html>
This example defines an AngularJS application with a controller ( calculatorController)
that has two functions, calculateFactorial and calculateSquare. The HTML template
includes an input field for the user to enter a number and two buttons to trigger the
respective calculations. The results are displayed below the buttons.

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 ng-app="studentApp">

<head>

<title>Student Details</title>

<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

</head>

<body ng-controller="StudentController">

<h2>Student Details</h2>

<label for="numberOfStudents">Number of Students:</label>

<input type="number" ng-model="numberOfStudents" id="numberOfStudents" />

<button ng-click="displayStudentCount()">Display Count</button>

<div ng-show="countDisplayed">

<p>Total Number of Students: {{ studentCount }}</p>


<h3>Student Details:</h3>

<ul ng-repeat="student in students">

<li>

<strong>Name:</strong> {{ student.name }},

<strong>CGPA:</strong> {{ student.cgpa }}

</li>

</ul>

</div>

<script>

angular.module('studentApp', [])

.controller('StudentController', function ($scope) {

$scope.students = [];

$scope.countDisplayed = false;

$scope.displayStudentCount = function () {

$scope.students = generateStudentDetails($scope.numberOfStudents);

$scope.studentCount = $scope.students.length;

$scope.countDisplayed = true;

};

function generateStudentDetails(num) {

var students = [];

for (var i = 1; i <= num; i++) {

students.push({

name: 'Student ' + i,

cgpa: generateRandomCGPA()

});
}

return students;

function generateRandomCGPA() {

return (Math.random() * (4 - 2) + 2).toFixed(2); // Random CGPA between 2 and 4

});

</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 Todo App</title>

<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

<style>

.completed {

text-decoration: line-through;

</style>

</head>

<body>
<div ng-controller="TodoController as todoCtrl">

<h2>Todo List</h2>

<form ng-submit="todoCtrl.addTask()">

<input type="text" ng-model="todoCtrl.newTask" placeholder="Add a new task"


required>

<button type="submit">Add Task</button>

</form>

<ul>

<li ng-repeat="task in todoCtrl.tasks">

<span ng-class="{ 'completed': task.completed }">{{ task.title }}</span>

<button ng-click="todoCtrl.editTask(task)">Edit</button>

<button ng-click="todoCtrl.deleteTask(task)">Delete</button>

</li>

</ul>

</div>

<script>

angular.module('todoApp', [])

.controller('TodoController', function () {

var todoCtrl = this;

todoCtrl.tasks = [

{ title: 'Task 1', completed: false },

{ title: 'Task 2', completed: true },

{ title: 'Task 3', completed: false }

];

todoCtrl.addTask = function () {
if (todoCtrl.newTask) {

todoCtrl.tasks.push({ title: todoCtrl.newTask, completed: false });

todoCtrl.newTask = '';

};

todoCtrl.editTask = function (task) {

var updatedTask = prompt('Edit task:', task.title);

if (updatedTask !== null) {

task.title = updatedTask;

};

todoCtrl.deleteTask = function (task) {

var index = todoCtrl.tasks.indexOf(task);

if (index !== -1) {

todoCtrl.tasks.splice(index, 1);

};

});

</script>

</body>

</html>

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


Update, and Delete) for managing users.
<!DOCTYPE html>

<html lang="en" ng-app="userApp">

<head>

<meta charset="UTF-8">

<title>User Management App</title>

<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

<style>

table {

width: 100%;

border-collapse: collapse;

margin-top: 20px;

th, td {

border: 1px solid #ddd;

padding: 8px;

text-align: left;

th {

background-color: #f2f2f2;

form {

margin-top: 20px;

</style>

</head>

<body ng-controller="UserController">

<h2>User Management</h2>

<form>
<label for="name">Name:</label>

<input type="text" id="name" ng-model="newUser.name" required>

<label for="email">Email:</label>

<input type="email" id="email" ng-model="newUser.email" required>

<button ng-click="addUser()">Add User</button>

</form>

<table>

<tr>

<th>Name</th>

<th>Email</th>

<th>Action</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>

<script>

angular.module('userApp', [])

.controller('UserController', function ($scope) {

$scope.users = [
{ name: 'John Doe', email: 'john@example.com' },

{ name: 'Jane Doe', email: 'jane@example.com' }

];

$scope.newUser = {};

$scope.addUser = function () {

$scope.users.push(angular.copy($scope.newUser));

$scope.newUser = {};

};

$scope.editUser = function (user) {

$scope.newUser = angular.copy(user);

$scope.deleteUser(user);

};

$scope.deleteUser = function (user) {

var index = $scope.users.indexOf(user);

if (index !== -1) {

$scope.users.splice(index, 1);

};

});

</script>

</body>

</html>

8. DevelopAngularJS program to create a login form, with validation for the username
and password fields.
<!DOCTYPE html>

<html ng-app="loginApp">

<head>

<title>Login Form</title>

<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

<style>

.error {

color: red;

</style>

</head>

<body>

<div ng-controller="loginController">

<h2>Login Form</h2>

<form name="loginForm" ng-submit="submitForm()" novalidate>

<label for="username">Username:</label>

<input type="text" id="username" name="username" ng-model="user.username"


required>

<span class="error" ng-show="loginForm.username.$dirty && loginForm.username.


$error.required">Username is required.</span>

<br>

<label for="password">Password:</label>

<input type="password" id="password" name="password" ng-


model="user.password" required>

<span class="error" ng-show="loginForm.password.$dirty && loginForm.password.


$error.required">Password is required.</span>

<br>
<button type="submit" ng-disabled="loginForm.$invalid">Login</button>

</form>

</div>

<script>

var app = angular.module('loginApp', []);

app.controller('loginController', function ($scope) {

$scope.user = {};

$scope.submitForm = function () {

if ($scope.loginForm.$valid) {

// Perform login logic here

alert('Login successful!');

} else {

alert('Please fill in the required fields.');

};

});

</script>

</body>

</html>

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 ng-app="employeeApp">

<head>

<title>Employee Management App</title>

<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>

<body ng-controller="EmployeeController">

<h2>Employee Management</h2>

<label>Search by Name: </label>

<input type="text" ng-model="searchName">

<label>Search by Salary: </label>

<input type="number" ng-model="searchSalary">

<table border="1">

<tr>

<th>Name</th>

<th>Salary</th>

</tr>

<tr ng-repeat="employee in employees | filter: {name: searchName, salary:


searchSalary}">

<td>{{employee.name}}</td>

<td>{{employee.salary | currency}}</td>

</tr>

</table>

<script>

var app = angular.module('employeeApp', []);

app.controller('EmployeeController', function ($scope) {

$scope.employees = [

{ name: 'John Doe', salary: 50000 },


{ name: 'Jane Smith', salary: 60000 },

{ name: 'Bob Johnson', salary: 55000 },

// Add more employees as needed

];

});

</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>Item Collection App</title>

<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

</head>

<body>

<div ng-controller="ItemController">

<h2>Item Collection</h2>

<form ng-submit="addItem()">
<label for="itemName">Item Name:</label>

<input type="text" ng-model="newItemName" required>

<button type="submit">Add Item</button>

</form>

<ul>

<li ng-repeat="item in items">

{{ item.name }}

<button ng-click="removeItem(item)">Remove</button>

</li>

</ul>

<p>Total Items: {{ items.length }}</p>

</div>

<script>

var app = angular.module('itemApp', []);

app.controller('ItemController', function ($scope) {

$scope.items = [

{ name: 'Item 1' },

{ name: 'Item 2' },

{ name: 'Item 3' }

];
$scope.addItem = function () {

$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>

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 ng-app="studentApp">

<head>

<title>Student Details Converter</title>


<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

</head>

<body>

<div ng-controller="StudentController">

<h2>Student Details</h2>

<ul>

<li ng-repeat="student in students">

{{ student.name | uppercase }} - {{ student.grade | uppercase }}

</li>

</ul>

</div>

<script>

angular.module('studentApp', [])

.controller('StudentController', function ($scope) {

$scope.students = [

{ name: 'John Doe', grade: 'A' },

{ name: 'Jane Smith', grade: 'B' },

{ name: 'Bob Johnson', grade: 'C' }

// Add more student details as needed

];

});
</script>

</body>

</html>

We create an AngularJS module called studentApp.

Inside the module, we define a controller called StudentController.

The controller initializes an array of students with their names and grades.

In the HTML, we use the ng-repeat directive to iterate over the students and display their details.

We use the uppercase filter to convert the student names and grades to uppercase.

Please note that you need to include the AngularJS library by adding the <script> tag with the
corresponding URL. Also, make sure that your application is served over HTTP or HTTPS to avoid any
cross-origin issues with loading external scripts.

12. Create an AngularJS application that displays the date by using date filter
arameters Include necessary HTML elementsand CSS for the above Angular
applications.

<!DOCTYPE html>
<html ng-app="dateApp">

<head>
<title>AngularJS Date Display</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}

h1 {
color: #2196F3;
}

.date-container {
margin-top: 20px;
font-size: 24px;
}
</style>
</head>

<body ng-controller="DateController">

<h1>AngularJS Date Display</h1>

<div class="date-container">
<p>{{ currentDate | date: 'fullDate' }}</p>
</div>

<script>
angular.module('dateApp', [])
.controller('DateController', function ($scope, $interval) {
// Function to update the current date every second
function updateDate() {
$scope.currentDate = new Date();
}

// Initial date update


updateDate();

// Update the date every second

$interval(updateDate, 1000);
});
</script>

</body>

</html>

We include the AngularJS library using the <script> tag.


The AngularJS module dateApp is defined, and the DateController is attached to the body
element using ng-controller.
Inside the controller, we use the $interval service to update the current date every second.
The HTML element with the class date-container displays the current date using the date filter
with the format 'fullDate'.
Some basic CSS is included for styling.
Remember to replace the AngularJS CDN link with the latest version if available, and note that
AngularJS is considered a legacy framework. If possible, consider migrating to Angular for newer
projects

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy