12.
Develop a web application to manage student information using Express and Angular
JS
We can develop a web application to manage student information using Express.js (Node.js
backend) and AngularJS (frontend).
1. Backend (Express.js + MongoDB)
Install Dependencies
mkdir student-management
cd student-management
mkdir backend && cd backend
npm init -y
npm install express mongoose cors body-parser
server.js (Main Server File)
const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
const bodyParser = require("body-parser");
const studentRoutes = require("./routes/students");
const app = express();
// Middleware
app.use(cors());
app.use(bodyParser.json());
// Database Connection
mongoose
.connect("mongodb://127.0.0.1:27017/studentDB", { useNewUrlParser: true,
useUnifiedTopology: true })
.then(() => console.log("MongoDB connected"))
.catch((err) => console.error(err));
// Routes
app.use("/students", studentRoutes);
const PORT = 5000;
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
models/student.js
const mongoose = require("mongoose");
const StudentSchema = new mongoose.Schema({
name: String,
age: Number,
course: String,
});
module.exports = mongoose.model("Student", StudentSchema);
routes/students.js
const express = require("express");
const router = express.Router();
const Student = require("../models/student");
// Get all students
router.get("/", async (req, res) => {
const students = await Student.find();
res.json(students);
});
// Add a student
router.post("/", async (req, res) => {
const student = new Student(req.body);
await student.save();
res.json(student);
});
// Delete a student
router.delete("/:id", async (req, res) => {
await Student.findByIdAndDelete(req.params.id);
res.json({ message: "Student deleted" });
});
module.exports = router;
2. Frontend (AngularJS)
Setup Frontend
mkdir ../frontend
cd ../frontend
npm init -y
index.html
<!DOCTYPE html>
<html lang="en" ng-app="studentApp">
<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>
<script src="app.js"></script>
<script src="controllers/studentController.js"></script>
<script src="services/studentService.js"></script>
</head>
<body ng-controller="StudentController">
<h2>Student Management</h2>
<form ng-submit="addStudent()">
<input type="text" ng-model="newStudent.name" placeholder="Name" required>
<input type="number" ng-model="newStudent.age" placeholder="Age" required>
<input type="text" ng-model="newStudent.course" placeholder="Course" required>
<button type="submit">Add Student</button>
</form>
<ul>
<li ng-repeat="student in students">
{{ student.name }} ({{ student.age }} years) - {{ student.course }}
<button ng-click="deleteStudent(student._id)">Delete</button>
</li>
</ul>
</body>
</html>
app.js
var app = angular.module("studentApp", []);
controllers/studentController.js
app.controller("StudentController", function ($scope, StudentService) {
$scope.students = [];
$scope.getStudents = function () {
StudentService.getStudents().then(function (response) {
$scope.students = response.data;
});
};
$scope.addStudent = function () {
StudentService.addStudent($scope.newStudent).then(function () {
$scope.newStudent = {};
$scope.getStudents();
});
};
$scope.deleteStudent = function (id) {
StudentService.deleteStudent(id).then(function () {
$scope.getStudents();
});
};
$scope.getStudents();
});
services/studentService.js
app.service("StudentService", function ($http) {
this.getStudents = function () {
return $http.get("http://localhost:5000/students");
};
this.addStudent = function (student) {
return $http.post("http://localhost:5000/students", student);
};
this.deleteStudent = function (id) {
return $http.delete("http://localhost:5000/students/" + id);
};
});
3. Running the Project
Start the Backend
cd backend
node server.js
Run the Frontend
Open index.html in a browser.
Output:
