Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
9 views4 pages

11th Program

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
9 views4 pages

11th Program

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
You are on page 1/ 4

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 employees.json


[
{
"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 app.js


// Define the AngularJS app
var app = angular.module('EmployeeApp', []);

// Define the controller


app.controller('EmployeeController', function($scope, $http) {

// Fetch data using $http GET method


$http.get('employees.json')
.then(function(response) {
$scope.employees = response.data; // assign data to scope variable
})
.catch(function(error) {
console.error("Error loading employee data:", error);
});

});

3 create a file index.html


<!DOCTYPE html>
<html ng-app="EmployeeApp">
<head>
<meta charset="UTF-8">
<title>Employee Data</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></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>{{ emp.id }}</td>
<td>{{ emp.name }}</td>
<td>{{ emp.designation }}</td>
<td>{{ emp.salary | 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