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);  }  );  } }