0% found this document useful (0 votes)
30 views19 pages

Angularjslabmanualfinal 240120070952 1373a143

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
30 views19 pages

Angularjslabmanualfinal 240120070952 1373a143

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

ANGULAR JS (21CSL581)

List of programs
1. Develop Angular JS program that allows user to input their first name and last name and display their fullname.
Note: The default values for first name and last name may be included in the program.
2. Develop an Angular JS application that displays a list of shopping items. Allow users to add and removeitems
from the list using directives and controllers.Note: The default values of items may be included inthe program.
3. Develop a simple Angular JS calculator application that can perform basic mathematical operations(addition,
subtraction, multiplication, division) based on user input.
4. Write an Angular JS application that can calculate factorial and compute square based on given user input.
5. Develop AngularJS application that displays a details of students and their CGPA. Allow users to read
thenumber of students and display the count. Note: Student details may be included in the program.
6. Develop an AngularJS program to create a simple to-do list application. Allow users to add, edit, and
deletetasks.Note: The default values for tasks may be included in the program.
7. Write an AngularJS program to create a simple CRUD application (Create, Read, Update, and Delete)
formanaging users.
8. DevelopAngularJS program to create a login form, with validation for the username and password fields.
9. Create an AngularJS application that displays a list of employees and their salaries. Allow users to searchfor
employees by name and salary. Note: Employee details may be included in the program.
10. Create Angular JS application that allows users to maintain a collection of items. The application should display
the current total number of items, and this count should automatically update as items are added or removed.
Users should be able to add items to the collection and remove them as needed. Note: The default values for
items may be included in the program.
11. Create Angular JS application to convert student details to uppercase using angular filters. Note: The default
details of students may be included in the program.
12. Create an AngularJS application that displays the date by using date filter parameters.

Basics of AngularJS
AngularJS extends HTML with new attributes.
AngularJS is perfect for Single Page Applications (SPAs).
AngularJS is easy to learn.
You will learn the basics of AngularJS: directives, expressions, filters, modules, and controllers, events, DOM,

Dept of ISE, R I T, Hassan.


ANGULAR JS (21CSL581)

Forms, Input, Validation, Http, and more.

AngularJS History
AngularJS version 1.0 was released in 2012.
Miško Hevery, a Google employee, started to work with AngularJS in 2009.
The idea turned out very well, and the project is now officially supported by Google.
AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.
AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.

Why AngularJS?
HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in
web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is
extraordinarily expressive, readable, and quick to develop.

Alternatives
Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or
by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML
was not designed for dynamic views.

Extensibility
AngularJS is a toolset for building the framework most suited to your application development. It is fully
extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique
development workflow and feature needs. Read on to find out how.

AngularJS Extends HTML


AngularJS extends HTML with ng-directives.
The ng-app directive defines an AngularJS application.
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
The ng-bind directive binds application data to the HTML view.

Sample programs
Program-1:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Output: Input something in the input box:
Name:
AngularJS starts automatically when the web page has loaded.
The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.
The ng-model directive binds the value of the input field to the application variable name.
The ng-bind directive binds the content of the <p> element to the application variable name.
Program-2
<!DOCTYPE html>

Dept of ISE, R I T, Hassan.


ANGULAR JS (21CSL581)

<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>

Program-3
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
ng-app----tells angular js should be active in this page.in this case whole document.
angular.min.js------loads angular js.
ng-model------links the form and the model.
{{yourName}}----- update the your name by entered text.

Program-4
<!DOCTYPE html>
<html>
<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 + 5 }}</p>
</div>
</body></html>
Angular JS Installation
REQUIREMENTS DETAILS

Angular requires an active LTS or maintenance LTS version of Node.js.


For information see the version compatibility guide.
For more information on installing Node.js, see nodejs.org. If you are unsure what version
Node.js of Node.js runs on your system, run node -v in a terminal window.

npm package Angular, the Angular CLI, and Angular applications depend on npm packages for many

Dept of ISE, R I T, Hassan.


ANGULAR JS (21CSL581)

REQUIREMENTS DETAILS

manager features and functions. To download and install npm packages, you need an npm package
manager. This guide uses the npm client command line interface, which is installed
with Node.js by default. To check that you have the npm client installed, run npm -v in a
terminal window.

Install the Angular CLI


You can use the Angular CLI to create projects, generate application and library code, and perform a variety of
ongoing development tasks such as testing, bundling, and deployment.
To install the Angular CLI, open a terminal window and run the following command:

content_copynpm install -g @angular/cli

On Windows client computers, the execution of PowerShell scripts is disabled by default. To allow the
execution of PowerShell scripts, which is needed for npm global binaries, you must set the following execution
policy:

content_copySet-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned


Carefully read the message displayed after executing the command and follow the instructions. Make sure you
understand the implications of setting an execution policy.

Create a workspace and initial application


You develop apps in the context of an Angular workspace.
To create a new workspace and initial starter app:
1. Run the CLI command ng new and provide the name my-app, as shown here:
content_copyng new my-app
2. The ng new command prompts you for information about features to include in the initial app. Accept the
defaults by pressing the Enter or Return key.

The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few
minutes.
The CLI creates a new workspace and a simple Welcome app, ready to run.

Run the application


The Angular CLI includes a server, for you to build and serve your app locally.
1. Navigate to the workspace folder, such as my-app.
2. Run the following command:

content_copycd my-app
ng serve –open

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those
files.
The --open (or just -o) option automatically opens your browser to http://localhost:4200/.
If your installation and setup was successful, you should see a page similar to the following.

Dept of ISE, R I T, Hassan.


ANGULAR JS (21CSL581)

Next steps
 For a more thorough introduction to the fundamental concepts and terminology of Angular single-page app
architecture and design principles, read the Angular Concepts section.
 Work through the Tour of Heroes Tutorial, a complete hands-on exercise that introduces you to the app
development process using the Angular CLI and walks through important subsystems.
 To learn more about using the Angular CLI, see the CLI Overview. In addition to creating the initial
workspace and app scaffolding, use the CLI to generate Angular code such as components and services.
The CLI supports the full development cycle, including building, testing, bundling, and deployment.
 For more information about the Angular files generated by ng new, see Workspace and Project File
Structure.

Dept of ISE, R I T, Hassan.


ANGULAR JS (21CSL581)

1. Develop Angular JS program that allows user to input their first name and last name and
display their fullname. Note: The default values for first name and last name may be included in
the program.
<html ng-app="nameApp">
<head>
<title>AngularJS Full Name Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body>
<div ng-controller="nameCtrl">
<!-- Input fields for first name and last name -->First
Name:
<input type="text" ng-model="firstName" placeholder="Enter your first name">
<br> <br> Last Name:
<input type="text" ng-model="lastName" placeholder="Enter your last name">
<br> <br>
<!-- Button to display the full name -->
<button ng-click="displayFullName()">Display Full Name</button>

<!-- Display the full name -->


<h1>Full Name is: {{ fullName }}</h1>
</div>

<script>
angular.module('nameApp', [])
.controller('nameCtrl', function ($scope) {
// Default values for first name and last name
$scope.firstName = 'Raj';
$scope.lastName = 'Kumar';
// Function to display the full name
$scope.displayFullName = function () {
$scope.fullName = $scope.firstName + ' ' + $scope.lastName;
};
});
</script>
</body>
</html>

Sample Output:

Dept of ISE, R I T, Hassan.


ANGULAR JS (21CSL581)

2. Develop an Angular JS application that displays a list of shopping items. Allow users to add and
removeitems from the list using directives and controllers.Note: The default values of items may
be included inthe program.
<html ng-app="shoppingApp">
<head>
<title>AngularJS Shopping List</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-controller="shoppingCtrl">
<h2>Shopping List</h2>
<!-- Display the items in list
<ul>
<li ng-repeat="item in shoppingItems">{{ item }} &nbsp;
<button ng-click="removeItem($index)">Remove</button>
</li>
</ul> -->
<table>
<tr ng-repeat="item in shoppingItems">
<td>{{ item }}</td>
<td><button ng-click="removeItem($index)">Remove</button></td>
</tr>
</table>
<!-- Input field and button to add a new item -->
<input type="text" ng-model="newItem" placeholder="Add a new item">
<button ng-click="addItem()">Add Item</button>

<script>
angular.module('shoppingApp', [])
.controller('shoppingCtrl', function ($scope) {
// Default values for shopping items
$scope.shoppingItems = ['Apples', 'Bananas', 'Bread', 'Milk'];

// Function to add a new item


$scope.addItem = function () {if
($scope.newItem) {
$scope.shoppingItems.push($scope.newItem);
$scope.newItem = ''; // Clear the input field after adding
}
};

// Function to remove an item


$scope.removeItem = function (index) {
$scope.shoppingItems.splice(index, 1);
};
});
</script>
</body>
</html>
Sample Output:

Dept of ISE, R I T, Hassan.


ANGULAR JS (21CSL581)

3. Develop a simple Angular JS calculator application that can perform basic mathematical
operations(addition, subtraction, multiplication, division) based on user input.
<html ng-app="calculatorApp">
<head>
<title>AngularJS Calculator</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="calculatorController">
<h2>Simple Calculator</h2>
Enter Number 1:
<input type="number" ng-model="num1" /> &nbsp;
Select Operator:
<select ng-model="operator">
<option value="+">Add</option>
<option value="-">Subtract</option>
<option value="*">Multiply</option>
<option value="/">Divide</option>
</select>&nbsp;
Enter Number 2:
<input type="number" ng-model="num2" />
<button ng-click="calculate()">Calculate</button>
<p ng-show="result !== undefined">Result: {{ result }}</p>
<script>
var app = angular.module('calculatorApp', []);
app.controller('calculatorController', function ($scope) {
$scope.calculate = function () {switch
($scope.operator) {
case '+':
$scope.result = $scope.num1 + $scope.num2;break;
case '-':
$scope.result = $scope.num1 - $scope.num2;
break;
case '*':
$scope.result = $scope.num1 * $scope.num2;break;
case '/':
if ($scope.num2 !== 0) {
$scope.result = $scope.num1 / $scope.num2;
} else {
$scope.result = 'Cannot divide by zero';
}
break;

}
};
});
</script>
</body>
</html>Sample Output:

Dept of ISE, R I T, Hassan.


ANGULAR JS (21CSL581)

4. Write an Angular JS application that can calculate factorial and compute square based on given
user input.
<html ng-app="mathApp">
<head>
<title>AngularJS Math Operations</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>

<body ng-controller="mathController">
<h2>Math Operations</h2>
Enter a Number:
<input type="number" ng-model="inputNumber" />
<button ng-click="calculateFactorial()">Calculate Factorial</button>
<button ng-click="calculateSquare()">Calculate Square</button>

<p ng-show="factorialResult !== undefined">Factorial: {{ factorialResult }}</p>


<p ng-show="squareResult !== undefined">Square: {{ squareResult }}</p>
<script>
var app = angular.module('mathApp', []);
app.controller('mathController', function ($scope) {
$scope.calculateFactorial = function () {if
($scope.inputNumber >= 0) {
$scope.factorialResult = factorial($scope.inputNumber);
} else {
$scope.factorialResult = 'Cannot calculate factorial for negative numbers';
}
};

$scope.calculateSquare = function () {
$scope.squareResult = $scope.inputNumber * $scope.inputNumber;
};

function factorial(n) { if (n
== 0 || n == 1) {
return 1;
} else {
return n * factorial(n - 1);
}
}
});
</script>
</body>
</html>

Sample Output:

Dept of ISE, R I T, Hassan.


ANGULAR JS (21CSL581)

5. Develop AngularJS application that displays a details of students and their CGPA. Allow users
to read thenumber of students and display the count. Note: Student details may be included in the
program.

<html ng-app="studentApp">
<head>
<title>AngularJS Student Details</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="studentController">
<h2>Student Details</h2>
Student Name:
<input type="text" ng-model="name" />
CGPA:
<input type="number" ng-model="cgpa" ng-min="1" ng-max="10"/>
<button ng-click="addStudent()">Add Student</button>

<p>Total Students: {{ students.length }}</p>

<ul>
<li ng-repeat="student in students">
{{ student.name }} - CGPA: {{ student.cgpa }}
</li>
</ul>

<script>
var app = angular.module('studentApp', []);
app.controller('studentController', function ($scope) {
$scope.students = [];
$scope.addStudent = function () { if
($scope.name && $scope.cgpa) {
$scope.students.push({
name: $scope.name,
cgpa: $scope.cgpa
});
// Clear the input fields
$scope.name = '';
$scope.cgpa = '';
}
};
});
</script>
</body>
</html>
Sample Output:

Dept of ISE, R I T, Hassan.


ANGULAR JS (21CSL581)

6. Develop an AngularJS program to create a simple to-do list application. Allow users to add, edit,
and deletetasks.Note: The default values for tasks may be included in the program.

<!DOCTYPE html>
<html ng-app="todoApp">

<head>
<title>AngularJS Todo List</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>

<body ng-controller="todoController">
<h1>Todo List Management</h1>

<!-- Form for adding a new task -->


<form ng-submit="addTask()">
Task:
<input type="text" ng-model="newTask" required>
<button type="submit">Add Task</button>
</form>
<br>

<!-- Table to display task information -->


<table>
<thead>
<tr>
<th>Task</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in tasks">
<td>{{ task }}</td>
<td>
<button ng-click="editTask($index)">Edit</button>
<button ng-click="deleteTask($index)">Delete</button>
</td>
</tr>
</tbody>
</table>

<!-- Edit Task Modal -->


<div ng-if="editingTaskIndex !== null">
<h2>Edit Task</h2>
Task:
<input type="text" ng-model="tasks" required>
<br>
<button ng-click="saveEdit()">Save</button>
<button ng-click="cancelEdit()">Cancel</button>
</div>

<script>
var app = angular.module('todoApp', []);

app.controller('todoController', function ($scope) {


$scope.tasks = [
'Task 1',
Dept of ISE, R I T, Hassan.
ANGULAR JS (21CSL581)

'Task 2',
'Task 3'
];
$scope.newTask = '';
$scope.editingTaskIndex = null;

$scope.addTask = function () {
$scope.tasks.push($scope.newTask);
$scope.newTask = '';
};

$scope.editTask = function (index) {


// Prompt for updated task with validation
var updatedTask = prompt('Enter updated task:');

// Check if the user pressed cancelif


(updatedTask !== null) {
// Update the task
$scope.tasks.splice(index, 1, updatedTask);
}
};

$scope.deleteTask = function (index) {


$scope.tasks.splice(index, 1);
};
});
</script>
</body>

</html>

Sample Output:

Dept of ISE, R I T, Hassan.


ANGULAR JS (21CSL581)

7. Write an AngularJS program to create a simple CRUD application (Create, Read, Update, and
Delete) formanaging users.

<!DOCTYPE html>
<html ng-app="crudApp">

<head>
<title>AngularJS CRUD Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>

<body ng-controller="crudController">
<h1>User Management</h1>

<!-- Form for adding a new user -->


<form ng-submit="addUser()">
Name:
<input type="text" ng-model="name" required>
<br>
Age:
<input type="number" ng-model="age" required>
<br>
<button type="submit">Add User</button>
</form>
<br>

<!-- Table to display user information -->


<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
<td>
<button ng-click="editUser(user)">Edit</button>
<button ng-click="deleteUser(user)">Delete</button>
</td>
</tr>
</tbody>
</table>

<script>
var app = angular.module('crudApp', []);

app.controller('crudController', function ($scope) {


$scope.users = [
{ name: 'Ram', age: 25 },
{ name: 'Sam', age: 30 },
];

$scope.addUser = function () {
$scope.users.push({ name: $scope.name, age: $scope.age });
Dept of ISE, R I T, Hassan.
ANGULAR JS (21CSL581)

$scope.name = '';
$scope.age = '';
};

$scope.editUser = function (user) {


var index = $scope.users.indexOf(user);

// Prompt for updated values with validation


var updatedName = prompt('Enter updated name:', user.name);var
updatedAge = prompt('Enter updated age:', user.age);

// Check if the user pressed cancel


if (!(updatedName == null && updatedAge == null) ){
// Update the user
var updatedUser = { name: updatedName, age: parseInt(updatedAge)
};
$scope.users.splice(index, 1, updatedUser);
}
};

$scope.deleteUser = function (user) {


var index = $scope.users.indexOf(user);
$scope.users.splice(index, 1);
};
});
</script>
</body>

</html>
Sample Output:

Dept of ISE, R I T, Hassan.


ANGULAR JS (21CSL581)

8. DevelopAngularJS program to create a login form, with validation for the username and
password fields.

<html ng-app="loginApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

<body ng-controller="loginController">
<h1>Login Form</h1>

<!-- Form for login with validation -->


<form ng-submit="login()">
Username
<input type="text" ng-model="username" required>
<br>
Passwor
d
<input type="password" ng-model="password" required>
<br>
<button type="submit">Login</button>
</form>

<script>
var app = angular.module('loginApp', []);
app.controller('loginController', function ($scope) {
$scope.login = function () {

// Check if username is "Ram" and password is "123"


if ($scope.username == 'Ram' && $scope.password == '123') {
alert('Login successful');
// Add further logic for successful login
} else {

alert('Login failed. Invalid username or password.');


// Add logic for failed login

}
};
});
</script>

</body>
</html>

Sample Output:

Dept of ISE, R I T, Hassan.


ANGULAR JS (21CSL581)

9. Create an AngularJS application that displays a list of employees and their salaries. Allow users
to searchfor employees by name and salary. Note: Employee details may be included in the program.

<html ng-app="employeeApp">
<head>
<title>AngularJS Employee Search</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>

<body ng-controller="employeeController">
<h2>Employee List</h2>
Search by Name:
<input type="text" ng-model="searchName" />

Search by Salary:
<input type="number" ng-model="searchSalary" />

<ul>
<li ng-repeat="employee in employees | filter: {name: searchName, salary:
searchSalary}">
{{ employee.name }} - Salary: Rs{{ employee.salary }}
</li>
</ul>

<script>
var app = angular.module('employeeApp', []);
app.controller('employeeController', function ($scope) {
$scope.employees = [
{ name: 'Ram', salary: 50000 },
{ name: 'abi', salary: 60000 },
{ name: 'sam', salary: 75000 },
{ name: 'raj', salary: 55000 }
];

$scope.searchName = '';
$scope.searchSalary = '';

});
</script>
</body>

</html>
Sample Output:

Dept of ISE, R I T, Hassan.


ANGULAR JS (21CSL581)

10. Create Angular JS application that allows users to maintain a collection of items. The
application should display the current total number of items, and this count should automatically
update as items are added or removed. Users should be able to add items to the collection and
remove them as needed. Note: The default values for items may be included in the program.
<html ng-app="itemApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

<body ng-controller="itemController">
<h2>Item Collection</h2>

Add New Item:


<input type="text" ng-model="newItem" />

<button ng-click="addItem()">Add Item</button>


<ul>
<li ng-repeat="item in items track by $index">
{{ item }}
<button ng-click="removeItem($index)">Remove</button>
</li>
</ul>
<p>Total Items: {{ items.length }}</p>

<script>
var app = angular.module('itemApp', []);

app.controller('itemController', function ($scope) {


$scope.items = ['Item 1', 'Item 2', 'Item 3']; // Default items
$scope.newItem = '';

$scope.addItem = function () {if


($scope.newItem) {
$scope.items.push($scope.newItem);
$scope.newItem = ''; // Clear the input field
}
};

$scope.removeItem = function (index) {


$scope.items.splice(index, 1);
};
});
</script>
</body>
</html>

Sample Output:

Dept of ISE, R I T, Hassan.


ANGULAR JS (21CSL581)

11. Create Angular JS application to convert student details to uppercase using angular filters. Note:
The default details of students may be included in the program.

<html ng-app="studentApp">
<title>Student Name Converter</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

<body ng-controller="studentController">

<h2>Student Names</h2>

<!-- Display the original student names -->


<h3>Original Names:</h3>
<ul>
<li ng-repeat="name in names">
{{ name }}
</li>
</ul>

<!-- Display the student names in uppercase using filters -->


<h3>Names in Uppercase:</h3>
<ul>
<li ng-repeat="name in names">
{{ name | uppercase }}
</li>
</ul>

<script>
var app = angular.module('studentApp', []);

app.controller('studentController', function ($scope) {


$scope.names = ['Raj', 'Ram', 'Sam'];
});
</script>
</body>
</html>

Sample Output:

Dept of ISE, R I T, Hassan.


ANGULAR JS (21CSL581)

12. Create an AngularJS application that displays the date by using date filter parameters

<!DOCTYPE html>
<html ng-app="dateApp">
<head>
<title>Date Display Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="dateController">

<h2>Date Display</h2>

<!-- Display the current date with various filter parameters -->
<p>Default Format: {{ currentDate | date }}</p>
<p>Custom Format (yyyy-MM-dd): {{ currentDate | date:'yyyy-MM-dd' }}</p>
<p>Short Date: {{ currentDate | date:'shortDate' }}</p>
<p>Full Date: {{ currentDate | date:'fullDate' }}</p>

<script>
var app = angular.module('dateApp', []);
app.controller('dateController', function ($scope) {
$scope.currentDate = new Date();
});
</script>
</body>
</html>

Sample Output:

Dept of ISE, R I T, Hassan.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy