ບົດສອນ 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 — ແຕ່ລະອັນເປັນອົງປະກອບເອກະລາດທີ່ມີແມ່ແບບໃນແຖວ, ບວກ spec ແລະ story ຂອງມັນ. barrel 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"); }
}

ທຸກອົງປະກອບປະກາດ lily-* ຕົວເລືອກ ແລະສະແດງອົງປະກອບທີ່ມີຄວາມໝາຍດ້ວຍ class hook ຂອງມັນ — <button class="button" type="button"> ທີ່ນີ້. Inputs ອີງຕາມ signal: 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 input ຂອງຕົນເອງ ແທນທີ່ຈະເປັນອົງປະກອບປ້າຍທີ່ຊ້ອນກັນ — ສົ່ງຜ່ານຄັ້ງດຽວ, ທີ່ຊ່ອງ, ແລະ lily-text-inputທີ່ກົງກັນໃນ label ໃຫ້ຊື່ທີ່ເຂົ້າເຖິງໄດ້. ອົງປະກອບຄ້າຍ input ເປີດເຜີຍ model() ຄ່າ, ດັ່ງນັ້ນ banana-box [(value)] ການຜູກສອງທາງກໍເຮັດວຽກທັນທີ — ເຂົ້າກັນໄດ້ກັບ zoneless ຕະຫຼອດ.

ຂັ້ນຕອນ 4 — ໃສ່ຮູບແບບ

ໃສ່ຮູບແບບ class hook — .button, .text-input, .label, .field — ໃນ styles.css, ຫຼືເພີ່ມຮູບແບບສີສັນສຳເລັດຮູບໃສ່ array 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

ຂັ້ນຕອນຕໍ່ໄປ

• ຮູບແບບສີສັນ — ການສະຫຼັບຕອນແລ່ນດ້ວຍຕົວຊ່ວຍ Angular theme-picker.
• ຕົວຊ່ວຍການຕັ້ງຄ່າ — ພາສາ ແລະຂະໜາດຕົວອັກສອນ.
• ແຄັດຕາລັອກອົງປະກອບ — ຄຸນສົມບັດ, ARIA ແລະແປ້ນພິມຕໍ່ອົງປະກອບ.

ມີຄຳຖາມລະຫວ່າງທາງບໍ? ໜ້າຊ່ວຍເຫຼືອ ເຕັມໄປດ້ວຍຄຳຕອບ — ແລະຖ້າຂັ້ນຕອນໃດຊັດເຈນຂຶ້ນໄດ້, ບອກພວກເຮົາ ແລະພວກເຮົາຍິນດີປັບປຸງບົດສອນ.