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 உடன். பேரல் index.ts ஒவ்வொரு கூறையும் மீண்டும் ஏற்றுமதி செய்கிறது; pnpm build ng-packagr வழியாக Angular Package Format தொகுப்பை உருவாக்குகிறது.

படி 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-* தேர்வியை அறிவித்து, அதன் வகுப்பு கொக்கியுடன் பொருள்தரு உறுப்பை வழங்குகிறது — <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 — பாணியிடுங்கள்

வகுப்புக் கொக்கிகளுக்குப் பாணியிடுங்கள் — .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

அடுத்த படிகள்

• தீம்கள் — Angular theme-picker உதவியாளருடன் இயங்கும் போதே மாற்றுதல்.
• விருப்ப உதவியாளர்கள் — மொழி மற்றும் உரை அளவு.
• கூறுப் பட்டியல் — ஒவ்வொரு கூறுக்கும் பண்புகள், ARIA மற்றும் விசைப்பலகை.

வழியில் கேள்விகளா? உதவிப் பக்கம் பதில்களால் நிறைந்தது — ஒரு படி இன்னும் தெளிவாக இருக்க முடிந்தால், எங்களிடம் சொல்லுங்கள் நாங்கள் மகிழ்ச்சியுடன் பயிற்சியை மேம்படுத்துவோம்.