How to Communicate with Backend Services using HTTP in Angular?

// server.js

const express = require("express");
const mongoose = require("mongoose");
const noteRoutes = require("./routes/noteRoutes");
const cors = require("cors");
const app = express();
const port = 5000;

// Connect to MongoDB
mongoose
    .connect("mongodb://localhost:27017/note-app")
    .then(() => {
        console.log("Connected successfully to MongoDB");
    })
    .catch((err) => {
        console.error("Error occurred while connecting to MongoDB:", err);
    });

// Middleware
app.use(express.json());
app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use("/notes", noteRoutes);

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

// model/note.js

const mongoose = require("mongoose");

const noteSchema = new mongoose.Schema({
    title: { type: String, },
    description: { type: String, },

});

module.exports = mongoose.model("Note", noteSchema);

// routes/noteRoutes.js

const express = require("express");
const router = express.Router();
const Note = require("../model/note");

// Get all notes
router.get("/", async (req, res) => {
    try {
        const notes = await Note.find();
        res.json(notes);
    } catch (err) {
        res.status(500).json({ message: err.message });
    }
});

// Create a note
router.post("/", async (req, res) => {
    console.log(req.body);
    const note = new Note({
        title: req.body.title,
        description: req.body.description,
    });

    try {
        const newNote = await note.save();
        res.status(201).json(newNote);
    } catch (err) {
        res.status(400).json({ message: err.message });
    }
});

// Update a note
router.put("/:id", async (req, res) => {
    console.log(req.params.id);
    try {
        const note = await Note.findById(req.params.id);
        if (note == null) {
            return res.status(404).json({ message: "Note not found" });
        }
        if (req.body.title != null) {
            note.title = req.body.title;
        }
        if (req.body.description != null) {
            note.description = req.body.description;
        }
        const updatedNote = await note.save();
        res.json(updatedNote);
    } catch (err) {
        res.status(400).json({ message: err.message });
    }
});

// Delete a note
router.delete("/:id", async (req, res) => {
    try {
        const deletedNote = await Note.findByIdAndDelete(req.params.id);
        const notes = await Note.find();
        res.json(notes);
    } catch (err) {
        res.status(500).json({ message: err.message });
    }
});

module.exports = router;

// /src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
// Import HttpClientModule
import { HttpClient, HttpClientModule } from '@angular/common/http';
// Import FormsModule for ngModel
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    imports: [
        CommonModule,
        FormsModule, // Add FormsModule here
        HttpClientModule // Add HttpClientModule here
    ],
    standalone: true
})
export class AppComponent implements OnInit {
    // Form inputs
    title = '';
    description = '';

    notes: any[] = [];

    constructor(private http: HttpClient) { }

    ngOnInit(): void {
        this.fetchNotes();
    }

    fetchNotes(): void {
        this.http.get<any[]>('http://localhost:5000/notes').subscribe(
            (data) => {
                this.notes = data;
            },
            (error) => {
                console.error('Error fetching notes:', error);
            }
        );
    }

    // Handle form submission
    onSubmit(): void {
        if (this.title.trim() === '' || this.description.trim() === '') {
            alert('Please fill in all fields!');
            return;
        }
        const newNote = {
            title: this.title,
            description: this.description,
        };

        this.http.post('http://localhost:5000/notes', newNote).subscribe(
            (data) => {
                console.log('Data submitted:', data);
                // Reset form inputs
                this.title = '';
                this.description = '';
                this.fetchNotes();
            },
            (error) => {
                console.error('Error submitting data:', error);
            }
        );
    }


    editNote(note: any): void {
        console.log(note)
        const newTitle = prompt('Enter new title:', note.title);
        const newDescription = prompt('Enter new description:', note.description);

        if (newTitle !== null && newDescription !== null) {
            const updatedNotes = { ...note, title: newTitle, description: newDescription };

            this.http.put(
                `http://localhost:5000/notes/${note._id}`, updatedNotes).subscribe(
                    (data) => {
                        console.log('Updated note:', data);
                        this.fetchNotes();
                        // Refresh the list
                    },
                    (error) => {
                        console.error('Error updating notes:', error);
                    }
                );
        }
    }

    deleteNote(id: number): void {
        this.http.delete<any[]>('http://localhost:5000/notes/' + id).subscribe(
            (updatedNotes) => {
                this.notes = updatedNotes;
            },
            (error) => {
                console.error('Error deleting notes:', error);
            }
        );
    }
}