Angularjslabmanualfinal 240120070952 1373a143
Angularjslabmanualfinal 240120070952 1373a143
List of programs
1. Develop Angular JS program that allows user to input their first name and last name and display their fullname.
Note: The default values for first name and last name may be included in the program.
2. Develop an Angular JS application that displays a list of shopping items. Allow users to add and removeitems
from the list using directives and controllers.Note: The default values of items may be included inthe program.
3. Develop a simple Angular JS calculator application that can perform basic mathematical operations(addition,
subtraction, multiplication, division) based on user input.
4. Write an Angular JS application that can calculate factorial and compute square based on given user input.
5. Develop AngularJS application that displays a details of students and their CGPA. Allow users to read
thenumber of students and display the count. Note: Student details may be included in the program.
6. Develop an AngularJS program to create a simple to-do list application. Allow users to add, edit, and
deletetasks.Note: The default values for tasks may be included in the program.
7. Write an AngularJS program to create a simple CRUD application (Create, Read, Update, and Delete)
formanaging users.
8. DevelopAngularJS program to create a login form, with validation for the username and password fields.
9. Create an AngularJS application that displays a list of employees and their salaries. Allow users to searchfor
employees by name and salary. Note: Employee details may be included in the program.
10. Create Angular JS 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.
11. Create Angular JS application to convert student details to uppercase using angular filters. Note: The default
details of students may be included in the program.
12. Create an AngularJS application that displays the date by using date filter parameters.
Basics of AngularJS
AngularJS extends HTML with new attributes.
AngularJS is perfect for Single Page Applications (SPAs).
AngularJS is easy to learn.
You will learn the basics of AngularJS: directives, expressions, filters, modules, and controllers, events, DOM,
AngularJS History
AngularJS version 1.0 was released in 2012.
Miško Hevery, a Google employee, started to work with AngularJS in 2009.
The idea turned out very well, and the project is now officially supported by Google.
AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.
AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.
Why AngularJS?
HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in
web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is
extraordinarily expressive, readable, and quick to develop.
Alternatives
Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or
by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML
was not designed for dynamic views.
Extensibility
AngularJS is a toolset for building the framework most suited to your application development. It is fully
extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique
development workflow and feature needs. Read on to find out how.
Sample programs
Program-1:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Output: Input something in the input box:
Name:
AngularJS starts automatically when the web page has loaded.
The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.
The ng-model directive binds the value of the input field to the application variable name.
The ng-bind directive binds the content of the <p> element to the application variable name.
Program-2
<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
Program-3
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
ng-app----tells angular js should be active in this page.in this case whole document.
angular.min.js------loads angular js.
ng-model------links the form and the model.
{{yourName}}----- update the your name by entered text.
Program-4
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body></html>
Angular JS Installation
REQUIREMENTS DETAILS
npm package Angular, the Angular CLI, and Angular applications depend on npm packages for many
REQUIREMENTS DETAILS
manager features and functions. To download and install npm packages, you need an npm package
manager. This guide uses the npm client command line interface, which is installed
with Node.js by default. To check that you have the npm client installed, run npm -v in a
terminal window.
On Windows client computers, the execution of PowerShell scripts is disabled by default. To allow the
execution of PowerShell scripts, which is needed for npm global binaries, you must set the following execution
policy:
The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few
minutes.
The CLI creates a new workspace and a simple Welcome app, ready to run.
content_copycd my-app
ng serve –open
The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those
files.
The --open (or just -o) option automatically opens your browser to http://localhost:4200/.
If your installation and setup was successful, you should see a page similar to the following.
Next steps
For a more thorough introduction to the fundamental concepts and terminology of Angular single-page app
architecture and design principles, read the Angular Concepts section.
Work through the Tour of Heroes Tutorial, a complete hands-on exercise that introduces you to the app
development process using the Angular CLI and walks through important subsystems.
To learn more about using the Angular CLI, see the CLI Overview. In addition to creating the initial
workspace and app scaffolding, use the CLI to generate Angular code such as components and services.
The CLI supports the full development cycle, including building, testing, bundling, and deployment.
For more information about the Angular files generated by ng new, see Workspace and Project File
Structure.
1. Develop Angular JS program that allows user to input their first name and last name and
display their fullname. Note: The default values for first name and last name may be included in
the program.
<html ng-app="nameApp">
<head>
<title>AngularJS Full Name Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body>
<div ng-controller="nameCtrl">
<!-- Input fields for first name and last name -->First
Name:
<input type="text" ng-model="firstName" placeholder="Enter your first name">
<br> <br> Last Name:
<input type="text" ng-model="lastName" placeholder="Enter your last name">
<br> <br>
<!-- Button to display the full name -->
<button ng-click="displayFullName()">Display Full Name</button>
<script>
angular.module('nameApp', [])
.controller('nameCtrl', function ($scope) {
// Default values for first name and last name
$scope.firstName = 'Raj';
$scope.lastName = 'Kumar';
// Function to display the full name
$scope.displayFullName = function () {
$scope.fullName = $scope.firstName + ' ' + $scope.lastName;
};
});
</script>
</body>
</html>
Sample Output:
2. Develop an Angular JS application that displays a list of shopping items. Allow users to add and
removeitems from the list using directives and controllers.Note: The default values of items may
be included inthe program.
<html ng-app="shoppingApp">
<head>
<title>AngularJS Shopping List</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-controller="shoppingCtrl">
<h2>Shopping List</h2>
<!-- Display the items in list
<ul>
<li ng-repeat="item in shoppingItems">{{ item }}
<button ng-click="removeItem($index)">Remove</button>
</li>
</ul> -->
<table>
<tr ng-repeat="item in shoppingItems">
<td>{{ item }}</td>
<td><button ng-click="removeItem($index)">Remove</button></td>
</tr>
</table>
<!-- Input field and button to add a new item -->
<input type="text" ng-model="newItem" placeholder="Add a new item">
<button ng-click="addItem()">Add Item</button>
<script>
angular.module('shoppingApp', [])
.controller('shoppingCtrl', function ($scope) {
// Default values for shopping items
$scope.shoppingItems = ['Apples', 'Bananas', 'Bread', 'Milk'];
3. Develop a simple Angular JS calculator application that can perform basic mathematical
operations(addition, subtraction, multiplication, division) based on user input.
<html ng-app="calculatorApp">
<head>
<title>AngularJS Calculator</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="calculatorController">
<h2>Simple Calculator</h2>
Enter Number 1:
<input type="number" ng-model="num1" />
Select Operator:
<select ng-model="operator">
<option value="+">Add</option>
<option value="-">Subtract</option>
<option value="*">Multiply</option>
<option value="/">Divide</option>
</select>
Enter Number 2:
<input type="number" ng-model="num2" />
<button ng-click="calculate()">Calculate</button>
<p ng-show="result !== undefined">Result: {{ result }}</p>
<script>
var app = angular.module('calculatorApp', []);
app.controller('calculatorController', function ($scope) {
$scope.calculate = function () {switch
($scope.operator) {
case '+':
$scope.result = $scope.num1 + $scope.num2;break;
case '-':
$scope.result = $scope.num1 - $scope.num2;
break;
case '*':
$scope.result = $scope.num1 * $scope.num2;break;
case '/':
if ($scope.num2 !== 0) {
$scope.result = $scope.num1 / $scope.num2;
} else {
$scope.result = 'Cannot divide by zero';
}
break;
}
};
});
</script>
</body>
</html>Sample Output:
4. Write an Angular JS application that can calculate factorial and compute square based on given
user input.
<html ng-app="mathApp">
<head>
<title>AngularJS Math Operations</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="mathController">
<h2>Math Operations</h2>
Enter a Number:
<input type="number" ng-model="inputNumber" />
<button ng-click="calculateFactorial()">Calculate Factorial</button>
<button ng-click="calculateSquare()">Calculate Square</button>
$scope.calculateSquare = function () {
$scope.squareResult = $scope.inputNumber * $scope.inputNumber;
};
function factorial(n) { if (n
== 0 || n == 1) {
return 1;
} else {
return n * factorial(n - 1);
}
}
});
</script>
</body>
</html>
Sample Output:
5. Develop AngularJS application that displays a details of students and their CGPA. Allow users
to read thenumber of students and display the count. Note: Student details may be included in the
program.
<html ng-app="studentApp">
<head>
<title>AngularJS Student Details</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="studentController">
<h2>Student Details</h2>
Student Name:
<input type="text" ng-model="name" />
CGPA:
<input type="number" ng-model="cgpa" ng-min="1" ng-max="10"/>
<button ng-click="addStudent()">Add Student</button>
<ul>
<li ng-repeat="student in students">
{{ student.name }} - CGPA: {{ student.cgpa }}
</li>
</ul>
<script>
var app = angular.module('studentApp', []);
app.controller('studentController', function ($scope) {
$scope.students = [];
$scope.addStudent = function () { if
($scope.name && $scope.cgpa) {
$scope.students.push({
name: $scope.name,
cgpa: $scope.cgpa
});
// Clear the input fields
$scope.name = '';
$scope.cgpa = '';
}
};
});
</script>
</body>
</html>
Sample Output:
6. Develop an AngularJS program to create a simple to-do list application. Allow users to add, edit,
and deletetasks.Note: The default values for tasks may be included in the program.
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>AngularJS Todo List</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="todoController">
<h1>Todo List Management</h1>
<script>
var app = angular.module('todoApp', []);
'Task 2',
'Task 3'
];
$scope.newTask = '';
$scope.editingTaskIndex = null;
$scope.addTask = function () {
$scope.tasks.push($scope.newTask);
$scope.newTask = '';
};
</html>
Sample Output:
7. Write an AngularJS program to create a simple CRUD application (Create, Read, Update, and
Delete) formanaging 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 ng-controller="crudController">
<h1>User Management</h1>
<script>
var app = angular.module('crudApp', []);
$scope.addUser = function () {
$scope.users.push({ name: $scope.name, age: $scope.age });
Dept of ISE, R I T, Hassan.
ANGULAR JS (21CSL581)
$scope.name = '';
$scope.age = '';
};
</html>
Sample Output:
8. DevelopAngularJS program to create a login form, with validation for the username and
password fields.
<html ng-app="loginApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<body ng-controller="loginController">
<h1>Login Form</h1>
<script>
var app = angular.module('loginApp', []);
app.controller('loginController', function ($scope) {
$scope.login = function () {
}
};
});
</script>
</body>
</html>
Sample Output:
9. Create an AngularJS application that displays a list of employees and their salaries. Allow users
to searchfor employees by name and salary. Note: Employee details may be included in the program.
<html ng-app="employeeApp">
<head>
<title>AngularJS Employee Search</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="employeeController">
<h2>Employee List</h2>
Search by Name:
<input type="text" ng-model="searchName" />
Search by Salary:
<input type="number" ng-model="searchSalary" />
<ul>
<li ng-repeat="employee in employees | filter: {name: searchName, salary:
searchSalary}">
{{ employee.name }} - Salary: Rs{{ employee.salary }}
</li>
</ul>
<script>
var app = angular.module('employeeApp', []);
app.controller('employeeController', function ($scope) {
$scope.employees = [
{ name: 'Ram', salary: 50000 },
{ name: 'abi', salary: 60000 },
{ name: 'sam', salary: 75000 },
{ name: 'raj', salary: 55000 }
];
$scope.searchName = '';
$scope.searchSalary = '';
});
</script>
</body>
</html>
Sample Output:
10. Create Angular JS 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.
<html ng-app="itemApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<body ng-controller="itemController">
<h2>Item Collection</h2>
<script>
var app = angular.module('itemApp', []);
Sample Output:
11. Create Angular JS application to convert student details to uppercase using angular filters. Note:
The default details of students may be included in the program.
<html ng-app="studentApp">
<title>Student Name Converter</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<body ng-controller="studentController">
<h2>Student Names</h2>
<script>
var app = angular.module('studentApp', []);
Sample Output:
12. Create an AngularJS application that displays the date by using date filter parameters
<!DOCTYPE html>
<html ng-app="dateApp">
<head>
<title>Date Display Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="dateController">
<h2>Date Display</h2>
<!-- Display the current date with various filter parameters -->
<p>Default Format: {{ currentDate | date }}</p>
<p>Custom Format (yyyy-MM-dd): {{ currentDate | date:'yyyy-MM-dd' }}</p>
<p>Short Date: {{ currentDate | date:'shortDate' }}</p>
<p>Full Date: {{ currentDate | date:'fullDate' }}</p>
<script>
var app = angular.module('dateApp', []);
app.controller('dateController', function ($scope) {
$scope.currentDate = new Date();
});
</script>
</body>
</html>
Sample Output: