Scribd
Upload
5 views4 pages

AngularJS Employee Data App Guide

This document provides instructions for creating an AngularJS application that retrieves employee data from a JSON file using the $http service. It includes steps to create an 'employees.json' file with employee details, an 'app.js' file to define the AngularJS application and controller, and an 'index.html' file to display the employee data in a table format. Finally, it mentions running an HTTP server to access the application in a web browser.

Uploaded by

yvl yvl
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views4 pages

AngularJS Employee Data App Guide

This document provides instructions for creating an AngularJS application that retrieves employee data from a JSON file using the $http service. It includes steps to create an 'employees.json' file with employee details, an 'app.js' file to define the AngularJS application and controller, and an 'index.html' file to display the employee data in a table format. Finally, it mentions running an HTTP server to access the application in a web browser.

Uploaded by

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

Write an angular JS application to access JSON file data of an employee from a server using

$http service.

Create Folder and files like the below with commands

1 create a file [Link]


[
{
"id": 101,
"name": "Alice Johnson",
"designation": "Software Engineer",
"salary": 70000
},
{
"id": 102,
"name": "Bob Smith",
"designation": "Project Manager",
"salary": 90000
},
{
"id": 103,
"name": "Charlie Williams",
"designation": "UI Designer",
"salary": 60000
}
]

2 Create a file [Link]


// Define the AngularJS app
var app = [Link]('EmployeeApp', []);

// Define the controller


[Link]('EmployeeController', function($scope, $http) {

// Fetch data using $http GET method


$[Link]('[Link]')
.then(function(response) {
$[Link] = [Link]; // assign data to scope variable
})
.catch(function(error) {
[Link]("Error loading employee data:", error);
});

});

3 create a file [Link]


<!DOCTYPE html>
<html ng-app="EmployeeApp">
<head>
<meta charset="UTF-8">
<title>Employee Data</title>
<script src="[Link]
<script src="[Link]"></script>
</head>
<body ng-controller="EmployeeController">

<h2>Employee List</h2>

<table border="1">
<tr>
<th>ID</th>
<th>Name</th>
<th>Designation</th>
<th>Salary</th>
</tr>
<tr ng-repeat="emp in employees">
<td>{{ [Link] }}</td>
<td>{{ [Link] }}</td>
<td>{{ [Link] }}</td>
<td>{{ [Link] | currency }}</td>
</tr>
</table>

</body>
</html>

Run the http-server with the following command

Open the browser and give any of the following url

You might also like