មេរៀន Angular

អ្វីដែលអ្នកនឹងសាងសង់

ទម្រង់ទំនាក់ទំនងតូចមួយ — វាលបញ្ចូលដែលមានស្លាក ប៊ូតុងដាក់ស្នើ ការចងពីរទិស អាកប្បកិរិយាក្តារចុច និងកម្មវិធីអានអេក្រង់ពិតប្រាកដ — ដំបូងទទេស្អាត បន្ទាប់មកមានរចនាប័ទ្ម ក្នុងរយៈពេលប្រហែល ១០ នាទី។

មុនពេលអ្នកចាប់ផ្តើម

អ្នកត្រូវការ git, Node 22 ឬថ្មីជាងនេះ និង pnpm 10 ឬថ្មីជាងនេះ។ គម្រោង Angular 20 ណាក៏បាន — Angular CLI ឬ Analog។

ជំហាន ១ — យកកូដ

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 — នីមួយៗជាសមាសភាគឯករាជ្យដែលមានគំរូក្នុងបន្ទាត់ បូក spec និង story របស់វា។ barrel index.ts នាំចេញឡើងវិញនូវសមាសភាគនីមួយៗ; pnpm build បង្កើតកញ្ចប់ Angular Package Format តាមរយៈ ng-packagr។

ជំហាន ២ — សមាសភាគដំបូងរបស់អ្នក

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

សមាសភាគនីមួយៗប្រកាស lily-* ឧបករណ៍ជ្រើស ហើយបង្ហាញធាតុន័យវិទ្យាជាមួយ class hook របស់វា — <button class="button" type="button"> នៅទីនេះ។ ធាតុបញ្ចូលផ្អែកលើ signal៖ label() សម្រាប់ aria-label ការបដិសេធ className() ដើម្បីបន្ថែមថ្នាក់។

ជំហាន ៣ — ផ្សំទម្រង់តូចមួយ

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 ពេញមួយ។

ជំហាន ៤ — ដាក់រចនាប័ទ្ម

ដាក់រចនាប័ទ្ម class hook — .button, .text-input, .label, .field — ក្នុង styles.cssឬបន្ថែមស្បែករួចជាស្រេចទៅអារេ styles ក្នុង angular.json / ភ្ជាប់វាក្នុង index.html:

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

ជំហាន ៥ — មើលអ្វីៗទាំងអស់ដំណើរការ

កម្មវិធីគំរូ 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

ជំហានបន្ទាប់

• ស្បែក — ការប្តូរពេលដំណើរការជាមួយជំនួយការ Angular theme-picker។
• ជំនួយការចំណូលចិត្ត — ភាសា និងទំហំអក្សរ។
• កាតាឡុកសមាសភាគ — លក្ខណៈសម្បត្តិ ARIA និងក្តារចុចសម្រាប់សមាសភាគនីមួយៗ។

មានសំណួរតាមផ្លូវ? ទំព័រជំនួយ ពេញដោយចម្លើយ — ហើយប្រសិនបើជំហានណាអាចច្បាស់ជាងនេះ ប្រាប់យើង ហើយយើងនឹងកែលម្អមេរៀនដោយអំណរ។