단일 HTML 파일의 각도

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular in one HTML file</title>
<style>
  body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; background: #f4f5f7; }
  .card { max-width: 320px; padding: 18px 20px; border-radius: 12px; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .1); }
  button { font: inherit; padding: 8px 16px; border: 0; border-radius: 8px; background: #c3002f; color: #fff; cursor: pointer; }
  p { margin: 0 0 12px; }
</style>
</head>
<body>
<!-- Angular replaces what is inside this tag once it starts -->
<app-root>Loading Angular...</app-root>

<script type="module">
  // The compiler must load first: it turns the template string into code in the browser
  import 'https://cdn.jsdelivr.net/npm/@angular/compiler@22.2.1/+esm';
  import { Component, signal } from 'https://cdn.jsdelivr.net/npm/@angular/core@22.2.1/+esm';
  import { bootstrapApplication } from 'https://cdn.jsdelivr.net/npm/@angular/platform-browser@22.2.1/+esm';

  class App {
    count = signal(0);  // a value the template reads by calling count()
  }

  // No TypeScript here, so Component() is called on the class instead of written as @Component
  Component({
    selector: 'app-root',
    template: `
      <div class="card">
        <p>You clicked <b>{{ count() }}</b> times.</p>
        <button (click)="count.set(count() + 1)">Click me</button>
      </div>`,
  })(App);

  bootstrapApplication(App);
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular template syntax</title>
<style>
  body { margin: 0; padding: 20px; font-family: system-ui, sans-serif; background: #f4f5f7; }
  .card { max-width: 360px; padding: 16px 18px; border-radius: 12px; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .1); }
  input { font: inherit; padding: 7px 9px; border: 1px solid #c9ced6; border-radius: 8px; width: 100%; box-sizing: border-box; }
  ul { padding-left: 20px; }
  li.hit { background: #fff3c4; }
  .note { color: #6b7280; font-size: 14px; }
</style>
</head>
<body>
<app-root>Loading Angular...</app-root>

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@angular/compiler@22.2.1/+esm';
  import { Component, signal, computed } from 'https://cdn.jsdelivr.net/npm/@angular/core@22.2.1/+esm';
  import { bootstrapApplication } from 'https://cdn.jsdelivr.net/npm/@angular/platform-browser@22.2.1/+esm';

  class App {
    fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Pear'];
    query = signal('');
    // computed() re-runs only when query changes
    matches = computed(() =>
      this.fruits.filter(f => f.toLowerCase().includes(this.query().toLowerCase())));
  }

  Component({
    selector: 'app-root',
    template: `
      <div class="card">
        <!-- [value] sets a property; (input) listens to an event, $event is the DOM event -->
        <input placeholder="Filter fruit" [value]="query()" (input)="query.set($event.target.value)">

        <!-- {{ }} prints a value -->
        <p class="note">{{ matches().length }} of {{ fruits.length }} shown</p>

        <ul>
          <!-- @for needs track so Angular can reuse list items -->
          @for (f of matches(); track f) {
            <li [class.hit]="query() !== ''">{{ f }}</li>
          } @empty {
            <li>No fruit matches "{{ query() }}"</li>
          }
        </ul>

        @if (query()) {
          <button (click)="query.set('')">Clear filter</button>
        }
      </div>`,
  })(App);

  bootstrapApplication(App);
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Packing list in Angular</title>
<style>
  body { margin: 0; padding: 20px; font-family: system-ui, sans-serif; background: #f4f5f7; }
  .card { max-width: 380px; padding: 16px 18px; border-radius: 12px; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .1); }
  h2 { margin: 0 0 4px; font-size: 20px; }
  .note { margin: 0 0 12px; color: #6b7280; font-size: 14px; }
  form { display: flex; gap: 8px; }
  input[type=text] { flex: 1; min-width: 0; font: inherit; padding: 7px 9px; border: 1px solid #c9ced6; border-radius: 8px; }
  button { font: inherit; padding: 7px 12px; border: 0; border-radius: 8px; background: #c3002f; color: #fff; cursor: pointer; }
  ul { list-style: none; padding: 0; margin: 12px 0 0; }
  li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #eceef2; }
  li label { flex: 1; }
  li.done label { color: #9ca3af; text-decoration: line-through; }
  .x { background: none; color: #9ca3af; padding: 2px 8px; }
  .all { margin-top: 12px; color: #0f5132; font-weight: 600; }
</style>
</head>
<body>
<app-root>Loading Angular...</app-root>

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@angular/compiler@22.2.1/+esm';
  import { Component, signal, computed } from 'https://cdn.jsdelivr.net/npm/@angular/core@22.2.1/+esm';
  import { bootstrapApplication } from 'https://cdn.jsdelivr.net/npm/@angular/platform-browser@22.2.1/+esm';

  let nextId = 4;

  class App {
    items = signal([
      { id: 1, name: 'Passport', done: true },
      { id: 2, name: 'Charger', done: false },
      { id: 3, name: 'Rain jacket', done: false },
    ]);
    left = computed(() => this.items().filter(i => !i.done).length);

    add(event, input) {
      event.preventDefault();  // keep the form from reloading the page
      const name = input.value.trim();
      if (!name) return;
      this.items.update(list => [...list, { id: nextId++, name, done: false }]);
      input.value = '';
    }
    toggle(id) {
      // replace the list (not mutate it) so the signal sees a new value
      this.items.update(list => list.map(i => i.id === id ? { ...i, done: !i.done } : i));
    }
    remove(id) {
      this.items.update(list => list.filter(i => i.id !== id));
    }
  }

  Component({
    selector: 'app-root',
    template: `
      <div class="card">
        <h2>Packing list</h2>
        <p class="note">{{ left() }} of {{ items().length }} still to pack</p>

        <!-- #box names the input so the template can pass it to add() -->
        <form (submit)="add($event, box)">
          <input #box type="text" placeholder="Add an item" aria-label="New item">
          <button>Add</button>
        </form>

        <ul>
          @for (item of items(); track item.id) {
            <li [class.done]="item.done">
              <input type="checkbox" [id]="'i' + item.id" [checked]="item.done" (change)="toggle(item.id)">
              <label [for]="'i' + item.id">{{ item.name }}</label>
              <button class="x" (click)="remove(item.id)" aria-label="Remove">✕</button>
            </li>
          }
        </ul>

        @if (items().length && left() === 0) {
          <p class="all">All packed.</p>
        }
      </div>`,
  })(App);

  bootstrapApplication(App);
</script>
</body>
</html>