Scribd
Upload
2 views

Program 12

The document outlines the development of a web application for managing student information using Express.js for the backend and AngularJS for the frontend. It includes instructions for setting up the backend with MongoDB, defining models and routes, as well as creating the frontend with HTML and AngularJS components. Additionally, it provides steps to run the project by starting the backend server and opening the frontend in a browser.

Uploaded by

227r1a7349
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

Program 12

The document outlines the development of a web application for managing student information using Express.js for the backend and AngularJS for the frontend. It includes instructions for setting up the backend with MongoDB, defining models and routes, as well as creating the frontend with HTML and AngularJS components. Additionally, it provides steps to run the project by starting the backend server and opening the frontend in a browser.

Uploaded by

227r1a7349
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

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:

You might also like