Scribd
Upload
6 views

FSD Lab Program-12

This document outlines the development of a web application for managing student information using Express and AngularJS. It provides step-by-step instructions for setting up the backend with Express, creating API endpoints for student data, and building the frontend with AngularJS to display and manage the student list. The application allows users to add and delete students, with the student list updating dynamically in the browser.

Uploaded by

sandeepgudikandula23
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
6 views

FSD Lab Program-12

This document outlines the development of a web application for managing student information using Express and AngularJS. It provides step-by-step instructions for setting up the backend with Express, creating API endpoints for student data, and building the frontend with AngularJS to display and manage the student list. The application allows users to add and delete students, with the student list updating dynamically in the browser.

Uploaded by

sandeepgudikandula23
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/ 7

Lab Program- 12

12. Develop a web application to manage student information using Express and Angular
JS

Step 1: Install Dependencies

Make sure you have Node.js installed. Then install Express and CORS:

npm install express cors body-parser

Step 2: Create the Backend with Express (server.js)

Save this as server.js

const express = require('express');

const cors = require('cors');

const bodyParser = require('body-parser');

const app = express();

const PORT = 3000;

app.use(cors()); // Enable CORS

app.use(bodyParser.json()); // Parse JSON data

// Sample student data

let students = [

{ id: 1, name: "Alice", course: "Computer Science" },

{ id: 2, name: "Bob", course: "Mechanical Engineering" },

{ id: 3, name: "Charlie", course: "Electrical Engineering" }

];

// API to get all students

app.get('/students', (req, res) => {

res.json(students);
});

// API to add a new student

app.post('/students', (req, res) => {

const newStudent = req.body;

newStudent.id = students.length + 1;

students.push(newStudent);

res.json({ message: "Student added successfully!", students });

});

// API to delete a student

app.delete('/students/:id', (req, res) => {

const studentId = parseInt(req.params.id);

students = students.filter(student => student.id !== studentId);

res.json({ message: "Student deleted successfully!", students });

});

// Start the server

app.listen(PORT, () => {

console.log(`Server running at http://localhost:${PORT}`);

});

Step 3: Create the Frontend with AngularJS (index.html)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Student Management</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

<style>

body

font-family: Arial, sans-serif;

margin: 20px;

table

width: 100%;

border-collapse: collapse;

th, td

border: 1px solid #ddd;

padding: 8px;

text-align: left;

th

background-color: #f2f2f2;

</style>

</head>

<body ng-app="studentApp" ng-controller="StudentController">

<h2>Student Management System</h2>


<h3>Add Student</h3>

<form ng-submit="addStudent()">

<label>Name:</label>

<input type="text" ng-model="newStudent.name" required />

<label>Course:</label>

<input type="text" ng-model="newStudent.course" required />

<button type="submit">Add</button>

</form>

<h3>Student List</h3>

<table>

<tr>

<th>ID</th>

<th>Name</th>

<th>Course</th>

<th>Actions</th>

</tr>

<tr ng-repeat="student in students">

<td>{{ student.id }}</td>

<td>{{ student.name }}</td>

<td>{{ student.course }}</td>

<td><button ng-click="deleteStudent(student.id)">Delete</button></td>

</tr>

</table>

<script>

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


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

const apiUrl = 'http://localhost:3000/students';

// Load students from server

function loadStudents() {

$http.get(apiUrl).then(response => {

$scope.students = response.data;

}).catch(error => {

console.error("Error fetching students:", error);

});

loadStudents(); // Load students initially

// Add new student

$scope.addStudent = function() {

$http.post(apiUrl, $scope.newStudent).then(response => {

alert(response.data.message);

loadStudents(); // Refresh the list

$scope.newStudent = {}; // Clear form

});

};

// Delete student

$scope.deleteStudent = function(id) {

$http.delete(apiUrl + '/' + id).then(response => {

alert(response.data.message);
loadStudents(); // Refresh the list

});

};

});

</script>

</body>

</html>

Explanation:

Backend (server.js - Node.js & Express)

1. Handles student data storage in-memory (does not use a database).

2. Provides API endpoints:

o GET /students → Fetch all students.

o POST /students → Add a new student.

o DELETE /students/:id → Remove a student.

3. Runs on http://localhost:3000.

Frontend (index.html - AngularJS)

1. Loads students from the backend using $http.get().

2. Adds a new student using $http.post().

3. Deletes a student using $http.delete().

4. Displays the student list dynamically with ng-repeat.

How to Run the Application

1. Start the backend server:

node server.js

2. Open index.html in a browser go Live

3. Test the features:


o Add new students.

o Delete existing students.

o The student list updates dynamically.

You might also like