Oideachadh Angular

Na thogas tu

Foirm fios-thugainn bheag — in-chur le leubail, putan cur-a-steach, ceangal dà-shlighe, giùlan clàr-iuchrach is leughadair-sgrìn fìor — an toiseach lom, an uairsin le stoidhle, ann an timcheall air 10 mionaidean.

Mus tòisich thu

Feumaidh tu git, Node 22 no nas ùire, agus pnpm 10 no nas ùire. Obraichidh pròiseact Angular 20 sam bith — Angular CLI no Analog.

Ceum 1 — Faigh an còd

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

Tha na co-phàirtean nam faidhlichean rèidh ann an components/ — Button.ts, TextInput.ts — gach fear na cho-phàirt fèin-sheasmhach le teamplaid inline, a bharrachd air a spec agus story. Bidh am barrel index.ts ag ath-às-phortadh gach co-phàirt; pnpm build a’ dèanamh bundle Angular Package Format tro ng-packagr.

Ceum 2 — A’ chiad cho-phàirt agad

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

Bidh gach co-phàirt a’ cur an cèill lily-* roghnaiche agus a’ reandaradh na h-eileamaid sheamantaich le a crochadh clas — <button class="button" type="button"> an seo. Tha na in-chuiridhean stèidhichte air comharran: label() airson aria-label tar-sgrìobhadh, className() gus clasaichean a chur ris.

Ceum 3 — Cuir foirm bheag ri chèile

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 a’ gabhail an leubail lèirsinneach mar an label in-chur fhèin seach co-phàirt leubail neadaichte — thoir seachad e aon turas, air an raon, agus lily-text-inputa tha a’ maidseadh label a’ solarachadh an ainm so-ruigsinneach. Bidh co-phàirtean coltach ri in-chur a’ nochdadh model() luachan, agus mar sin obraichidh ceangal dà-shlighe banana-box [(value)] dìreach — co-chòrdail ri zoneless air fad.

Ceum 4 — Cuir stoidhle air

Cuir stoidhle air na crochaidhean clas — .button, .text-input, .label, .field — ann an styles.css, no cuir ùrlar deiseil ris an t-sreath styles ann an angular.json / ceangail e ann an index.html:

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

Ceum 5 — Faic a h-uile càil ag obair

Tha an tagradh eisimpleir Angular + Analog a’ sealltainn an catalog slàn le slighe-lìn stèidhichte air faidhle agus Vite:

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

Na ceumannan a leanas

• Ùrlaran — atharrachadh aig àm ruith leis a’ chuideachadh theme-picker Angular.
• Cuideachaidhean roghainnean — cànan agus meud teacsa.
• Catalog cho-phàirtean — props, ARIA, agus clàr-iuchrach airson gach co-phàirt.

Ceistean air an t-slighe? Tha an duilleag chuideachaidh làn fhreagairtean — agus nam b’ urrainn ceum a bhith nas soilleire, innis dhuinn agus nì sinn an t-oideachadh nas fheàrr le toileachas.