MongoDBとAngularの統合

mkdir angular-quickstartcd angular-quickstart

mkdir servercd servernpm init -y

"type": "module",

npm install mongodb express cors dotenv

npm install -D typescript @types/node @types/cors @types/express tsx

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 serverapp.listen(PORT, () => {  console.log(`Server listening on port ${PORT}`);});

MONGODB_URI=<connection string>PORT=5050

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 routesconst router = express.Router();
// Gets a list of all the restaurantsrouter.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 filterrouter.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;

ng new client

cd clientnpm install zone.js

ng generate service restaurant

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

ng generate component restaurant-list

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

npx tsx server.ts

Pinged your deployment. You successfully connected to MongoDB!Server listening on port 5050

ng serve

Application bundle generation complete.Watch mode enabled. Watching for file changes...NOTE: Raw file sizes do not reflect development server per-request transformations.   ➜  Local:   http://localhost:4200/   ➜  press h + enter to show help