Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
23 views3 pages

Programs

The document describes two AngularJS programs. The first program allows a user to input their first and last name, which are then displayed in a full name. The default values are "Rajender" for first name and "Tilak" for last name. The second program displays a shopping list that users can modify by adding or removing items using directives and controllers. The default shopping list contains "Egg", "Bread", and "Milk". Users can add items by entering text and clicking an "Add Item" button, and remove items by clicking a "Remove Item" button next to each list item.

Uploaded by

Manju Bhuvan
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
23 views3 pages

Programs

The document describes two AngularJS programs. The first program allows a user to input their first and last name, which are then displayed in a full name. The default values are "Rajender" for first name and "Tilak" for last name. The second program displays a shopping list that users can modify by adding or removing items using directives and controllers. The default shopping list contains "Egg", "Bread", and "Milk". Users can add items by entering text and clicking an "Add Item" button, and remove items by clicking a "Remove Item" button next to each list item.

Uploaded by

Manju Bhuvan
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/ 3

1.

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.

Description:
Users can input their first and last names into an AngularJS program, which
then displays their entire name. 'Rajender' and 'Tilak' are the default values
assigned to the first and last names. These values are modifiable in the
controller (myCtrl) as needed.

Program:

<!DOCTYPE html>
<html>
<head>
<title>Program1</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1 >Full Name Program</h1 >
<input type="text" ng-model="firstName" placeholder="Enter First Name">
<input type="text" ng-model="lastName" placeholder=" Enter Last Name "
>
<br>
Full Name:{{firstName + "" + lastName}}
</div>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl", function($scope) {
$scope.firstName="Rajender" ;
$scope.lastName="Tilak";
});
</script>
</body>
</html>
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.

Descriptions:
AngularJS application that shows a shopping list and lets users edit the list
by adding and removing items with controllers and directives. The shopping
list is managed by this AngularJS application using a controller called
myctrl. The item list displayed using ng-repeat, and there is an input field
for adding new items. when an item is clicked on the ,,Remove Item,, button
next to each one, it is removed from the list. clicking the [Add item,, button
adds the entered item to the list. The items in the default list are ,,Egg,,,
,,Bread,,, and ,,Milk.,,.

Program:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Shopping List App</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.j
s"></script>
</head>
<body>
<div ng-app ="myApp", ng-controller="myCtrl">
<h1>Shopping List App</h1>
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<input type="text" ng-model="newItem" placeholder="Enter New
Item">
<button ng-click="addItem()">Add Item </button >
<button ng-click="removeItem(index)">Remove Item</button>
</div>
<script>
var app = angular.module("myApp",[] );
app.controller( "myCtrl", function($scope) {
$scope.items =["Milk", "Bread" ,"Egg"];
$scope.addItem=function() {
$scope.items.push($scope.newItem);
$scope.newItem=" ";
};

$scope.removeItem= function(index) {
$scope.items.splice(index,1);
};
});
</script>
</body>
</html>

You might also like