Scribd
Upload
21 views4 pages

2) p2, p3 AngularJS

The document describes two Angular JS applications: 1) A shopping list application that displays shopping items in a list and allows users to add and remove items using directives and controllers. 2) A basic calculator application that performs mathematical operations like addition, subtraction, multiplication and division based on user input numbers and selected operator. It displays the result.

Uploaded by

ogiridharreddy
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
21 views4 pages

2) p2, p3 AngularJS

The document describes two Angular JS applications: 1) A shopping list application that displays shopping items in a list and allows users to add and remove items using directives and controllers. 2) A basic calculator application that performs mathematical operations like addition, subtraction, multiplication and division based on user input numbers and selected operator. It displays the result.

Uploaded by

ogiridharreddy
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/ 4

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.


<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>
<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) {

$scope.shoppingItems = ['Apples', 'Bananas', 'Bread', 'Milk'];

// Function to add a new item


$scope.addItem = function () {
// Check if the input field is not empty
if ($scope.newItem) {
// Add the new item to the shoppingItems array
$scope.shoppingItems.push($scope.newItem);
// Clear the input field after adding
$scope.newItem = '';
}
};
// Function to remove an item
$scope.removeItem = function (index) {
// Remove one element at the specified index from the shoppingItems
array
$scope.shoppingItems.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.

<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>
// Define an AngularJS module named 'calculatorApp'
var app = angular.module('calculatorApp', []);
// Create a controller named 'calculatorController' within the 'calculatorApp'
module
app.controller('calculatorController', function ($scope) {

// Define a function named 'calculate' on the $scope object


$scope.calculate = function () {

// Use a switch statement based on the selected operator


switch ($scope.operator) {
// If the operator is '+', perform addition
case '+':
$scope.result = $scope.num1 + $scope.num2;
break;

// If the operator is '-', perform subtraction


case '-':
$scope.result = $scope.num1 - $scope.num2;
break;

// If the operator is '*', perform multiplication


case '*':
$scope.result = $scope.num1 * $scope.num2;
break;

// If the operator is '/', perform division


case '/':
// Check if the denominator (num2) is not zero to avoid division by
zero
if ($scope.num2 !== 0) {
$scope.result = $scope.num1 / $scope.num2;
} else {
// If division by zero is attempted, set the result to an error
message
$scope.result = 'Cannot divide by zero';
}
break;
}
};
});
</script>
</body>
</html>
OUTPUT

You might also like