บทเรียน Angular

สิ่งที่คุณจะสร้าง

ฟอร์มติดต่อขนาดเล็ก — ช่องกรอกที่มีป้ายกำกับ, ปุ่มส่ง, การผูกข้อมูลสองทาง, พฤติกรรมของแป้นพิมพ์และโปรแกรมอ่านหน้าจอจริง — เริ่มจากแบบไม่ตกแต่งก่อน แล้วค่อยใส่สไตล์ ภายในประมาณ 10 นาที

ก่อนเริ่ม

คุณต้องมี git, Node 22 ขึ้นไป และ pnpm 10 ขึ้นไป โปรเจกต์ Angular 20 ใดก็ได้ — Angular CLI หรือ Analog

ขั้นที่ 1 — รับโค้ด

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-angular-headless
pnpm install
pnpm test        # vitest + TestBed, all 571 components
pnpm run build-storybook

คอมโพเนนต์เป็นไฟล์แบบแบนอยู่ใน components/ — Button.ts, TextInput.ts — แต่ละตัวเป็นคอมโพเนนต์ standalone ที่มีเทมเพลตแบบอินไลน์ พร้อม spec และ story ของมัน บาร์เรล index.ts ส่งออกคอมโพเนนต์ทุกตัวอีกครั้ง pnpm build สร้างบันเดิลในรูปแบบ Angular Package Format ผ่าน ng-packagr

ขั้นที่ 2 — คอมโพเนนต์แรกของคุณ

import { Component } from "@angular/core";
import { Button } from "@lilydesignsystem/angular-headless";

@Component({
  selector: "app-save-bar",
  standalone: true,
  imports: [Button],
  template: `<lily-button (click)="save()">Save</lily-button>`,
})
export class SaveBar {
  save() { console.log("saved"); }
}

คอมโพเนนต์ทุกตัวประกาศ selector lily-* และแสดงผลองค์ประกอบเชิงความหมายพร้อม class hook ของมัน — <button class="button" type="button"> ตรงนี้ ส่วนอินพุตอิงตามสัญญาณ: label() สำหรับ aria-label ใช้แทนที่, className() ใช้ต่อท้ายคลาส

ขั้นที่ 3 — ประกอบฟอร์มเล็ก ๆ

import { Component, signal } from "@angular/core";
import { Form, Field, TextInput, Button } from "@lilydesignsystem/angular-headless";

@Component({
  selector: "app-contact-form",
  standalone: true,
  imports: [Form, Field, TextInput, Button],
  template: `
    <lily-form label="Contact form" (submit)="handleSubmit($event)">
      <lily-field label="Full name" [required]="true">
        <lily-text-input id="name" label="Full name" [(value)]="name" />
      </lily-field>
      <lily-button type="submit">Save</lily-button>
    </lily-form>
  `,
})
export class ContactForm {
  name = signal("");
}

lily-field รับป้ายกำกับที่มองเห็นเป็น label อินพุตของตัวเอง แทนที่จะเป็นคอมโพเนนต์ป้ายกำกับที่ซ้อนอยู่ข้างใน — ส่งเพียงครั้งเดียวที่ฟิลด์ และ lily-text-inputที่ตรงกัน label ให้ชื่อที่เข้าถึงได้ คอมโพเนนต์ที่คล้ายอินพุตเปิดเผยค่า model() ดังนั้น banana-box [(value)] การผูกข้อมูลสองทางจึงใช้งานได้ทันที — เข้ากันได้กับ zoneless ตลอด

ขั้นที่ 4 — ใส่สไตล์

ใส่สไตล์ให้ class hook — .button, .text-input, .label, .field — ใน styles.cssหรือเพิ่มธีมสำเร็จรูปในอาร์เรย์ styles ใน angular.json / ลิงก์ไว้ใน index.html:

<link rel="stylesheet" href="/themes/adobe-spectrum.css" />

ขั้นที่ 5 — ดูทุกอย่างทำงาน

แอปตัวอย่าง Angular + Analog แสดงแคตตาล็อกทั้งหมดพร้อมการกำหนดเส้นทางตามไฟล์และ Vite:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-angular-examples
pnpm install && pnpm run dev

ขั้นต่อไป

• การกำหนดธีม — การสลับขณะรันไทม์ด้วยตัวช่วย theme-picker ของ Angular
• ตัวช่วยการตั้งค่า — ภาษาและขนาดตัวอักษร
• แคตตาล็อกคอมโพเนนต์ — props, ARIA และแป้นพิมพ์ของแต่ละคอมโพเนนต์

มีคำถามระหว่างทางไหม? หน้าช่วยเหลือ เต็มไปด้วยคำตอบ — และถ้าขั้นตอนไหนทำให้ชัดเจนกว่านี้ได้ บอกเรา แล้วเรายินดีปรับปรุงบทเรียน