1)..........................
<html>
<body ng-app="">
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<table>
<tr>
<td>enter first name: </td>
<td> <input type="text" ng-model="fn">
</input> </td>
</tr>
<tr>
<td>enter last name:</td>
<td>
<input type="text"
ng-model="ln"></input>
</td>
</tr>
<tr>
<td>full name is:</td>
<td>{{fn+'' "+ln}}</td>
</tr>
</table>
</body>
</html>
2).....................
<!DOCTYPE html>
<html ng-app="shoppingApp">
<head>
<title>Shopping List App</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div
ng-controller="shoppingController">
<h2>Shopping list</h2>
<ul>
<li
ng-repeat="item in items">
{{item.name}}-{{item.price | currency}}
<button
ng-click="removeItem(item)">Remove</button>
</li>
<ul>
<form ng-submit="addItem()">
<label for="itemName">Item Name:</label>
<input type="text" id="itemName"
ng-model="newItemName"required>
<label for="itemPrice">Item Price</label>
<input type="number"id="itemPrice"
ng-model="newItemPrice"required>
<button type="submit">add Item</button>
</form>
</div>
<script>
var app=angular.module('shoppingApp',[]);
app.controller('shoppingController',function($scope){
$scope.items=[
{name:'item 1',price:10},
{name:'item 2',price:20},
{name:'item 3',price:30}
];
$scope.addItem=function(){
if($scope.newItemName && $scope.newItemPrice){
$scope.items.push({
name:$scope.newItemName,
price:$scope.newItemPrice
});
$scope.newItemName='';
$scope.newItemPrice='';
}
};
$scope.removeItem=function(item){
var index=$scope.items.indexOf(item);
if(index!==-1){
$scope.items.splice(index,1);
}
};
});
</script>
</body>
</html>
3).................
<html>
<body
ng-app="Simplecalci" ng-controller="Calculator" >
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js>
</script>
<script>
angular.module('Simplecalci',[])
.controller('Calculator',function($scope)
{
$scope.result=function ()
{
if
($scope.op=='+')
{return
$scope.a+$scope.b ;}
if
($scope.op=='-')
{return
$scope.a-$scope.b ;}
if
($scope.op=='*')
{return
$scope.a*$scope.b ;}
if
($scope.op=='/')
{return
$scope.a/$scope.b ;}
};
} );
</script>
<table>
<tr>
<td>enter first number:</td>
<td><input type="number"
ng-model="a"></input></td>
</tr>
<tr>
<td>enter second number:</td>
<td><input type="number"
ng-model="b"></input></td>
</tr>
<tr>
<td>choose the operation : </td>
<td><select ng-model="op">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select> </td>
</tr>
<tr>
<td>the result of the operation :</td>
<td>{{result()}}</td>
</tr>
</table>
</body>
</html>
4)....................
<html>
<title>
this is to compute
factorial and square of a number</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var
fact=angular.module("findfact",[]);
fact.controller("calfact",function($scope)
{
$scope.factorial =function()
{
var
n=$scope.number;
var i,f=1;
for(i=2;i<=n;i++)
{
f=f*i;
}
$scope.res=f;
$scope.sq=n*n;
}
});
</script>
<body ng-app="findfact"
ng-controller="calfact">
<table
border="1">
<tr>
<td>enter a number:"</td>
<td><input type="text"
ng-model="number">
</input></td>
</tr>
<tr>
<td><colspan="2"allign="centre"><input
type="button" ng-click="factorial()"
value="findfactorial"></input></td>
</tr>
<tr>
<td>the factorial of a number=<span
ng-bind="number"></span>
</span>is=</td>
<td>{{res}}</td>
</tr>
<tr>
<td> the square of a number:<span
ng-bind="number">
</span>is=</td>
<td>{{sq}}</td>
</tr>
</table>
</body>
</html>
5).......................
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
angular.module('myApp',[]).controller('myController',function($scope)
{
$scope.myArray=[
{"Student
Name":"Rahul","USN":100,"CGPA":7.9},
{"Student
Name":"Likhith","USN":101,"CGPA":9.8},
{"Student
Name":"Arunachala","USN":102,"CGPA":8.7},
{"Student
Name":"Kruthik","USN":103,"CGPA":8.6},
{"Student
Name":"Rakshith","USN":104,"CGPA":8.0}
];
});
angular.element(document).ready(function()
{
angular.bootstrap(document,['myApp'])
});
</script>
<table
ng-controller="myController"border="1">
<tr>
<th
ng-repeat="(key,val) in myArray[0]">{{key}}</th>
</tr>
<tr
ng-repeat="row in myArray">
<td
ng-repeat="column in row">{{column}}</td>
</tr>
</table>
</html>
6).......................
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp"
ng-controller="myController">
<p>DayName<input type="text"
ng-model="Day"/> </p>
<p>Task to do <input type="text"
ng-model="do"/></p>
<p> <button ng-click="addRow()"> Add
Task </button> </p>
<table border="1">
<tr>
<th>Day
No</th>
<th>Day
Name</th>
<th>Task</th>
</tr>
<tr
ng-repeat="Task in TaskArray">
<td>
<label> {{ $index + 1}} </label></td>
<td>
<label> {{ Task.Day}} </label></td>
<td>
<label> {{Task.do}} </label></td>
<td>
<input type="checkbox" ng-model="Task.Remove"/>
</td>
</tr>
</table>
<div>
<button
ng-click="RemoveRow()">RemoveRow</button>
</div>
<div id="display" style="padding:10px
0;"> {{display}} </div>
</div>
</body>
<script>
var app
=angular.module('myApp',[]);
app.controller('myController',function($scope){
$scope.TaskArray=
[
{'Day':'Monday','do':'Lab'},
{'Day':'Tuesday','do':'Theory'}
];
$scope.addRow=function(){
if($scope.Day!=undefined && $scope.do!=undefined)
{
var Task=[];
Task.Day=$scope.Day;
Task.do=$scope.do;
$scope.TaskArray.push(Task);
$scope.Day=null;
$scope.do=null;
}
};
$scope.RemoveRow=function(){
var
ArrTask=[];
angular.foreach($scope.TaskArray,function(value){
if(!value.Remove){
ArrTask.push(value);
}
});
$scope.TaskArray=ArrTask;
};
});
</script>
</html>
8)...................
<!DOCTYPE html>
<html lang="en"ng-app="loginApp">
<head>
<meta
charset="UTF-8">
<meta
name="viewport"content="width=device-width,initial-sclae=1.0">
<title>login
form</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
body{
font-family:Arial,sans-serif;
display:flex;
align-items:center;
justify-content:center;
height:100vh;
margin:0;
}
form{
width:300px;
padding:20px;
border:1px
solid#ccc;
border-radius:5px;
box-shadow:0 0
10px rgba(0,0,0,0.1);
}
input{
width:100%;
padding:8px;
margin-bottom:10px;
box-sizing:border-box;
}
button{
width:100%;
padding:10px;
background-color:#4CAF50;
color:#fff;
border:none;
border-radius:3px;
cursor:pointer;
}
</style>
</head>
</body>
<div ng-controller="loginController">
<form
ng-submit="login()">
<h2>login
form</h2>
<label
for="username">username:</label>
<input
type="text"id="username"ng-model="user.username"
ng-pattern="/^[a-zA-Z0-9_]*$/"required>
<div
ng-show="loginform.username.$dirty &&
loginform.username.$error.required">
<span
style="color:red;">username is required</span>
</div>
<div
ng-show="loginform.username.$dirty &&
loginform.username.$error.pattern">
<span
style="color:red;">username can only contain letters,numbers and
underscores</span>
</div>
<label
for="password">password:</label>
<input
type="password"id="password"ng-mdoel="user.password"required>
<div
ng-show="loginform.password.$dirty &&
loginform.password.$error.required">
<span
style="color:red;">password is rerquired</span>
</div>
<button
type="submit">login</button>
</form>
</div>
<script>
var app=angular.module('loginApp',[]);
app.controller('loginController',function($scope){
$scope.user={};
$scope.login=function(){
console.log('logging in with:',$scope.user);
};
});
</script>
</body>
</html>
9).................
<html ng-app='myModule'>
<title>todo
supply a title</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var
myApp=angular.module("myModule",[]).controller('myController',function($scope){
var employees=[
{Name:"Kruthik",Gender:"Male",Salary:55500.00,City:"London"},
{Name:"Arunachala",Gender:"Male",Salary:56000.00,City:"Melbourne"},
{Name:"Likith
reddappa",Gender:"Male",Salary:78000.00,City:"Texas"},
{Name:"Janhavi",Gender:"Female",Salary:85000.00,City:"Sydney"},
{Name:"Rakshith",Gender:"Male",Salary:45000.00,City:"Singapore"}
];
$scope.employees=employees;
});
</script>
<body>
<div
ng-controller="myController">
<input
type="text" placeholder="Search name"
ng-model="SearchText.Name"/>
<input
type="text" placeholder="Search city"
ng-model="SearchText.City"/>
<input
type="checkbox" ng-model="exactMatch"/>
Exact
Match<br/><br/>
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr
ng-repeat="employees in employees | filter:SearchText">
<td>{{employees.Name}}</td>
<td>{{employees.Gender}}</td>
<td>{{employees.Salary}}</td>
<td>{{employees.City}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
11)....................
<!DOCTYPE html>
<html ng-app="studentApp">
<head>
<title>
Student Details Converter </title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body>
<div ng-controller="studentController as studentCtrl">
<h2>Student Details</h2>
<table border="1">
<tr>
<th>Name</th>
<th>RollNumber</th>
<th>Class</th>
</tr>
<tr ng-repeat="student in studentCtrl.students">
<td>{{student.Name | uppercase}}</td>
<td>{{student.RollNumber | uppercase}}</td>
<td>{{student.Class | uppercase}}</td>
</tr>
</table>
</div>
<script>
var app=angular.module('studentApp',[]);
app.controller('studentController',function() {
this.students=[{
Name:'John Doe',
RollNumber:'101',
Class:'12TH'
},
{
Name:'Jane Doe',
RollNumber:'102',
Class:'11TH'
},
{
Name:'Bob Smith',
RollNumber:'103',
Class:'10TH'
}
];
});
</script>
</body>
</html>
12).....................
<!DOCTYPE html>
<html ng-app="DateApp">
<head>
<title>
Date display app</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body>
<div ng-controller="DateController as DateCtrl">
<h2>Date Display</h2>
<p>CurrentDate: {{DateCtrl.currentDate |
date:'fullDate'}}</p>
<p>ShortDate: {{DateCtrl.currentDate |
date:'shortDate'}}</p>
<p>CustomFormat: {{DateCtrl.currentDate | date:'MMMM d,yyyy - h:mm
a'}}</p>
</div>
<script>
var app=angular.module('DateApp',[]);
app.controller('DateController',function(){
this.currentDate=new Date();
});
</script>
</body>
</html>
