ฟีเจอร์ใหม่ใน Angular 19

Angular 19 ได้เปิดตัวอย่างเป็นทางการเมื่อวันที่ 5 ธันวาคม 2024 พร้อมกับฟีเจอร์ใหม่ที่ช่วยให้การพัฒนาแอปพลิเคชันใน Angular ทำได้รวดเร็วและมีประสิทธิภาพมากขึ้น ไม่ว่าจะเป็นการจัดการสถานะ, ปรับปรุง Dependency Injection, หรือการเรนเดอร์หน้าเว็บที่ดีขึ้น

บทความนี้จะพาไปดูฟีเจอร์ที่สำคัญใน Angular 19 พร้อมตัวอย่างโค้ด

1. Standalone Components: ลดความซับซ้อนในการใช้งาน

หนึ่งในฟีเจอร์ที่สำคัญที่สุดใน Angular 19 คือการใช้งาน Standalone Components ซึ่งช่วยให้คุณไม่ต้องพึ่งพา NgModules อีกต่อไป เมื่อใช้ Standalone Components คุณจะสามารถสร้างและใช้งานคอมโพเนนต์ได้โดยไม่ต้องมีโมดูลแยกต่างหาก ซึ่งทำให้โค้ดของคุณสะอาดและลดความยุ่งยากในการจัดการ

ตัวอย่างการสร้าง Standalone Component

ng generate component header --standalone

โค้ดตัวอย่าง

import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  standalone: true,
  template: `<h1>Welcome to Angular 19</h1>`,
})
export class HeaderComponent {}

2. Signal APIs: การจัดการสถานะที่ง่ายและมีประสิทธิภาพ

Signal APIs ใหม่ใน Angular 19 ช่วยให้การจัดการสถานะในแอปพลิเคชันง่ายขึ้น ลดความซับซ้อนในการตรวจจับการเปลี่ยนแปลงของสถานะ และปรับปรุงประสิทธิภาพโดยรวมของแอป

ตัวอย่างการใช้ Signals

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <p>Counter: {{ counter() }}</p>
    <button (click)="increment()">Increment</button>
  `,
})
export class CounterComponent {
  counter = signal(0);

  increment() {
    this.counter.set(this.counter() + 1);
  }
}

3. SSR และ Incremental Hydration: ปรับปรุงการเรนเดอร์บนฝั่งเซิร์ฟเวอร์

Angular 19 มาพร้อมกับฟีเจอร์ Incremental Hydration ที่ช่วยให้การเรนเดอร์บนฝั่งเซิร์ฟเวอร์ (SSR) เร็วขึ้น โดยการทำให้บางส่วนของหน้าเว็บสามารถทำงานได้ทันทีโดยไม่ต้องรอให้ทั้งแอปพลิเคชันทำการ hydration เสร็จสมบูรณ์

ตัวอย่างการใช้งาน Incremental Hydration

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { withIncrementalHydration } from '@angular/platform-server';

bootstrapApplication(AppComponent, {
  providers: [withIncrementalHydration()]
});

4. Event Replay: เก็บการโต้ตอบของผู้ใช้แม้ในขณะที่แอปโหลดช้า

การใช้ Event Replay จะช่วยให้การโต้ตอบของผู้ใช้ในระหว่างการโหลดแอปไม่สูญหาย โดยสามารถทำให้การโต้ตอบที่ผู้ใช้ทำระหว่างการโหลดแอปพลิเคชันนั้นถูกบันทึกและนำกลับมาใช้ได้เมื่อการโหลดแอปเสร็จสมบูรณ์

ตัวอย่างการใช้ Event Replay

import { provideClientHydration, withEventReplay } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [provideClientHydration(withEventReplay())]
});

5. การปรับปรุง Dependency Injection (DI): เพิ่มความปลอดภัยและสะดวกสบาย

Angular 19 ได้ปรับปรุงระบบ Dependency Injection (DI) ด้วยการใช้ Type Inference ซึ่งทำให้การประกาศตัวแปรในคอนสตรัคเตอร์สะดวกและปลอดภัยมากขึ้น

ตัวอย่าง DI แบบใหม่

constructor(private readonly httpClient) {}

Angular จะคาดเดาประเภทของตัวแปรอัตโนมัติ เช่น HttpClient ในตัวอย่างนี้

6. การเพิ่มประสิทธิภาพในการสร้างแอปพลิเคชัน

Angular 19 ยังมีการปรับปรุงการ code-splitting และ tree-shaking ที่ดีขึ้น ทำให้ขนาดของแอปพลิเคชันเล็กลงและการโหลดแอปทำได้เร็วขึ้น

ตัวอย่างการสร้างแอปพลิเคชันในโหมดโปรดักชัน

ng build --configuration production

7. การอัปเดต Angular Material Components

Angular Material ในเวอร์ชันนี้ได้มีการปรับปรุงในด้านต่างๆ เช่น การปรับปรุง mat-menu และ mat-select เพื่อให้ใช้งานได้ง่ายและมีประสิทธิภาพมากขึ้น

ตัวอย่างการใช้งาน mat-menu

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
  <button mat-menu-item>Item 3</button>
</mat-menu>

สรุป

Angular 19 นำฟีเจอร์ใหม่ๆ ที่สำคัญ เช่น Standalone Components, Signal APIs, SSR และ Incremental Hydration, และการปรับปรุงใน Dependency Injection