Downloaded 45 times
![ANGULAR JS (21CSL581) Dept of ISE, R I T, Hassan. 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> <!-- Display the full name --> <h1>Full Name is: {{ fullName }}</h1> </div> <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:](https://image.slidesharecdn.com/angularjslabmanualfinal-240120070952-1373a143/75/ANGULAR-JS-LAB-MANUAL-final-vtu2021-sch-6-2048.jpg)
![ANGULAR JS (21CSL581) Dept of ISE, R I T, Hassan. 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']; // Function to add a new item $scope.addItem = function () {if ($scope.newItem) { $scope.shoppingItems.push($scope.newItem); $scope.newItem = ''; // Clear the input field after adding } }; // Function to remove an item $scope.removeItem = function (index) { $scope.shoppingItems.splice(index, 1); }; }); </script> </body> </html> Sample Output:](https://image.slidesharecdn.com/angularjslabmanualfinal-240120070952-1373a143/75/ANGULAR-JS-LAB-MANUAL-final-vtu2021-sch-7-2048.jpg)
![ANGULAR JS (21CSL581) Dept of ISE, R I T, Hassan. 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:](https://image.slidesharecdn.com/angularjslabmanualfinal-240120070952-1373a143/75/ANGULAR-JS-LAB-MANUAL-final-vtu2021-sch-8-2048.jpg)
![ANGULAR JS (21CSL581) Dept of ISE, R I T, Hassan. 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> <p ng-show="factorialResult !== undefined">Factorial: {{ factorialResult }}</p> <p ng-show="squareResult !== undefined">Square: {{ squareResult }}</p> <script> var app = angular.module('mathApp', []); app.controller('mathController', function ($scope) { $scope.calculateFactorial = function () {if ($scope.inputNumber >= 0) { $scope.factorialResult = factorial($scope.inputNumber); } else { $scope.factorialResult = 'Cannot calculate factorial for negative numbers'; } }; $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:](https://image.slidesharecdn.com/angularjslabmanualfinal-240120070952-1373a143/75/ANGULAR-JS-LAB-MANUAL-final-vtu2021-sch-9-2048.jpg)
![ANGULAR JS (21CSL581) Dept of ISE, R I T, Hassan. 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> <p>Total Students: {{ students.length }}</p> <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({ } }; }); }); // Clear the input fields $scope.name = ''; $scope.cgpa = ''; name: $scope.name, cgpa: $scope.cgpa </script> </body> </html> Sample Output:](https://image.slidesharecdn.com/angularjslabmanualfinal-240120070952-1373a143/75/ANGULAR-JS-LAB-MANUAL-final-vtu2021-sch-10-2048.jpg)
![ANGULAR JS (21CSL581) Dept of ISE, R I T, Hassan. 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> <!-- Form for adding a new task --> <form ng-submit="addTask()"> Task: <input type="text" ng-model="newTask" required> <button type="submit">Add Task</button> </form> <br> <!-- Table to display task information --> <table> <thead> <tr> <th>Task</th> <th>Action</th> </tr> </thead> <tbody> <tr ng-repeat="task in tasks"> <td>{{ task }}</td> <td> <button ng-click="editTask($index)">Edit</button> <button ng-click="deleteTask($index)">Delete</button> </td> </tr> </tbody> </table> <!-- Edit Task Modal --> <div ng-if="editingTaskIndex !== null"> <h2>Edit Task</h2> Task: <input type="text" ng-model="tasks" required> <br> <button ng-click="saveEdit()">Save</button> <button ng-click="cancelEdit()">Cancel</button> </div> <script> var app = angular.module('todoApp', []); app.controller('todoController', function ($scope) { $scope.tasks = [ 'Task 1',](https://image.slidesharecdn.com/angularjslabmanualfinal-240120070952-1373a143/75/ANGULAR-JS-LAB-MANUAL-final-vtu2021-sch-11-2048.jpg)
![ANGULAR JS (21CSL581) Dept of ISE, R I T, Hassan. 'Task 2', 'Task 3' ]; $scope.newTask = ''; $scope.editingTaskIndex = null; $scope.addTask = function () { $scope.tasks.push($scope.newTask); $scope.newTask = ''; }; $scope.editTask = function (index) { // Prompt for updated task with validation var updatedTask = prompt('Enter updated task:'); // Check if the user pressed cancelif (updatedTask !== null) { // Update the task $scope.tasks.splice(index, 1, updatedTask); } }; $scope.deleteTask = function (index) { $scope.tasks.splice(index, 1); }; }); </script> </body> </html> Sample Output:](https://image.slidesharecdn.com/angularjslabmanualfinal-240120070952-1373a143/75/ANGULAR-JS-LAB-MANUAL-final-vtu2021-sch-12-2048.jpg)
![ANGULAR JS (21CSL581) Dept of ISE, R I T, Hassan. 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> <!-- Form for adding a new user --> <form ng-submit="addUser()"> Name: <input type="text" ng-model="name" required> <br> Age: <input type="number" ng-model="age" required> <br> <button type="submit">Add User</button> </form> <br> <!-- Table to display user information --> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Action</th> </tr> </thead> <tbody> <tr ng-repeat="user in users"> <td>{{ user.name }}</td> <td>{{ user.age }}</td> <td> <button ng-click="editUser(user)">Edit</button> <button ng-click="deleteUser(user)">Delete</button> </td> </tr> </tbody> </table> <script> var app = angular.module('crudApp', []); app.controller('crudController', function ($scope) { $scope.users = [ { name: 'Ram', age: 25 }, { name: 'Sam', age: 30 }, ]; $scope.addUser = function () { $scope.users.push({ name: $scope.name, age: $scope.age });](https://image.slidesharecdn.com/angularjslabmanualfinal-240120070952-1373a143/75/ANGULAR-JS-LAB-MANUAL-final-vtu2021-sch-13-2048.jpg)
![ANGULAR JS (21CSL581) Dept of ISE, R I T, Hassan. 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> <!-- Form for login with validation --> <form ng-submit="login()"> Username <input type="text" ng-model="username" required> <br> Passwor d <input type="password" ng-model="password" required> <br> <button type="submit">Login</button> </form> <script> var app = angular.module('loginApp', []); app.controller('loginController', function ($scope) { $scope.login = function () { // Check if username is "Ram" and password is "123" if ($scope.username == 'Ram' && $scope.password == '123') { alert('Login successful'); // Add further logic for successful login } else { alert('Login failed. Invalid username or password.'); // Add logic for failed login } }; }); </script> </body> </html> Sample Output:](https://image.slidesharecdn.com/angularjslabmanualfinal-240120070952-1373a143/75/ANGULAR-JS-LAB-MANUAL-final-vtu2021-sch-15-2048.jpg)
![ANGULAR JS (21CSL581) Dept of ISE, R I T, Hassan. 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:](https://image.slidesharecdn.com/angularjslabmanualfinal-240120070952-1373a143/75/ANGULAR-JS-LAB-MANUAL-final-vtu2021-sch-16-2048.jpg)
![ANGULAR JS (21CSL581) Dept of ISE, R I T, Hassan. 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> Add New Item: <input type="text" ng-model="newItem" /> <button ng-click="addItem()">Add Item</button> <ul> </ul> <li ng-repeat="item in items track by $index"> {{ item }} <button ng-click="removeItem($index)">Remove</button> </li> <p>Total Items: {{ items.length }}</p> <script> var app = angular.module('itemApp', []); app.controller('itemController', function ($scope) { $scope.items = ['Item 1', 'Item 2', 'Item 3']; // Default items $scope.newItem = ''; $scope.addItem = function () {if ($scope.newItem) { $scope.items.push($scope.newItem); $scope.newItem = ''; // Clear the input field } }; $scope.removeItem = function (index) { $scope.items.splice(index, 1); }; }); </script> </body> </html> Sample Output:](https://image.slidesharecdn.com/angularjslabmanualfinal-240120070952-1373a143/75/ANGULAR-JS-LAB-MANUAL-final-vtu2021-sch-17-2048.jpg)
![ANGULAR JS (21CSL581) Dept of ISE, R I T, Hassan. 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> <!-- Display the original student names --> <h3>Original Names:</h3> <ul> <li ng-repeat="name in names"> {{ name }} </li> </ul> <!-- Display the student names in uppercase using filters --> <h3>Names in Uppercase:</h3> <ul> <li ng-repeat="name in names"> {{ name | uppercase }} </li> </ul> <script> var app = angular.module('studentApp', []); app.controller('studentController', function ($scope) { $scope.names = ['Raj', 'Ram', 'Sam']; }); </script> </body> </html> Sample Output:](https://image.slidesharecdn.com/angularjslabmanualfinal-240120070952-1373a143/75/ANGULAR-JS-LAB-MANUAL-final-vtu2021-sch-18-2048.jpg)
![ANGULAR JS (21CSL581) Dept of ISE, R I T, Hassan. 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:](https://image.slidesharecdn.com/angularjslabmanualfinal-240120070952-1373a143/75/ANGULAR-JS-LAB-MANUAL-final-vtu2021-sch-19-2048.jpg)
ANGULAR JS LAB MANUAL(final) vtu2021 sch
- 1. ANGULAR JS (21CSL581) Deptof ISE, R I T, Hassan. 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,
- 2. ANGULAR JS (21CSL581) Deptof ISE, R I T, Hassan. Forms, Input, Validation, Http, and more. 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. AngularJS Extends HTML AngularJS extends HTML with ng-directives. The ng-app directive defines an AngularJS application. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-bind directive binds application data to the HTML view. 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>
- 3. ANGULAR JS (21CSL581) Deptof ISE, R I T, Hassan. <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 Node.js Angular requires an active LTS or maintenance LTS version of Node.js. For information see the version compatibility guide. For more information on installing Node.js, see nodejs.org. If you are unsure what version of Node.js runs on your system, run node -v in a terminal window. npm package Angular, the Angular CLI, and Angular applications depend on npm packages for many
- 4. ANGULAR JS (21CSL581) Deptof ISE, R I T, Hassan. 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. Install the Angular CLI You can use the Angular CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. To install the Angular CLI, open a terminal window and run the following command: content_copynpm install -g @angular/cli 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: content_copySet-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned Carefully read the message displayed after executing the command and follow the instructions. Make sure you understand the implications of setting an execution policy. Create a workspace and initial application You develop apps in the context of an Angular workspace. To create a new workspace and initial starter app: 1. Run the CLI command ng new and provide the name my-app, as shown here: content_copyng new my-app 2. The ng new command prompts you for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key. 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. Run the application The Angular CLI includes a server, for you to build and serve your app locally. 1. Navigate to the workspace folder, such as my-app. 2. Run the following command: 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.
- 5. ANGULAR JS (21CSL581) Deptof ISE, R I T, Hassan. 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.
- 6. ANGULAR JS (21CSL581) Deptof ISE, R I T, Hassan. 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> <!-- Display the full name --> <h1>Full Name is: {{ fullName }}</h1> </div> <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:
- 7. ANGULAR JS (21CSL581) Deptof ISE, R I T, Hassan. 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']; // Function to add a new item $scope.addItem = function () {if ($scope.newItem) { $scope.shoppingItems.push($scope.newItem); $scope.newItem = ''; // Clear the input field after adding } }; // Function to remove an item $scope.removeItem = function (index) { $scope.shoppingItems.splice(index, 1); }; }); </script> </body> </html> Sample Output:
- 8. ANGULAR JS (21CSL581) Deptof ISE, R I T, Hassan. 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:
- 9. ANGULAR JS (21CSL581) Deptof ISE, R I T, Hassan. 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> <p ng-show="factorialResult !== undefined">Factorial: {{ factorialResult }}</p> <p ng-show="squareResult !== undefined">Square: {{ squareResult }}</p> <script> var app = angular.module('mathApp', []); app.controller('mathController', function ($scope) { $scope.calculateFactorial = function () {if ($scope.inputNumber >= 0) { $scope.factorialResult = factorial($scope.inputNumber); } else { $scope.factorialResult = 'Cannot calculate factorial for negative numbers'; } }; $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:
- 10. ANGULAR JS (21CSL581) Deptof ISE, R I T, Hassan. 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> <p>Total Students: {{ students.length }}</p> <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({ } }; }); }); // Clear the input fields $scope.name = ''; $scope.cgpa = ''; name: $scope.name, cgpa: $scope.cgpa </script> </body> </html> Sample Output:
- 11. ANGULAR JS (21CSL581) Deptof ISE, R I T, Hassan. 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> <!-- Form for adding a new task --> <form ng-submit="addTask()"> Task: <input type="text" ng-model="newTask" required> <button type="submit">Add Task</button> </form> <br> <!-- Table to display task information --> <table> <thead> <tr> <th>Task</th> <th>Action</th> </tr> </thead> <tbody> <tr ng-repeat="task in tasks"> <td>{{ task }}</td> <td> <button ng-click="editTask($index)">Edit</button> <button ng-click="deleteTask($index)">Delete</button> </td> </tr> </tbody> </table> <!-- Edit Task Modal --> <div ng-if="editingTaskIndex !== null"> <h2>Edit Task</h2> Task: <input type="text" ng-model="tasks" required> <br> <button ng-click="saveEdit()">Save</button> <button ng-click="cancelEdit()">Cancel</button> </div> <script> var app = angular.module('todoApp', []); app.controller('todoController', function ($scope) { $scope.tasks = [ 'Task 1',
- 12. ANGULAR JS (21CSL581) Deptof ISE, R I T, Hassan. 'Task 2', 'Task 3' ]; $scope.newTask = ''; $scope.editingTaskIndex = null; $scope.addTask = function () { $scope.tasks.push($scope.newTask); $scope.newTask = ''; }; $scope.editTask = function (index) { // Prompt for updated task with validation var updatedTask = prompt('Enter updated task:'); // Check if the user pressed cancelif (updatedTask !== null) { // Update the task $scope.tasks.splice(index, 1, updatedTask); } }; $scope.deleteTask = function (index) { $scope.tasks.splice(index, 1); }; }); </script> </body> </html> Sample Output:
- 13. ANGULAR JS (21CSL581) Deptof ISE, R I T, Hassan. 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> <!-- Form for adding a new user --> <form ng-submit="addUser()"> Name: <input type="text" ng-model="name" required> <br> Age: <input type="number" ng-model="age" required> <br> <button type="submit">Add User</button> </form> <br> <!-- Table to display user information --> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Action</th> </tr> </thead> <tbody> <tr ng-repeat="user in users"> <td>{{ user.name }}</td> <td>{{ user.age }}</td> <td> <button ng-click="editUser(user)">Edit</button> <button ng-click="deleteUser(user)">Delete</button> </td> </tr> </tbody> </table> <script> var app = angular.module('crudApp', []); app.controller('crudController', function ($scope) { $scope.users = [ { name: 'Ram', age: 25 }, { name: 'Sam', age: 30 }, ]; $scope.addUser = function () { $scope.users.push({ name: $scope.name, age: $scope.age });
- 14. ANGULAR JS (21CSL581) Deptof ISE, R I T, Hassan. $scope.name = ''; $scope.age = ''; }; $scope.editUser = function (user) { var index = $scope.users.indexOf(user); // Prompt for updated values with validation var updatedName = prompt('Enter updated name:', user.name);var updatedAge = prompt('Enter updated age:', user.age); // Check if the user pressed cancel if (!(updatedName == null && updatedAge == null) ){ // Update the user var updatedUser = { name: updatedName, age: parseInt(updatedAge) }; $scope.users.splice(index, 1, updatedUser); } }; $scope.deleteUser = function (user) { var index = $scope.users.indexOf(user); $scope.users.splice(index, 1); }; }); </script> </body> </html> Sample Output:
- 15. ANGULAR JS (21CSL581) Deptof ISE, R I T, Hassan. 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> <!-- Form for login with validation --> <form ng-submit="login()"> Username <input type="text" ng-model="username" required> <br> Passwor d <input type="password" ng-model="password" required> <br> <button type="submit">Login</button> </form> <script> var app = angular.module('loginApp', []); app.controller('loginController', function ($scope) { $scope.login = function () { // Check if username is "Ram" and password is "123" if ($scope.username == 'Ram' && $scope.password == '123') { alert('Login successful'); // Add further logic for successful login } else { alert('Login failed. Invalid username or password.'); // Add logic for failed login } }; }); </script> </body> </html> Sample Output:
- 16. ANGULAR JS (21CSL581) Deptof ISE, R I T, Hassan. 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:
- 17. ANGULAR JS (21CSL581) Deptof ISE, R I T, Hassan. 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> Add New Item: <input type="text" ng-model="newItem" /> <button ng-click="addItem()">Add Item</button> <ul> </ul> <li ng-repeat="item in items track by $index"> {{ item }} <button ng-click="removeItem($index)">Remove</button> </li> <p>Total Items: {{ items.length }}</p> <script> var app = angular.module('itemApp', []); app.controller('itemController', function ($scope) { $scope.items = ['Item 1', 'Item 2', 'Item 3']; // Default items $scope.newItem = ''; $scope.addItem = function () {if ($scope.newItem) { $scope.items.push($scope.newItem); $scope.newItem = ''; // Clear the input field } }; $scope.removeItem = function (index) { $scope.items.splice(index, 1); }; }); </script> </body> </html> Sample Output:
- 18. ANGULAR JS (21CSL581) Deptof ISE, R I T, Hassan. 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> <!-- Display the original student names --> <h3>Original Names:</h3> <ul> <li ng-repeat="name in names"> {{ name }} </li> </ul> <!-- Display the student names in uppercase using filters --> <h3>Names in Uppercase:</h3> <ul> <li ng-repeat="name in names"> {{ name | uppercase }} </li> </ul> <script> var app = angular.module('studentApp', []); app.controller('studentController', function ($scope) { $scope.names = ['Raj', 'Ram', 'Sam']; }); </script> </body> </html> Sample Output:
- 19. ANGULAR JS (21CSL581) Deptof ISE, R I T, Hassan. 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: