Angularกำลังผ่านการปรับปรุงครั้งใหญ่ Web Framework ที่สร้างโดยGoogleและใช้TypeScriptกำลังเตรียมพร้อมสำหรับเวอร์ชัน 16ซึ่งจะมีสิ่งใหม่และน่าตื่นเต้นมากมาย ตัวอย่างเช่น จะทำให้ใช้การแสดงผลฝั่งเซิร์ฟเวอร์ ได้ง่ายขึ้น ซึ่งหมายถึงหน้าเว็บที่เร็วขึ้นและราบรื่นขึ้น นอกจากนี้ยังจะมีประสิทธิภาพรันไทม์ที่ดีขึ้น ซึ่งหมายถึงบั๊กและข้อขัดข้องที่น้อยลง

เวอร์ชัน 16ยังไม่ออก แต่คุณสามารถลองเวอร์ชันผู้สมัครรุ่นแรกได้แล้ว มีการเปลี่ยนแปลงมากกว่าเวอร์ชันหลักก่อนหน้านี้ (ยกเว้นการกระโดดจากAngularเป็นAngular 2 ) เชิงมุมมีความทันสมัยและทรงพลังมากขึ้น และเวอร์ชัน 16เป็นเพียงจุดเริ่มต้น ต่อไปนี้คือสิ่งดีๆ ที่คุณคาดหวังได้ในรุ่นนี้

เนื้อหา

• สัญญาณ: วิธีใหม่ในการจัดการการเปลี่ยนแปลงของรัฐ
• การแสดงผลฝั่งเซิร์ฟเวอร์: เร็วขึ้นและราบรื่นขึ้น
• ประสบการณ์นักพัฒนา: ดีขึ้นและง่ายขึ้น
• อินพุตส่วนประกอบที่จำเป็น
• API การดีบักการฉีดการพึ่งพา
• ปรับปรุงเอกสารและแผนผังสำหรับส่วนประกอบแบบสแตนด์อโลน
• การสำรวจตัวเลือกเพื่อปรับปรุงชุดรวม JavaScript ที่สร้างโดย Angular CLI
• คุณลักษณะและการปรับปรุงอื่น ๆ
• รองรับ Tailwind CSS
• รองรับการแยก CSS
• รองรับประเภทที่เชื่อถือได้ดั้งเดิม
• บทสรุป
• เรียนรู้เพิ่มเติม

หนึ่งในคุณสมบัติที่น่าตื่นเต้นที่สุดของ Angular 16คือการแนะนำสัญญาณ ซึ่งเป็นวิธีใหม่ในการจัดการการเปลี่ยนแปลงสถานะในแอปพลิเคชันเชิงมุม สัญญาณได้รับแรงบันดาลใจจากSolid.jsไลบรารี UI แบบรีแอคทีฟที่ใช้รูปแบบการกด/ดึงเพื่อสร้างกราฟค่ารีแอคทีฟ

สัญญาณคือฟังก์ชันที่ส่งคืนค่า ( get) และสามารถอัปเดตได้โดยการเรียกใช้ค่าใหม่ ( set) สัญญาณยังสามารถขึ้นอยู่กับสัญญาณอื่น ๆ สร้างกราฟค่าปฏิกิริยาที่จะอัปเดตโดยอัตโนมัติเมื่อการอ้างอิงใด ๆ เปลี่ยนแปลง สัญญาณสามารถใช้กับRxJSสิ่งที่สังเกตได้ซึ่งยังคงรองรับในAngular 16เพื่อสร้างกระแสข้อมูลที่มีประสิทธิภาพและประกาศได้

สัญญาณนำเสนอข้อดีหลายประการเหนือกลไกการตรวจจับการเปลี่ยนแปลงแบบดั้งเดิมในAngularซึ่งอาศัยZone.jsAPI ของเบราว์เซอร์ Monkey-Patch และทริกเกอร์การตรวจจับการเปลี่ยนแปลงทั่วโลก สัญญาณอนุญาตให้คุณเรียกใช้การตรวจจับการเปลี่ยนแปลงเฉพาะในส่วนประกอบที่ได้รับผลกระทบ โดยไม่ต้องข้ามโครงสร้างส่วนประกอบทั้งหมดหรือZone.jsใช้ สิ่งนี้ช่วยปรับปรุงประสิทธิภาพรันไทม์และลดความซับซ้อน

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

นี่คือตัวอย่างที่เป็นไปได้ของการใช้สัญญาณใน Angular 16:

// Import the createSignal function
import { createSignal } from '@angular/core';

// Create a component that uses signals
@Component({
  selector: 'app-counter',
  template: `
    <h1>{{ count }}</h1>
    <button (click)="increment()">+</button>
    <button (click)="decrement()">-</button>
  `
})
export class CounterComponent {
  // Create a signal instance for the count value
  count = createSignal(0);

  // Increment the count value by calling the next method on the signal
  increment() {
    this.count.next(this.count.value + 1);
  }

  // Decrement the count value by calling the next method on the signal
  decrement() {
    this.count.next(this.count.value - 1);
  }
}

การปรับปรุงที่สำคัญอีกประการในAngular 16คือการรองรับการไฮเดรชั่นแบบไม่ทำลายซึ่งทำให้การแสดงผลฝั่งเซิร์ฟเวอร์ (SSR)เร็วขึ้นและราบรื่นขึ้น SSRเป็นเทคนิคที่แสดงผลแอปพลิเคชันของคุณบนเซิร์ฟเวอร์ และส่งเนื้อหา HTML ไปยังเบราว์เซอร์ ซึ่งจะถูกแปลงเป็นหน้าเว็บแบบโต้ตอบและทำงานได้อย่างสมบูรณ์โดยแนบลักษณะการทำงานของ JavaScript และตัวฟังเหตุการณ์

SSR ลดเวลาในการโต้ตอบ (TTI) และปรับปรุง SEO และการเข้าถึง SSR มีอยู่ในเฟรมเวิร์กเช่น React หรือ Next.js มาระยะหนึ่งแล้ว แต่มันไม่ง่ายเลยที่จะนำไปใช้ใน Angular ใน Angular 16 จะรองรับ SSR ทันที ทำให้แอปพลิเคชัน SSR เร็วขึ้นและราบรื่นขึ้น

ไฮเดรชันแบบไม่ทำลายหมายความว่าเบราว์เซอร์จะไม่เขียนทับหรือลบเนื้อหาหรือแอตทริบิวต์ HTML ที่มีอยู่ใดๆ เมื่อไฮเดรชันแอปพลิเคชัน วิธีนี้จะรักษาการเพิ่มประสิทธิภาพหรือการปรับแต่งฝั่งเซิร์ฟเวอร์ที่คุณอาจนำไปใช้กับเนื้อหา HTML ของคุณ ไฮเดรชั่นแบบไม่ทำลายยังช่วยหลีกเลี่ยงความขัดแย้งหรือข้อผิดพลาดที่อาจเกิดขึ้นจากเนื้อหา HTML ที่ไม่ตรงกันระหว่างเซิร์ฟเวอร์และไคลเอนต์

ประสบการณ์นักพัฒนา: ดีขึ้นและง่ายขึ้น

นอกจากนี้ Angular 16 ยังแนะนำคุณสมบัติใหม่และการปรับปรุงบางอย่างที่ปรับปรุงประสบการณ์ของนักพัฒนาและคุณภาพรหัสของแอปพลิเคชันเชิงมุม คุณลักษณะบางอย่างเหล่านี้ได้แก่:

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

@Component({})
class HomeComponent {
  @Input({required: true}) someRequiredInput;
}

// Import the DebugInjector interface
import { DebugInjector } from '@angular/core';

// Inject the DebugInjector service in the constructor
constructor(private debugInjector: DebugInjector) {}
// Use the DebugInjector service to get information about the dependencies
ngOnInit() {
  // Get the provider for a token
  const provider = this.debugInjector.getProvider(MyService);
  // Get the injector for a token
  const injector = this.debugInjector.getInjector(MyService);
  // Get the scope for a token
  const scope = this.debugInjector.getScope(MyService);
  // Get the instance for a token
  const instance = this.debugInjector.getInstance(MyService);
  // Simulate a different scenario for a token
  this.debugInjector.simulate(MyService, {
    // Provide a different value for the token
    value: new MyService('test'),
    // Override the scope for the token
    scope: 'root',
    // Override the injector for the token
    injector: this.debugInjector.createInjector([MyService])
  });
  // Reset the simulation for a token
  this.debugInjector.reset(MyService);
}

• ปรับปรุงเอกสารและแผนผังสำหรับส่วนประกอบแบบสแตนด์อโลน : คุณลักษณะนี้ช่วยปรับปรุงเอกสารและแผนผังสำหรับการสร้างส่วนประกอบแบบสแตนด์อโลนในแอปพลิเคชันเชิงมุม ส่วนประกอบแบบสแตนด์อโลนคือส่วนประกอบที่ไม่ได้อยู่ในโมดูลใดๆ และสามารถใช้ได้ทุกที่ในแอปพลิเคชันของคุณ ส่วนประกอบแบบสแตนด์อโลนมีประโยชน์สำหรับการสร้างองค์ประกอบ UI หรือไลบรารีที่ใช้ซ้ำได้
• สำรวจตัวเลือกเพื่อปรับปรุงชุดรวม JavaScript ที่สร้างโดย Angular CLI : ฟีเจอร์นี้สำรวจตัวเลือกต่างๆ เพื่อปรับชุดรวม JavaScript ที่สร้างโดย Angular CLI ให้เหมาะสม เช่น การใช้โมดูล ES การเขย่าต้นไม้ การแยกโค้ด หรือการโหลดส่วนต่าง ตัวเลือกเหล่านี้มีเป้าหมายเพื่อลดขนาดบันเดิลและปรับปรุงประสิทธิภาพการโหลดของแอปพลิเคชันเชิงมุม

Angular 16ยังเพิ่มคุณสมบัติและการปรับปรุงอื่น ๆ ที่ปรับปรุงการทำงานและการใช้งานของเฟรมเวิร์ก คุณลักษณะบางอย่างเหล่านี้ได้แก่:

• รองรับ Tailwind CSS : Tailwind CSSเป็นเฟรมเวิร์ก CSS แบบยูทิลิตี้ตัวแรกที่ได้รับความนิยม ซึ่งช่วยให้คุณจัดรูปแบบคอมโพเนนต์ด้วยคลาสแทนการเขียน CSS ที่กำหนดเอง Tailwind CSSให้ประโยชน์มากมาย เช่น การพัฒนาที่เร็วขึ้น การออกแบบที่สอดคล้องกัน การออกแบบที่ตอบสนอง การปรับแต่ง และความสามารถในการขยาย Angular 16 รองรับ Tailwind CSSตั้งแต่แกะกล่อง ทำให้ใช้งานในโครงการเชิงมุมได้ง่าย
• รองรับการแยก CSS : การแยก CSS เป็นคุณสมบัติที่ช่วยให้คุณกำหนดขอบเขตสไตล์คอมโพเนนต์ของคุณเพื่อป้องกันไม่ให้รั่วไหลหรือขัดแย้งกับสไตล์อื่นๆ การแยก CSS ทำได้โดยใช้ DOM เงาหรือการจำลองการห่อหุ้ม Angular 16 รองรับทั้งสองตัวเลือกและให้คุณเลือกตัวเลือกที่เหมาะกับความต้องการของคุณ

// Import the ViewEncapsulation enum
import { Component, ViewEncapsulation } from '@angular/core';

// Create a component that uses shadow DOM for CSS isolation
@Component({
  selector: 'app-shadow',
  template: `
    <h1>Shadow DOM</h1>
    <p>This component uses shadow DOM for CSS isolation.</p>
  `,
  styles: [`
    h1 {
      color: blue;
    }
  `],
  // Set the encapsulation property to ViewEncapsulation.ShadowDom
  encapsulation: ViewEncapsulation.ShadowDom
})
export class ShadowComponent {}
// Create a component that uses emulated encapsulation for CSS isolation
@Component({
  selector: 'app-emulated',
  template: `
    <h1>Emulated Encapsulation</h1>
    <p>This component uses emulated encapsulation for CSS isolation.</p>
  `,
  styles: [`
    h1 {
      color: red;
    }
  `],
  // Set the encapsulation property to ViewEncapsulation.Emulated (default value)
  encapsulation: ViewEncapsulation.Emulated
})
export class EmulatedComponent {}

• รองรับ Trusted Types แบบเนทีฟ : Trusted Types เป็นคุณสมบัติของเบราว์เซอร์ที่ช่วยป้องกัน การโจมตี แบบ cross-site scripting (XSS)โดยบังคับใช้กฎที่เข้มงวดเกี่ยวกับวิธีใช้สตริงในบริบทที่ละเอียดอ่อน Trusted Typesสามารถป้องกันการเรียกใช้โค้ดอันตรายได้โดยการฆ่าเชื้อหรือปฏิเสธสตริงที่ไม่ปลอดภัย Angular 16 รองรับ Trusted Typesดั้งเดิมและนำไปใช้กับเทมเพลตและนิพจน์ของคุณโดยอัตโนมัติ

// Import the createTrustedHTML function
import { createTrustedHTML } from '@angular/core';

// Create a component that uses Trusted Types
@Component({
  selector: 'app-hello',
  template: `
    <div [innerHTML]="message"></div>
  `
})
export class HelloComponent {
  // Create a trusted HTML value using the createTrustedHTML function
  message = createTrustedHTML('<h1>Hello, world!</h1>');
  // Alternatively, use the safevalues library to create trusted values
  // import { createHtml } from 'safevalues/implementation/html_impl';
  // message = createHtml('<h1>Hello, world!</h1>');
}

ตัวอย่างเช่น แทนที่จะเขียนสิ่งนี้:

// Import the ActivatedRoute service
import { ActivatedRoute } from '@angular/router';

// Inject the ActivatedRoute service in the constructor
constructor(private route: ActivatedRoute) {}

// Use the ActivatedRoute service to get the router data
ngOnInit() {
  // Get the route params
  this.route.params.subscribe(params => {
    // Do something with params
  });

  // Get the route data
  this.route.data.subscribe(data => {
    // Do something with data
  });

  // Get the query params
  this.route.queryParams.subscribe(queryParams => {
    // Do something with queryParams
  });

  // Get the fragment
  this.route.fragment.subscribe(fragment => {
    // Do something with fragment
  });

  // Get the url
  this.route.url.subscribe(url => {
    // Do something with url
  });
}

// Define the component inputs for the router data
@Input() params: Params;
@Input() data: Data;
@Input() queryParams: Params;
@Input() fragment: string;
@Input() url: UrlSegment[];

// Use the component inputs to get the router data
ngOnInit() {
  // Do something with params
  // Do something with data
  // Do something with queryParams
  // Do something with fragment
  // Do something with url
}

// Import the RouterModule and Routes
import { RouterModule, Routes } from '@angular/router';

// Define the routes for the application
const routes: Routes = [
  // Use dynamic imports to load modules lazily
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
  },
  {
    path: 'about',
    loadChildren: () => import('./about/about.module').then(m => m.AboutModule)
  },
  {
    path: 'contact',
    loadChildren: () => import('./contact/contact.module').then(m => m.ContactModule)
  }
];

// Import the modules for the application
@NgModule({
  imports: [
    // Use the RouterModule.forRoot method to register the routes and enable bindToComponentInputs option
    RouterModule.forRoot(routes, { bindToComponentInputs: true })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

บทสรุป

Angular 16เป็นการอัปเดตครั้งใหญ่ที่นำการปรับปรุงและฟีเจอร์ใหม่ๆ มาสู่เฟรมเวิร์ก Angular 16ถูกตั้งค่าให้ปฏิวัติการจัดการสถานะด้วยสัญญาณ ด้วยประสบการณ์ของนักพัฒนาที่ได้รับการปรับปรุงและความชุ่มชื้นตามธรรมชาติของแอปพลิเคชันการเรนเดอร์ฝั่งเซิร์ฟเวอร์ นักพัฒนาจะมีความยืดหยุ่นมากขึ้นในการสร้างอินเทอร์เฟซผู้ใช้ที่น่าสนใจ

คุณสมบัติอื่น ๆ ที่Google อ้างถึง สำหรับAngular 16ได้แก่ การทบทวนโมเดลปฏิกิริยาของ Angular อีกครั้งและการเลือกZone.jsตัวเลือกเพื่อปรับปรุงประสิทธิภาพรันไทม์ การแนะนำ API การดีบักการฉีดขึ้นต่อกัน การปรับปรุงเอกสารและแผนผังสำหรับส่วนประกอบแบบสแตนด์อโลน สำรวจตัวเลือกเพื่อปรับปรุงชุดรวม JavaScript ที่สร้างโดย Angular CLI และเอกสาร การปรับโครงสร้างใหม่

เรียนรู้เพิ่มเติม