Experiment 8
Aim:
Write a simple Hello World program using AngularJS library.
Description:
At first we have to insert a script called angular.min.js into the html document by
using <script>…</script> tag. After that we have to use ng-app and ng-model
attributes within our html document.
Program
<html>
<head>
<title>helloworld</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
</head>
<body>
<div ng-app="">
<p>Name:<input type="text" ng-model="name"></p>
<h1>{{name}}</h1>
</div>
</body>
</html>
Output:
Experiment 9
Aim:
Write a program that the AngularJS application consists of following
three
Important parts:
1. ng-app
2. ng-model
3. ng-bind
Description:
Just go through the following three html program where you can find how to use
ng-app, ng-model, and ng-bind.
Programs
ng-app
<!DocType html>
<html>
<head>
<title>ng-app</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<div ng-app>
<p>My first expression:{{5+7}}</p>
</div>
</body>
</html>
Output:
ng-model
<!DocType html>
<html>
<head>
<title>ng-model</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<div ng-app="myapp" ng-controller="myctrl">
Name:<input ng-model="name">
<h1>You Entered:{{name}}</h1>
</div>
<script>
var app=angular.module('myapp',[]);
app.controller('myctrl',function($scope){
$scope.name="Harry";
});
</script>
</body>
</html>
Output
ng-bind:
<!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="myText='welcome to swarnandhra college!'">
<p ng-bind="myText"></p>
</div>
</body>
</html>
Output:
Experiment 10
Aim:
Write a program that includes AngularJS directives?
Description:
Go through the following program to understand the uses of AngularJS directive.
Program
<html>
<head>
<title>Angular JS Table</title>
<script src =
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<style>
table, th , td {
border: 1px solid black;
padding: 6px;
</style>
</head>
<body>
<h2>AngularJS Tables</h2>
<div ng-app = "stu1" ng-controller = "studentController">
<table>
<tr>
<th><u>Subject Name</th></u>
<th><u>Marks</th></u>
</tr>
<tr ng-repeat = "subject in student.subjects">
<td ng-if="$odd" style="background-color:orange">{{ subject.name }}</td>
<td ng-if="$even" style="background-color:pink">{{ subject.name }}</td>
<td ng-if="$odd" style="background-color:orange">{{ subject.marks }}</td>
<td ng-if="$even" style="background-color:pink" >{{ subject.marks }}</td>
</tr>
</table>
</td>
</div>
<script>
var details= angular.module("stu1", []);
details.controller('studentController', function($scope) {
$scope.student = {
subjects:[
{name:'Fswd',marks:85},
{name:'IOT',marks:90},
{name:'Phthon',marks:80},
{name:'mongodb',marks:75}
};
});
</script>
</body>
</html>
Output:
Experiment 11
Aim:
Write a program by using filters to convert the following
1. uppercase
2. lowercase
3. currency
4. orderBy
5. filter
6. date
Description:
You can go through the following programs to understand the filters.
Program
Uppercase:
<!DOCTYPE html>
<html>
<head>
<title>UPPERCASE</title>
</head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
});
</script>
</body>
</html>
Output:
Lowercase
<!DOCTYPE html>
<html>
<head>
<title>LOWERCASE</title>
</head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | lowercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
});
</script>
</body>
</html>
Output:
C
urrency
<!DOCTYPE html>
<html>
<head>
<title>CURRENCY</title>
</head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<body>
<div ng-app="myApp" ng-controller="costCtrl">
<li ng-repeat="x in data">{{x|currency}}</li>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.data = [58,456,678,345]
});
</script>
<p>The currency filter formats a number to a currency format.</p>
</body>
</html>
Output
OrderBy
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<body>
<div ng-app="myApp" ng-controller="orderCtrl">
<ul>
<li ng-repeat="x in cars | orderBy">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
$scope.cars = ["kwid", "skoda", "Audi", "Volvo", "BMW",
"Ford","Hondacity"];
});
</script>
<p>The array items are displayed alphabetically.</p>
</body>
</html>
Output:
Filter
<!DOCTYPE html>
<html>
<head>
<title>FILTER</title>
</head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | filter : 'a'">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = ['ram','raju','scet','siet','ramesh'];
});
</script>
<p>This example displays only the names containing the letter "a".</p>
</body>
</html>
Output:
D
ate
<!DOCTYPE html>
<html>
<head>
<title>DATE</title>
</head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<body>
<div ng-app="myApp" ng-controller="datCtrl">
<p>Date = {{ today | date : "fullDate" }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('datCtrl', function($scope) {
$scope.today = new Date();
});
</script>
<p>You can use predefinted formats when displaying a date.</p>
</body>
</html>
Output:
1.Angular js program Using ng-app
<html>
<head>
<title>helloworld</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
</head>
<body>
<div ng-app>
{{['ram','geetha','rita'][0]}}
</div>
<div>
11-2={{11-2}}
</div>
</body>
</html>
2. Angular js program Using ng-app
<html ng-app>
<head>
<title>Simple AngularJS Example</title>
</head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<body>
<div>10+2={{10+2}}</div>
<div>10-2={{10-2}}</div>
<div>{{{name:'rani',age:30}.name}}</div>
<div>{{['rani','roja','deepu'][1]}}</div>
</body>
</html>
3. Angular js program Using ng-app,Module and Controller
<!DOCTYPE html>
<html ng-app="myModule" ng-controller="personalCtrl">
<head>
<title>UPPERCASE</title>
</head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<body>
<div>
<p>The name is {{ message| uppercase }}</p>
</div>
<script>
angular.module('myModule', []).controller('personalCtrl', function($scope) {
$scope.message="Angularjs application";
});
</script>
</body>
</html>
4. Angular js program Using ng-app,Module and Controller
<html ng-app="myModule" ng-controller="myController">
<head>
<title>Simple AngularJS Example</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></
script>
</head>
<body>
<div>
first name:{{ employee.firstname}}
</div>
<div>
Last name:{{ employee.lastname}}
</div>
<div>
gender:{{ employee.gender}}
</div>
<script>
var myApp=angular.module("myModule",[])
.controller("myController",function($scope){
var employee={
firstname:"sai",
lastname:"lakshmi",
gender:"female"
};
$scope.employee=employee;
});
</script>
</body>
</html>
