Scribd
Upload
6 views

angular JS 1-6

The document contains multiple AngularJS applications, including examples for a full name display, shopping list management, basic calculator operations, student details input, and a todo list. Each application is structured with HTML and JavaScript, utilizing AngularJS features such as controllers, data binding, and event handling. The code snippets demonstrate user input handling, dynamic content rendering, and basic CRUD operations.

Uploaded by

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

angular JS 1-6

The document contains multiple AngularJS applications, including examples for a full name display, shopping list management, basic calculator operations, student details input, and a todo list. Each application is structured with HTML and JavaScript, utilizing AngularJS features such as controllers, data binding, and event handling. The code snippets demonstrate user input handling, dynamic content rendering, and basic CRUD operations.

Uploaded by

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

1.)<html ng-app="nameApp"> - <head> - <title>AngularJS Full Name Example</title> 2.

) <html ng-app="shoppingApp"> - <head> - <title>AngularJS Shopping List</title> -


- <script> - <script -
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script> src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
- </head> - <body> - <div ng-controller="nameCtrl"> - First Name: - <input </head> - <body ng-controller="shoppingCtrl"> - <h2>Shopping List</h2> -
type="text" ng-model="firstName" placeholder="Enter your first name"> - <br> <ul> - <li ng-repeat="item in shoppingItems">{{ item }} &nbsp; - <button ng-
<br> - Last Name: - <input type="text" ng-model="lastName" placeholder="Enter your last click="removeItem($index)">Remove</button> - </li> - </ul> --> - <table> -
name"> - <br> <br> - <button ng-click="displayFullName()">Display Full Name</button> - <tr ng-repeat="item in shoppingItems"> - <td>{{ item }}</td> - <td><button ng-
<h1>Full Name is: {{ fullName }}</h1> - </div> - <script> - click="removeItem($index)">Remove</button></td> - </tr> - </table> - <input
angular.module('nameApp', []) - .controller('nameCtrl', function ($scope) { - type="text" ng-model="newItem" placeholder="Add a new item"> - <button ng-
$scope.firstName = 'Raj'; - $scope.lastName = 'Kumar'; - $scope.displayFullName = function () { click="addItem()">Add Item</button> - <script> - angular.module('shoppingApp', [])
- $scope.fullName = $scope.firstName + ' ' + $scope.lastName; - - .controller('shoppingCtrl', function ($scope) { - $scope.shoppingItems = ['Apples', 'Bananas',
}; - }); - </script> - </body> - </html>. 'Bread', 'Milk']; - $scope.addItem = function () { - if ($scope.newItem) { -
$scope.shoppingItems.push($scope.newItem); - $scope.newItem = ''; - } - }; -
$scope.removeItem = function (index) { - $scope.shoppingItems.splice(index, 1); -
}; - }); - </script> - </body> - </html>.
3). <html ng-app="calculatorApp"> - <head> - <title>AngularJS Calculator</title> - 4.) <html ng-app="mathApp"> - <head> - <title>AngularJS Math Operations</title> -
<script - <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> -
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </script> - </head> - <body ng-controller="mathController"> - <h2>Math Operations</h2> - Enter
- </head> - <body ng-controller="calculatorController"> - <h2>Simple a Number: - <input type="number" ng-
Calculator</h2> - Enter Number 1: - <input type="number" ng-model="num1" />&nbsp; - Select model="inputNumber" /> - <button ng-click="calculateFactorial()">Calculate
Operator: - <select ng-model="operator"> - <option value="+">Add</option> - <option value="- Factorial</button> - <button ng-click="calculateSquare()">Calculate
">Subtract</option> - <option value="*">Multiply</option> - <option value="/">Divide</option> - Square</button> - <p ng-show="factorialResult !== undefined">Factorial: {{ factorialResult }}</p>
</select>&nbsp; - Enter Number 2: - <input type="number" ng-model="num2" /> - - <p ng-show="squareResult !== undefined">Square: {{squareResult }}</p> - <script> - var app =
<button ng-click="calculate()">Calculate</button> - <p ng-show="result !==undefined">Result: {{ angular.module('mathApp', []); -
result }}</p> - <script> - var app = angular.module('calculatorApp', []); - app.controller('mathController', function ($scope) { - $scope.calculateFactorial =function ()
app.controller('calculatorController', function ($scope) { - $scope.calculate = function () { - switch { - if ($scope.inputNumber >= 0) { - $scope.factorialResult =
($scope.operator) { - case '+': - $scope.result = $scope.num1 + $scope.num2; - break; - case '-': - factorial($scope.inputNumber); - } else { - $scope.factorialResult = 'Cannot calculate factorial for
$scope.result = $scope.num1 - $scope.num2; - break; - case '*': - $scope.result = negative numbers'; - } - }; - $scope.calculateSquare = function () { -
$scope.num1 * $scope.num2; - break; - case '/': - if ($scope.num2 !== 0) { - $scope.squareResult = $scope.inputNumber * $scope.inputNumber; -
$scope.result = $scope.num1 / $scope.num2; - } else { - $scope.result = 'Cannot }; - function factorial(n) { - if (n == 0 || n == 1) { - return 1; - } else { - return n * factorial(n - 1); - } - }
divide by zero'; - } - break; - } - }; - }); - </script> - </body> - </html>. - }); - </script> - </body> - </html>.
5.) <html ng-app="studentApp"> - <head> - <title>AngularJS Student Details</title> - 6.)<!DOCTYPE html> - <html ng-app="todoApp"> - <head> - <title>AngularJS TodoList</title> -
<script <script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> -
- </head> - <body ng-controller="studentController"> - <h2>Student Details</h2> - </script> - </head> - <body ng-controller="todoController"> -
Student Name: - <input type="text" ng-model="name" /> - CGPA: - <input <h1>Todo List</h1> - <form ng-submit="addTask()"> - Task: - <input type="text" ng-
type="number" ng-model="cgpa" ng-min="1" ng-max="10"/> - <button ng- model="newTask" required> - <button type="submit">Add Task</button> - </form>
click="addStudent()">Add Student</button> - <p>Total Students: {{ students.length - <br> - <table> - <thead> - <tr> - <th>Task</th> - <th>Action</th> - </tr> - </thead>
}}</p> - <ul> - <li ng-repeat="student in students"> - {{ student.name }} - CGPA: {{ - <tbody> - <tr ng-repeat="task in tasks"> - <td>{{ task }}</td> - <td> - <button ng-
student.cgpa }} - </li> - </ul> - <script> - var app = angular.module('studentApp', []); - click="editTask($index)">Edit</button> - <button ng-
app.controller('studentController', function ($scope) { - $scope.students = []; - click="deleteTask($index)">Delete</button> - </td> - </tr> - </tbody> -
$scope.addStudent = function () { - if ($scope.name && $scope.cgpa) { - </table> - <div ng-if="editingTaskIndex !== null"> - <h2>Edit Task</h2> -Task: - <input type="text"
$scope.students.push({ - name: $scope.name,cgpa: $scope.cgpa - }); - $scope.name =''; - ng-model="tasks[editingTaskIndex]" required> - <br> -<button ng
$scope.cgpa = ''; - } - }; - }); - </script> - </body> - </html>. 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', 'Task 2', 'Task 3']; - $scope.newTask = ''; -
(OPTIONAL VERSION CODES ) $scope.editingTaskIndex = null; - $scope.addTask = function () { -
(No Need to write Only for Execution Purpose) 1) $scope.tasks.push($scope.newTask); - $scope.newTask = ''; - }; - $scope.editTask = function
1.8.0 (index) {- $scope.editingTaskIndex = index; - }; - $scope.saveEdit =
2) 1.8.2 function () { - $scope.editingTaskIndex = null; - }; - $scope.cancelEdit = function () { -
3) 1.7.8 $scope.editingTaskIndex = null; - }; - $scope.deleteTask = function (index) { -
4) 1.6.9 $scope.tasks.splice(index, 1); - }; - }); - </script> - </body> - </html>.

You might also like