Q1. Show current date and Time
<!DOCTYPE html>
<html ng-app="timeApp">
<head>
<title>Date and Time</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"
></script>
</head>
<body ng-controller="Time">
<p>Date : {{ currentDate }}</p>
<p>Time : {{ currentTime }}</p>
<script>
var app = angular.module("timeApp", []);
app.controller("Time", function ($scope, $interval) {
function updateTime() {
var now = new Date();
$scope.currentDate = now.toLocaleDateString();
$scope.currentTime = now.toLocaleTimeString();
}
updateTime();
$interval(updateTime, 1000);
});
</script>
</body>
</html>Q2. Show a Greet message to User
<!DOCTYPE html>
<html ng-app="greetApp">
<head>
<title>Greet User</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-controller="GreetCtrl">
<input type="text" ng-model="name" placeholder="Enter your name">
<br><br>
<button ng-click="greet()">Greet Me</button>
<p>{{ message }}</p>
<script>
var app = angular.module("greetApp", []);
app.controller("GreetCtrl", function($scope, $timeout) {
$scope.greet = function() {
$scope.message = "Please wait...";
$timeout(function () {
$scope.message = "Hello, " + $scope.name + "!";
}, 2000); // 2 seconds delay
};
});
</script>
</body>
</html>Q3. Check Usernam and password
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Username Validation</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<h3>Login Form</h3>
Username :
<input type="text" ng-model="username"><br><br>
Password :
<input type="password" ng-model="password"><br><br>
<button ng-click="check()">Validate</button>
<p>{{ result }}</p>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.check = function () {
if (!$scope.username || $scope.username.length === 0) {
alert("Enter username");
}
else if ($scope.username.length < 3) {
alert("Username is too short");
}
else if (!$scope.password || $scope.password.length < 8) {
alert("Password should be minimum 8 characters");
}
else {
$scope.result = "Valid username";
}
};
});
</script>
</body>Set B
Q1.Suggestions fetching through search
<!DOCTYPE html>
<html ng-app="suggestApp">
<head>
<title>Suggestions App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="suggestCtrl">
<h3>Type something</h3>
<input type="text" ng-model="searchText" placeholder="Start typing...">
<ul>
<li ng-repeat="item in suggestions | filter:searchText">
{{ item }}
</li>
</ul>
<script>
var app = angular.module("suggestApp", []);
app.controller("suggestCtrl", function ($scope) {
$scope.suggestions = [
"apple",
"banana",
"mango",
"orange",
"grapes",
"pineapple",
"watermelon",
"papaya"
];
});
</script>
</body>
</html>Q2. Show location of the web page
<!DOCTYPE html>
<html ng-app="locApp">
<head>
<title>Current Page Location</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="locCtrl">
<h3>Current Web Page Location</h3>
<p>{{ fullUrl }}</p>
<script>
var app = angular.module("locApp", []);
app.controller("locCtrl", function ($scope, $location) {
$scope.fullUrl = $location.absUrl();
});
</script>
</body>
</html>Assignment-2
Q1.Show addition of two number through directives
<!DOCTYPE html>
<html ng-app="">
<head>
<title>Add Two Numbers</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-init="a=0; b=0; result=0; show=false">
Number 1 :
<input type="number" ng-model="a"><br><br>
Number 2 :
<input type="number" ng-model="b"><br><br>
<button
ng-click="result = a + b; show = true"
ng-disabled="!a && !b">
Add
</button>
<br><br>
<p ng-show="show">
Result : <span ng-bind="result"></span>
</p>
</body>
</html>Q2.Show array of games on button click
<!DOCTYPE html>
<html ng-app="">
<head>
<title>List of Games</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-init="games=['Cricket','Football','Hockey','Tennis']; show=false">
<button ng-click="show=true">Show Games</button>
<ul ng-show="show">
<li ng-repeat="g in games">
<span ng-bind="g"></span>
</li>
</ul>
</body>
</html>Q3. Change Background of an element using directives
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body>
<p my-dir>Click me</p>
<script>
var app = angular.module("app",[]);
app.directive("myDir", function(){
return function(scope, element){
element.on("click", function(){
element.css("background","yellow");
});
};
});
</script>
</body>
</html>Set B
Q1.Make a alert when a button is clicked
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-controller="myCtrl">
<button ng-click="showAlert()">Click Me</button>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){
$scope.showAlert = function(){
alert("Button clicked!");
};
});
</script>
</body>
</html>Q2.Write the code to display name,rollno,percentage using ng-init directive
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-init="
name='Saad';
roll=101;
m1=80; m2=70; m3=75; m4=85; m5=90;
total = m1+m2+m3+m4+m5;
percent = (total/500)*100
">
<h3>Student Details</h3>
<p>Name : {{name}}</p>
<p>Roll No : {{roll}}</p>
<p>Percentage : {{percent | number:2}} %</p>
</body>
</html>Q3. Write the code to display product details
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-init="
product='Laptop';
qty=2;
rate=45000;
total=qty*rate
">
<h3>Product Details</h3>
<p>Product Name : {{product}}</p>
<p>Quantity : {{qty}}</p>
<p>Rate : {{rate}}</p>
<p>Total Price : {{total}}</p>
</body>
</html>Q3. Write the code to display product details
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"><
</head>
<body ng-init="
products=[
{name:'Laptop', qty:2, rate:45000},
{name:'Mouse', qty:3, rate:500},
{name:'Keyboard', qty:1, rate:1200}
]
">
<table border="1" cellpadding="5">
<tr>
<th>Product Name</th>
<th>Quantity</th>
<th>Rate</th>
<th>Total Price</th>
</tr>
<tr ng-repeat="p in products">
<td>{{p.name}}</td>
<td>{{p.qty}}</td>
<td>{{p.rate}}</td>
<td>{{p.qty * p.rate}}</td>
</tr>
</table>
</body>
</html>





Assignment-3
Q1. Write the code to display product details available in departmental stores
<!DOCTYPE html>
<html ng-app="storeApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body ng-controller="storeCtrl">
<h3>Product Details</h3>
<p>Sr No : {{product.srNo}}</p>
<p>Name : {{product.name}}</p>
<p>Price : {{product.price}}</p>
<p>Quantity : {{product.qty}}</p>
<script>
var app = angular.module("storeApp", []);
app.controller("storeCtrl", function($scope){
$scope.product = {
srNo: 1,
name: "Soap",
price: 40,
qty: 50
};
});
</script>
</body>
</html>Q2. Create Simple AngularJS Script to Print Student Marks
card with grade using controller.
<!DOCTYPE html>
<html ng-app="studApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="studCtrl">
<h3>Student Marks Card</h3>
<p>Name : {{name}}</p>
<p>Roll No : {{roll}}</p>
<p>Maths : {{m1}}</p>
<p>Science : {{m2}}</p>
<p>English : {{m3}}</p>
<p>Total : {{total}}</p>
<p>Percentage : {{percent}} %</p>
<p>Grade : {{grade}}</p>
<script>
var app = angular.module("studApp", []);
app.controller("studCtrl", function($scope){
$scope.name = "Saad";
$scope.roll = 10;
$scope.m1 = 75;
$scope.m2 = 80;
$scope.m3 = 70;
$scope.total = $scope.m1 + $scope.m2 + $scope.m3;
$scope.percent = ($scope.total / 300) * 100;
if($scope.percent >= 75)
$scope.grade = "A";
else if($scope.percent >= 60)
$scope.grade = "B";
else
$scope.grade = "C";
});
</script>
</body>
</html>Set-B
1) Using Angular JS Create a SPA for Bus Ticket Reservation consisting of fields :
Name, Address,contact no, source station(Dropdown list), Destination
station(Dropdown list),Date of booking, date of journey, name of passenger,
gender of passenger etc. Display the e –Ticket.
<!DOCTYPE html>
<html ng-app="busApp">
<head>
<title>Bus Ticket Reservation</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="busCtrl">
<h3>Bus Ticket Reservation</h3>
Name :
<input type="text" ng-model="ticket.name"><br><br>
Address :
<input type="text" ng-model="ticket.address"><br><br>
Contact No :
<input type="text" ng-model="ticket.contact"><br><br>
Source Station :
<select ng-model="ticket.source">
<option>Pune</option>
<option>Mumbai</option>
<option>Nashik</option>
<option>Nagpur</option>
</select><br><br>
Destination Station :
<select ng-model="ticket.destination">
<option>Pune</option>
<option>Mumbai</option>
<option>Nashik</option>
<option>Nagpur</option>
</select><br><br>
Date of Booking :
<input type="date" ng-model="ticket.bookingDate"><br><br>
Date of Journey :
<input type="date" ng-model="ticket.journeyDate"><br><br>
Passenger Name :
<input type="text" ng-model="ticket.passenger"><br><br>
Gender :
<input type="radio" ng-model="ticket.gender" value="Male"> Male
<input type="radio" ng-model="ticket.gender" value="Female"> Female
<br><br>
<button ng-click="show=true">Book Ticket</button>
<hr>
<div ng-show="show">
<h3>e-Ticket</h3>
<p>Name : {{ticket.name}}</p>
<p>Address : {{ticket.address}}</p>
<p>Contact No : {{ticket.contact}}</p>
<p>From : {{ticket.source}}</p>
<p>To : {{ticket.destination}}</p>
<p>Date of Booking : {{ticket.bookingDate}}</p>
<p>Date of Journey : {{ticket.journeyDate}}</p>
<p>Passenger Name : {{ticket.passenger}}</p>
<p>Gender : {{ticket.gender}}</p>
</div>
<script>
var app = angular.module("busApp", []);
app.controller("busCtrl", function($scope){
$scope.ticket = {};
$scope.show = false;
});
</script>
</body>
</html>Q2) Using Angular JS Create a SPA to take the information of a customer for
booking Ticket consisting of fields such as name, address, contact no., gender,
Date of booking, date of journey, name of passengers etc. Display the e –Ticket.
<!DOCTYPE html>
<html ng-app="ticketApp">
<head>
<title>Customer Ticket Booking</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="ticketCtrl">
<h3>Ticket Booking Form</h3>
Name :
<input type="text" ng-model="t.name"><br><br>
Address :
<input type="text" ng-model="t.address"><br><br>
Contact No :
<input type="text" ng-model="t.contact"><br><br>
Gender :
<input type="radio" ng-model="t.gender" value="Male"> Male
<input type="radio" ng-model="t.gender" value="Female"> Female
<br><br>
Date of Booking :
<input type="date" ng-model="t.booking"><br><br>
Date of Journey :
<input type="date" ng-model="t.journey"><br><br>
Passenger Name :
<input type="text" ng-model="t.passenger"><br><br>
<button ng-click="show=true">Book Ticket</button>
<hr>
<div ng-show="show">
<h3>e-Ticket</h3>
<p>Name : {{t.name}}</p>
<p>Address : {{t.address}}</p>
<p>Contact No : {{t.contact}}</p>
<p>Gender : {{t.gender}}</p>
<p>Date of Booking : {{t.booking}}</p>
<p>Date of Journey : {{t.journey}}</p>
<p>Passenger Name : {{t.passenger}}</p>
</div>
<script>
var app = angular.module("ticketApp", []);
app.controller("ticketCtrl", function($scope){
$scope.t = {};
$scope.show = false;
});
</script>
</body>
</html>Assignment-4
1. Store 10 students information in an array and display students information in
table form orderBy Name ( use ordeBy filter sorts an array).
<!DOCTYPE html>
<html ng-app="studApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="studCtrl">
<h3>Students List (Order By Name)</h3>
<table border="1" cellpadding="5">
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat="s in students | orderBy:'name'">
<td>{{s.roll}}</td>
<td>{{s.name}}</td>
<td>{{s.marks}}</td>
</tr>
</table>
<script>
var app = angular.module("studApp", []);
app.controller("studCtrl", function($scope){
$scope.students = [
{roll:1, name:"Ravi", marks:75},
{roll:2, name:"Amit", marks:68},
{roll:3, name:"Neha", marks:82},
{roll:4, name:"Pooja", marks:70},
{roll:5, name:"Kiran", marks:65},
{roll:6, name:"Sonal", marks:78},
{roll:7, name:"Rahul", marks:72},
{roll:8, name:"Anita", marks:80},
{roll:9, name:"Vikas", marks:60},
{roll:10, name:"Meena", marks:74}
];
});
</script>
</body>
</html>2. Using angular js display the student details who are live in pune in Table format
(using ng-repeat directive, use Array to store data, use filter).
<!DOCTYPE html>
<html ng-app="studApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="studCtrl">
<h3>Students Living in Pune</h3>
<table border="1" cellpadding="5">
<tr>
<th>Roll No</th>
<th>Name</th>
<th>City</th>
</tr>
<tr ng-repeat="s in students | filter:{city:'Pune'}">
<td>{{s.roll}}</td>
<td>{{s.name}}</td>
<td>{{s.city}}</td>
</tr>
</table>
<script>
var app = angular.module("studApp", []);
app.controller("studCtrl", function($scope){
$scope.students = [
{roll:1, name:"Amit", city:"Pune"},
{roll:2, name:"Neha", city:"Mumbai"},
{roll:3, name:"Rahul", city:"Pune"},
{roll:4, name:"Pooja", city:"Nashik"},
{roll:5, name:"Kiran", city:"Pune"}
];
});
</script>
</body>
</html>3. Write an AngularJS program that show the use of filters to filter a list of items
based on user input
<!DOCTYPE html>
<html ng-app="filterApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="filterCtrl">
<h3>Filter Items</h3>
<input type="text" ng-model="searchText" placeholder="Type to search">
<ul>
<li ng-repeat="item in items | filter:searchText">
{{item}}
</li>
</ul>
<script>
var app = angular.module("filterApp", []);
app.controller("filterCtrl", function($scope){
$scope.items = [
"Apple",
"Banana",
"Mango",
"Orange",
"Grapes",
"Pineapple"
];
});
</script>
</body>
</html>Set-B
1. Write an AngularJS Script to search a product with its rate (use ng-repeat
directive, use Array to store data, use filter currency).
<!DOCTYPE html>
<html ng-app="shopApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="shopCtrl">
<h3>Search Product</h3>
<input type="text" ng-model="searchText" placeholder="Enter product name">
<table border="1" cellpadding="5">
<tr>
<th>Product</th>
<th>Rate</th>
</tr>
<tr ng-repeat="p in products | filter:searchText">
<td>{{p.name}}</td>
<td>{{p.rate | currency}}</td>
</tr>
</table>
<script>
var app = angular.module("shopApp", []);
app.controller("shopCtrl", function($scope){
$scope.products = [
{name:"Soap", rate:40},
{name:"Sugar", rate:45},
{name:"Rice", rate:60},
{name:"Biscuit", rate:20},
{name:"Oil", rate:150}
];
});
</script>
</body>
</html>2. Write an AngularJS script to search student name according to the character
typed and display details (use array and filter).
<!DOCTYPE html>
<html ng-app="studApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="studCtrl">
<h3>Search Student</h3>
<input type="text" ng-model="searchName" placeholder="Type student name">
<table border="1" cellpadding="5">
<tr>
<th>Roll No</th>
<th>Name</th>
<th>City</th>
</tr>
<tr ng-repeat="s in students | filter:{name:searchName}">
<td>{{s.roll}}</td>
<td>{{s.name}}</td>
<td>{{s.city}}</td>
</tr>
</table>
<script>
var app = angular.module("studApp", []);
app.controller("studCtrl", function($scope){
$scope.students = [
{roll:1, name:"Amit", city:"Pune"},
{roll:2, name:"Neha", city:"Mumbai"},
{roll:3, name:"Rahul", city:"Pune"},
{roll:4, name:"Pooja", city:"Nashik"},
{roll:5, name:"Kiran", city:"Delhi"}
];
});
</script>
</body>
</html>3. Using angular js display the Employee details order by salary in Table format
(using ng-repeat directive, use Array to store data, use filter)
<!DOCTYPE html>
<html ng-app="empApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="empCtrl">
<h3>Employees (Order by Salary)</h3>
<table border="1" cellpadding="5">
<tr>
<th>Emp ID</th>
<th>Name</th>
<th>Salary</th>
</tr>
<tr ng-repeat="e in employees | orderBy:'salary'">
<td>{{e.id}}</td>
<td>{{e.name}}</td>
<td>{{e.salary}}</td>
</tr>
</table>
<script>
var app = angular.module("empApp", []);
app.controller("empCtrl", function($scope){
$scope.employees = [
{id:1, name:"Amit", salary:25000},
{id:2, name:"Neha", salary:30000},
{id:3, name:"Rahul", salary:22000},
{id:4, name:"Pooja", salary:28000},
{id:5, name:"Kiran", salary:35000}
];
});
</script>
</body>
</html>


Assignment-5
1) Using AngularJS Create a simple registration form that collects the
user's name, email, and password. We'll also implement form validation
to ensure that all fields are
filled correctly.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="ctrl">
<form name="f">
Name :
<input type="text" ng-model="u.name" required><br><br>
Email :
<input type="email" ng-model="u.email" required><br><br>
Password :
<input type="password" ng-model="u.password" required><br><br>
<button ng-click="register()">Register</button>
<p>{{msg}}</p>
</form>
<script>
angular.module("app",[]).controller("ctrl",function($scope){
$scope.u = {};
$scope.register = function(){
if($scope.u.name && $scope.u.email && $scope.u.password)
$scope.msg = "Registration Successful";
};
});
</script>
</body>
</html>2) Write an AngularJS Program to create student registration form and
validate all fields.
<!DOCTYPE html>
<html ng-app="studApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="studCtrl">
<form name="f">
Name :
<input type="text" ng-model="s.name" required><br><br>
Roll No :
<input type="number" ng-model="s.roll" required><br><br>
Email :
<input type="email" ng-model="s.email" required><br><br>
Class :
<input type="text" ng-model="s.class" required><br><br>
<button ng-click="register()">Register</button>
<p>{{msg}}</p>
</form>
<script>
angular.module("studApp",[]).controller("studCtrl",function($scope){
$scope.s = {};
$scope.register = function(){
if($scope.s.name && $scope.s.roll && $scope.s.email && $scope.s.class)
$scope.msg = "Student Registered Successfully";
else
$scope.msg = "Please fill all fields";
};
});
</script>
</body>
</html>3) Write an AngularJS program to create a simple form using AngularJS
form directives and handling form submission.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<form ng-submit="submitForm()">
Name :
<input type="text" ng-model="user.name" required><br><br>
Email :
<input type="email" ng-model="user.email" required><br><br>
<button type="submit">Submit</button>
<p>{{msg}}</p>
</form>
<script>
angular.module("myApp",[]).controller("myCtrl",function($scope){
$scope.user = {};
$scope.submitForm = function(){
if($scope.user.name && $scope.user.email)
$scope.msg = "Form submitted successfully";
};
});
</script>
</body>
</html>Set-B
1) Using angular js create a SPA that to accept the details such as name, mobile number,
and pin-code and email address and make validation. Name should contain character
only, mobile number should contain only 10 digit, Pin code should contain only 6
digit, email id should contain only one @, Symbol.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="ctrl">
<form>
Name :
<input type="text" ng-model="u.name"><br><br>
Mobile :
<input type="text" ng-model="u.mobile"><br><br>
Pin Code :
<input type="text" ng-model="u.pin"><br><br>
Email :
<input type="text" ng-model="u.email"><br><br>
<button ng-click="check()">Submit</button>
<p>{{msg}}</p>
</form>
<script>
angular.module("app",[]).controller("ctrl",function($scope){
$scope.u = {};
$scope.check = function(){
if(!$scope.u.name || !/^[A-Za-z ]+$/.test($scope.u.name)){
$scope.msg = "Name must contain characters only";
}
else if(!$scope.u.mobile || $scope.u.mobile.length != 10){
$scope.msg = "Mobile must be 10 digits";
}
else if(!$scope.u.pin || $scope.u.pin.length != 6){
$scope.msg = "Pin code must be 6 digits";
}
else if(!$scope.u.email || ($scope.u.email.split("@").length-1)!=1){
$scope.msg = "Email must contain one @ symbol";
}
else{
$scope.msg = "All details are valid";
}
};
});
</script>
</body>
</html>2) Write an AngularJS Program to create a SPA (Single Page application) for Login
System.
<!DOCTYPE html>
<html ng-app="loginApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="loginCtrl">
<h3>Login</h3>
Username :
<input type="text" ng-model="u.username"><br><br>
Password :
<input type="password" ng-model="u.password"><br><br>
<button ng-click="login()">Login</button>
<p>{{msg}}</p>
<script>
angular.module("loginApp",[]).controller("loginCtrl",function($scope){
$scope.u = {};
$scope.login = function(){
if($scope.u.username=="admin" && $scope.u.password=="1234")
$scope.msg="Login Successful";
else
$scope.msg="Invalid Username or Password";
};
});
</script>
</body>
</html>