Scribd
Upload
18 views

Lab Programs

Uploaded by

srinu709
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views

Lab Programs

Uploaded by

srinu709
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Ex1: Simple Application

<html>

<head>

<title>AngularJS First Application</title>

</head>

<body>

<h1>Sample Application</h1>

<div ng-app = "">

<p>Enter your Name: <input type = "text" ng-model = "name"></p>

<p>Hello <span ng-bind = "name"></span>!</p>

</div>

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">

</script>

</body>

</html>
Ex2: Simple Input and Output using expression

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body bgcolor="blue">

<div ng-app="">

<p>My Simple ANGULAR JS Program</p>

<pre>

<p>Product Name: <input type="text" ng-model="name"></p>

<p>Product ID: <input type="number" ng-model="pid"></p>

<p>Quantity: <input type="number" ng-model="qt"></p>

<p>Price: <input type="number" ng-model="price"></p>

<p>Prodcut Details:</p>

Product Name : {{name}}

Product ID : {{pid}}

<p>Billing Amount: {{ qt*price }}</p>

</pre>

</div>

</body>

</html>

Output:
Ex3: Looping with Objects
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_repeat_object

Program:

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

<div ng-app="" ng-init="L=[

{name:'Ramesh',country:'India'},

{name:'Jani',country:'Norway'},

{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'},

{name:'Xingzong',country:'China'}]">

<p>Looping with objects:</p>

<ul>

<li ng-repeat="x in L">

{{ x.name + ', ' + x.country }}

</li>

</ul>

</div>

</body>

</html>

Output:

Looping with objects:

 Ramesh, India
 Jani, Norway
 Hege, Sweden
 Kai, Denmark
 Xingzong, China

Ex3: Remove an Item from Shopping Cart


<html>

<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>

<body>

<p>Click the little x to remove an item from the shopping list.</p>


<script>

var app = angular.module("myShoppingList", []);

app.controller("myCtrl", function($scope) {

$scope.products = ["Milk", "Bread", "Cheese"];

$scope.addItem = function () {

$scope.products.push($scope.addMe);

$scope.removeItem = function (x) {

$scope.products.splice(x, 1);

});

</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">

<ul>

<li ng-repeat="x in products">{{x}}<span ng-


click="removeItem($index)">×</span></li>

</ul>

<input ng-model="addMe">

<button ng-click="addItem()">Add</button>

</div>

</body>

</html>
Output:

Ex4: Add Item to Shopping Cart


<!DOCTYPE html>

<html>

<head> Shopping Cart</head>

<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>

<body>

<script>

var app = angular.module("myShoppingList", []);

app.controller("myCtrl", function($scope) {

$scope.products = ["Milk", "Bread", "Cheese"];

$scope.addItem = function () {

$scope.products.push($scope.addMe);
}

});

</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">

<ul>

<li ng-repeat="x in products">{{x}}</li>

</ul>

<input ng-model="addMe">

<button ng-click="addItem()">Add</button>

</div>

<p>Write in the input field to add items.</p>

</body>

</html>
Ex5: Angular JS program to find Eligibility of Vote

<!DOCTYPE html>

<html>

<title>

AngularJs Data-binding

</title>

<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></
script>

<script type="text/javascript">

var app = angular.module('myApp', []);

app.controller('personCtrl', function($scope) {

$scope.firstName = "";

$scope.lastName = "";

$scope.age=0;

$scope.agecal=function(){

if ($scope.age == 0)

return "";

else if ($scope.age< 18)

return "you are not eligible to Vote";

else

return "you are eligible to Vote ";

};
$scope.fullName = function() {

return $scope.firstName + " " + $scope.lastName+", "+$scope.agecal();

};

});

</script>

<body ng-app="myApp">

<center><h2>AngularJs Program to find the eligibility to Vote</h2>


</center><br><br>

<div ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br><br>

Last Name: <input type="text" ng-model="lastName"><br><br>

age :<input type="text" ng-model="age"><br><br>

Message : Hello {{fullName()}} <br>

</div>

</body>

</html>

Output:

You might also like