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:
