Ques on 1: Write a program Addi on of 2 numbers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>Addi on in AngularJS</ tle>
<script
src="h ps://[Link]/ajax/libs/angularjs/1.8.2/[Link]"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<h2>Addi on of Two Numbers in AngularJS</h2>
<label>Enter first number:</label>
<input type="number" ng-model="num1">
<label>Enter second number:</label>
<input type="number" ng-model="num2">
<bu on ng-click="addNumbers()">Add</bu on>
<h3>Result: {{ result }}</h3>
<script>
var app = [Link]('myApp', []);
[Link]('myController', func on($scope) {
$scope.num1 = 0;
$scope.num2 = 0;
$[Link] = 0;
$[Link] = func on() {
$[Link] = parseFloat($scope.num1) + parseFloat($scope.num2);
};
});
</script>
Ques on 2 : Write a program accessing dic onary elements
Code:
<!DOCTYPE html>
<html lang=
"en">
<head>
<meta charset=
"UTF-8">
<meta name=
"viewport" content=
"width=device-width, ini al-scale=1.0">
< tle>AccessDic onary</ tle>
<script src=
"h ps://[Link]/ajax/libs/angularjs/1.8.2/[Link]"></script>
</head>
<body ng-app=
"dictApp">
<div ng-controller=
"DictController">
<h2>Name: {{ [Link] }}</h2>
<h2>Age: {{ [Link] }}</h2>
<h2>City: {{ [Link] }}</h2>
</div>
<script>
var app = [Link]("dictApp"
, []);
[Link]("DictController"
, func on($scope) {
$[Link] = { name: "Krishnendu Cha erjee"
, age: 22, city: "Kolkata" };
});
</script>
</body>
</html>
Ques on 3 : Write a program angular string
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>AngularJS String Example</ tle>
<script
src="h ps://[Link]/ajax/libs/angularjs/1.8.2/[Link]"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<h2>String Opera ons in AngularJS</h2>
<label>Enter first string:</label>
<input type="text" ng-model="str1">
<label>Enter second string:</label>
<input type="text" ng-model="str2">
<bu on ng-click="concatenate()">Concatenate</bu on>
<bu on ng-click="convertToUpper()">To Uppercase</bu on>
<bu on ng-click="convertToLower()">To Lowercase</bu on>
<bu on ng-click="getLength()">Get Length</bu on>
<h3>Result: {{ result }}</h3>
<script>
var app = [Link]('myApp', []);
[Link]('myController', func on($scope) {
$scope.str1 = "";
$scope.str2 = "";
$[Link] = "";
// String Concatena on
$[Link] = func on() {
$[Link] = $scope.str1 + " " + $scope.str2;
};
// Convert to Uppercase
$[Link] = func on() {
$[Link] = $[Link]() + " " + $[Link]();
};
// Convert to Lowercase
$[Link] = func on() {
$[Link] = $[Link]() + " " + $[Link]();
};
// Get Length
$[Link] = func on() {
$[Link] = "Length of first string: " + $[Link] +
", Length of second string: " + $[Link];
};
});
</script>
</body>
</html>
Ques on 4 : Write a program angular string using ng-bind
<!DOCTYPE html>
<html lang=
"en" ng-app>
<head>
<meta charset=
"UTF-8">
< tle>ng-bind Example</ tle>
<script src=
"h ps://[Link]/ajax/libs/angularjs/1.8.2/[Link]"></script>
</head>
<body>
<div ng-init=
"f=
'Krishnendu'; l=
'Cha erjee'; fullName=f + ' ' + l">
<p>The full name is: <span ng-bind=
"fullName"></span></p>
</div>
</body>
</html>
Ques on 5 : Write a program array using ng-bind
<!DOCTYPE html>
<html lang=
"en" ng-app>
<head>
<meta charset=
"UTF-8">
< tle>AngularJS Array Example</ tle>
<script src=
"h ps://[Link]/ajax/libs/angularjs/1.8.2/[Link]"></script>
</head>
<body>
<div ng-init=
"fruits=['Apple'
'Banana'
'Mango'
'Orange']">
<p><strong>All Fruits:</strong> <span ng-bind=
"fruits"></span></p>
<p><strong>First Fruit:</strong> <span ng-bind=
"fruits[0]"></span></p>
</div>
</body>
</html>
Ques on 6 : Write a Program ng-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini al-scale=1.0">
< tle>AngularJS ng-show Example</ tle>
<script
src="h ps://[Link]/ajax/libs/angularjs/1.8.2/[Link]"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<h2>ng-show Example in AngularJS</h2>
<label>Enter your name:</label>
<input type="text" ng-model="userName">
<p ng-show="userName">Hello, {{ userName }}! Welcome to AngularJS.</p>
<script>
var app = [Link]('myApp', []);
[Link]('myController', func on($scope) {
$[Link] = ""; // Ini ally empty
});
</script>
</body>
</html>
Ques on 7 : Write a program ng-hide
<!DOCTYPE html>
<html lang=
"en" ng-app=
"HideApp">
<head>
<meta charset=
"UTF-8">
< tle>ng-hide Example</ tle>
<script src=
"h ps://[Link]/ajax/libs/angularjs/1.8.2/[Link]"></script>
</head>
<body ng-controller=
"HideController" ng-init=
"isHidden=false">
<bu on ng-click=
"isHidden = !isHidden">ToggleText</bu on>
<p ng-hide=
"isHidden">This text toggles visibility.</p>
<script>
[Link]('HideApp'
, []).controller('HideController'
, func on () {});
</script>
</body>
</html>
Student List with Filter and Form
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Easy Example</title>
<script src="[Link]
<style>
[Link]-touched {
border: 2px solid red;
[Link]-touched {
border: 2px solid green;
table, th, td {
border: 1px solid gray;
border-collapse: collapse;
padding: 5px;
</style>
</head>
<body ng-app="mainApp" ng-controller="MainController">
<h2>Student Registration</h2>
<!-- Form -->
<form name="studentForm" novalidate>
<label>Name:</label><br>
<input type="text" name="name" ng-model="[Link]" required>
<br>
<label>Marks:</label><br>
<input type="number" name="marks" ng-model="[Link]" required>
<br><br>
<button type="button" ng-click="addStudent()" ng-disabled="studentForm.$invalid">
Add Student
</button>
</form>
<hr>
<!-- Filter -->
<input type="text" ng-model="searchText" placeholder="Search student...">
<!-- Student Table -->
<h3>Student List</h3>
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr ng-repeat="student in students | filter:searchText | orderBy:'marks':true">
<td>{{[Link] | uppercase}}</td>
<td>{{[Link]}}</td>
</tr>
</table>
<script>
var app = [Link]('mainApp', []);
[Link]('MainController', function($scope) {
$[Link] = [
{ name: 'Mahesh', marks: 75 },
{ name: 'Sneha', marks: 85 },
{ name: 'John', marks: 65 }
];
$[Link] = {};
$[Link] = function() {
$[Link]({
name: $[Link],
marks: $[Link]
});
$[Link] = {}; // clear form
$[Link].$setPristine(); // reset form state
$[Link].$setUntouched();
};
});
</script>
Angular JS Form Validation
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Form Validation</title>
<script src="[Link]
<style>
[Link]-touched {
border: 2px solid red;
[Link]-touched {
border: 2px solid green;
span {
color: red;
font-size: 12px;
</style>
</head>
<body ng-app="mainApp" ng-controller="FormCtrl">
<h2>Student Registration Form</h2>
<form name="studentForm" novalidate>
<!-- Name -->
<label>Name:</label><br>
<input type="text" name="name" ng-model="[Link]" required>
<br>
<span ng-show="[Link].$touched && [Link].$invalid">
Name is required.
</span>
<br><br>
<!-- Email -->
<label>Email:</label><br>
<input type="email" name="email" ng-model="[Link]" required>
<br>
<span ng-show="[Link].$touched && [Link].$invalid">
Enter a valid email.
</span>
<br><br>
<!-- Password -->
<label>Password:</label><br>
<input type="password" name="password" ng-model="[Link]" ng-
minlength="6"
required>
<br>
<span ng-show="[Link].$touched && [Link].$invalid">
Password must be at least 6 characters.
</span>
<br><br>
<!-- Submit Button -->
<button type="submit" ng-disabled="studentForm.$invalid">
Submit
</button>
</form>
<hr>
<!-- Preview -->
<div ng-show="studentForm.$valid">
<h3>Preview</h3>
<p><b>Name:</b> {{[Link]}}</p>
<p><b>Email:</b> {{[Link]}}</p>
</div>
<script>
var app = [Link]('mainApp', []);
[Link]('FormCtrl', function($scope) {
$[Link] = {};
});
</script>
</body>
</html>
Write an AJS code to create a module and show all the basic arithmetic
operations between two operands.
<!DOCTYPE html>
<html>
<head>
<title>AJS PROGRAM</title>
<script src="[Link]
</head>
<body>
<div ng-app="tiu" ng-controller="XYZ">
<p>Sum of {{a}} and {{b}} = {{a + b}}</p>
<p>Subtraction of {{a}} and {{b}} = {{a - b}}</p>
<p>Product of {{a}} and {{b}} = {{a * b}}</p>
<p>Division of {{a}} and {{b}} = {{a / b}}</p>
<p>Modulus of {{a}} and {{b}} = {{a % b}}</p>
</div>
<script>
var abc = [Link]("tiu", []);
[Link]("XYZ", function($scope) {
$scope.a = 110;
$scope.b = 45;
});
</script>
</body>
</html>
Write an AJS code to Filter Search
<html >
<head>
<script
src="[Link]
</head>
<body >
<div lang="en" ng-app="myApp" ng-controller="myCtrl">
<h3>Search Filter Example</h3>
<input type="text" ng-model="searchText" placeholder="Search by name...">
<table border="1">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr ng-repeat="person in people | filter:searchText">
<td>{{ [Link] }}</td>
<td>{{ [Link] }}</td>
<td>{{ [Link] }}</td>
</tr>
</table>
<script>
var app = [Link]("myApp", []);
[Link]("myCtrl", function($scope) {
$[Link] = [
{ id: 1, name: "A", age: 25 },
{ id: 2, name: "B", age: 30 },
{ id: 3, name: "C", age: 28 }
];
});
</script>
</div>
</body>
</html>
Write an AJS code to demonstrate how to filter an array based on some user
input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="[Link]
<title>AngularJS Example</title>
</head>
<body>
<div ng-app="tiu" ng-controller="XYZ">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in N | filter:test">
{{x}}
</li>
</ul>
</div>
<script>
[Link]("tiu", []).controller("XYZ", function ($scope) {
$scope.N = ["grapes", "apple", "lime", "kiwi", "pineapple"];
});
</script>
</body>
</html>
