Analog

// src/app/pages/index.page.ts
import { Component } from '@angular/core';
import { injectQuery } from '@analogjs/trpc';

@Component({
  standalone: true,
  template: `
    <h1>المقالات</h1>
    <ul>
      @for (post of posts(); track post.id) {
        <li>
          <a [routerLink]="['/posts', post.id]">
            {{ post.title }}
          </a>
        </li>
      }
    </ul>
  `
})
export default class HomePage {
  posts = injectQuery(() => ['posts'], () => 
    fetch('/api/posts').then(r => r.json())
  );
}

// src/app/pages/posts/[id].page.ts
import { Component } from '@angular/core';
import { injectRoute } from '@analogjs/router';

@Component({
  standalone: true,
  template: `
    <article>
      <h1>{{ post()?.title }}</h1>
      <p>{{ post()?.content }}</p>
    </article>
  `
})
export default class PostPage {
  route = injectRoute();
  post = injectQuery(() => ['post', this.route.params.id], () =>
    fetch(`/api/posts/${this.route.params.id}`).then(r => r.json())
  );
}

// src/server/routes/posts.ts
import { defineEventHandler } from 'h3';

export default defineEventHandler(async (event) => {
  const posts = await db.post.findMany();
  return posts;
});