Integrar MongoDB con Angular

import express from "express";
import cors from "cors";
import restaurants from "./routes/restaurant.js";
const PORT = process.env.PORT || 5050;
const app = express();
app.use(cors());
app.use(express.json());
app.use("/restaurant", restaurants);
// start the Express server
app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

import "dotenv/config";
import { MongoClient, Db } from "mongodb";
const uri = process.env.MONGODB_URI || "";
const client = new MongoClient(uri);
try {
  // Connects the client to the server
  await client.connect();
  // Sends a ping to confirm a successful connection
  await client.db("admin").command({ ping: 1 });
  console.log(
    "Pinged your deployment. You successfully connected to MongoDB!"
  );
} catch(err) {
  console.error(err);
}
const db: Db = client.db("sample_restaurants");
export default db;

import express, { Request, Response } from "express";
import db from "../db/connection.js";
// Creates an instance of the Express router, used to define our routes
const router = express.Router();
// Gets a list of all the restaurants
router.get("/", async (req: Request, res: Response) => {
  let collection = db.collection("restaurants");
  let results = await collection.find({}).toArray();
  res.send(results).status(200);
});
// Lists restaurants that match the query filter
router.get("/browse", async (req: Request, res: Response) => {
  try {
    let collection = db.collection("restaurants");
    let query = {
      borough: "Queens",
      name: { $regex: "Moon", $options: "i" },
    };
    let results = await collection.find(query).toArray();
    res.send(results).status(200);
  } catch (err) {
    console.error(err);
    res.status(500).send("Error browsing restaurants");
  }
});
export default router;

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
export interface Restaurant {
  _id: string;
  name: string;
  borough: string;
  cuisine: string;
}
@Injectable({
  providedIn: 'root'
})
export class RestaurantService {
  private apiUrl = 'http://localhost:5050/restaurant';
  constructor(private http: HttpClient) {}
  getAllRestaurants(): Observable<Restaurant[]> {
    return this.http.get<Restaurant[]>(this.apiUrl);
  }
  getFilteredRestaurants(): Observable<Restaurant[]> {
    return this.http.get<Restaurant[]>(`${this.apiUrl}/browse`);
  }
}

import { Routes } from '@angular/router';
import { RestaurantListComponent } from './restaurant-list/restaurant-list';
export const routes: Routes = [
  { path: '', component: RestaurantListComponent },
  { path: 'browse', component: RestaurantListComponent }
];

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient()
  ]
};

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';
import { RestaurantService, Restaurant } from '../restaurant';
@Component({
  selector: 'app-restaurant-list',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './restaurant-list.html',
  styleUrl: './restaurant-list.css'
})
export class RestaurantListComponent implements OnInit {
  restaurants: Restaurant[] = [];
  loading = true;
  error = '';
  constructor(
    private restaurantService: RestaurantService,
    public router: Router
  ) {}
  ngOnInit(): void {
    this.loadRestaurants();
  }
  loadRestaurants(): void {
    const isFiltered = this.router.url === '/browse';
    
    const observable = isFiltered
      ? this.restaurantService.getFilteredRestaurants()
      : this.restaurantService.getAllRestaurants();
    observable.subscribe({
      next: (data) => {
        this.restaurants = data;
        this.loading = false;
      },
      error: (err) => {
        this.error = 'Failed to load restaurants';
        this.loading = false;
        console.error('Error loading restaurants:', err);
      }
    });
  }
}

<div *ngIf="loading" class="text-center py-8">
  <p class="text-gray-600">Loading restaurants...</p>
</div>
<div *ngIf="error" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
  {{ error }}
</div>
<div *ngIf="!loading && !error">
  <h3 class="text-lg font-semibold p-4">
    {{ router.url === '/browse' ? 'Filtered Restaurants (Queens, containing "Moon")' : 'All Restaurants' }}
  </h3>
  <div class="border rounded-lg overflow-hidden">
    <div class="relative w-full overflow-auto">
      <table class="w-full caption-bottom text-sm">
        <thead class="[&_tr]:border-b">
          <tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
            <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
              Name
            </th>
            <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
              Borough
            </th>
            <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
              Cuisine
            </th>
          </tr>
        </thead>
        <tbody class="[&_tr:last-child]:border-0">
          @for (restaurant of restaurants; track restaurant._id) {
            <tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
              <td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
                {{ restaurant.name }}
              </td>
              <td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
                {{ restaurant.borough }}
              </td>
              <td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
                {{ restaurant.cuisine }}
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  </div>
</div>

import { Component } from '@angular/core';
import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class AppComponent {
  title = 'Restaurant Browser';
}

<div class="w-full p-6">
  <nav class="flex justify-between items-center mb-6">
    <a routerLink="/">
      <img
        alt="MongoDB logo"
        class="h-10 inline"
        src="https://d3cy9zhslanhfa.cloudfront.net/media/3800C044-6298-4575-A05D5C6B7623EE37/4B45D0EC-3482-4759-82DA37D8EA07D229/webimage-8A27671A-8A53-45DC-89D7BF8537F15A0D.png"
      />
    </a>
    <div class="flex gap-4">
      <a routerLink="/" routerLinkActive="font-bold" [routerLinkActiveOptions]="{exact: true}" class="text-blue-600 hover:underline">
        All Restaurants
      </a>
      <a routerLink="/browse" routerLinkActive="font-bold" class="text-blue-600 hover:underline">
        Filtered Restaurants
      </a>
    </div>
  </nav>
  <router-outlet></router-outlet>
</div>

import 'zone.js';
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app';
bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));