Có gì mới trong góc v16?

Angular, được duy trì bởi Google, là một framework mã nguồn mở được sử dụng rộng rãi để phát triển các ứng dụng web. Nó cung cấp cho bạn một bộ công cụ mạnh mẽ và một loạt các tính năng cho phép bạn tạo các ứng dụng web động, đáp ứng nhanh và có thể mở rộng.

Sự ra mắt gần đây của Angular phiên bản 16 giới thiệu các bản cập nhật và cải tiến thú vị cho trải nghiệm phát triển, cũng như hiệu suất và tính ổn định của ứng dụng tốt hơn.

1. Tín hiệu góc

Tín hiệu góc là một thư viện cho phép định nghĩa các giá trị phản ứng và thiết lập các phụ thuộc giữa chúng. Đây là một ví dụ đơn giản về cách sử dụng Tín hiệu góc trong ứng dụng Góc:

 @Component ({
   selector: 'my-app',
   standalone: true,
   template: `
{{ fullName() }} <button (click)="setName('John')">Click</button>
`,
})
export class App {
   firstName = signal('Jane');
   lastName = signal('Doe');
   fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
   constructor() {
       effect(() => console.log('Name changed:', this.fullName()));
   }
   setName(newName: string) {
       this.firstName.set(newName);
   }
} 

Đoạn mã trên tạo một giá trị được tính toán gọi là fullName, giá trị này dựa trên các tín hiệu FirstName và LastName. Ngoài ra, nó xác định một hiệu ứng, một chức năng gọi lại chạy bất cứ khi nào giá trị của các tín hiệu mà nó đọc thay đổi.

Trong trường hợp này, giá trị fullName phụ thuộc vào FirstName và lastName, do đó, việc thay đổi một trong hai giá trị này sẽ kích hoạt hiệu ứng. Khi giá trị của firstName được đặt thành John, trình duyệt sẽ ghi thông báo sau vào bảng điều khiển:

  Name changed: John Doe. 

2. Bộ sưu tập mới Ng độc lập

Bắt đầu từ Angular v16, bạn có thể tạo các dự án độc lập mới ngay từ đầu! Để dùng thử bản xem trước dành cho nhà phát triển của sơ đồ độc lập, hãy đảm bảo rằng bạn đã cài đặt Angular CLI v16 và chạy lệnh sau:

 ng new --standalone 

Bằng cách này, bạn sẽ có được cấu trúc dự án đơn giản hơn mà không cần bất kỳ NgModule nào. Hơn nữa, tất cả các trình tạo trong dự án sẽ tạo ra các chỉ thị, thành phần và đường ống độc lập!

3. Lập bản đồ tham số tuyến đường tự động

Hãy xem xét một cấu hình định tuyến như sau:

 export const routes: Routes = [{
   path: 'search:/id',
   component: SearchComponent,
   resolve: {
       searchDetails: searchResolverFn
   }
}];
 

Trước Angular 16, bạn cần thêm dịch vụ ActivatedRoute để truy xuất các tham số URL, tham số truy vấn hoặc dữ liệu liên quan cho một URL cụ thể.

Đây là một ví dụ về cách bạn phải làm điều đó:

 @Component({
   ...
})
export class SearchComponent {
   readonly #activatedRoute = inject(ActivatedRoute);
   readonly id$ = this.#activatedRoute.paramMap(map(params => params.get('id')));
   readonly data$ = this.#activatedRoute.data.map(({
       searchDetails
   }) => searchDetails);
} 

Với Angular 16, bạn không còn cần phải thêm dịch vụ ActivatedRoute để truy xuất các tham số tuyến đường khác nhau vì bạn có thể liên kết chúng trực tiếp với các đầu vào thành phần.

Để kích hoạt chức năng này trong một ứng dụng sử dụng hệ thống mô-đun, hãy đặt giá trị tương ứng trong các tùy chọn RouterModule:

 RouterModule.forRoot(routes, {
   bindComponentInputs: true
})
 

Đối với một ứng dụng độc lập, thay vào đó, bạn cần gọi một hàm:

 provideRoutes(routes, withComponentInputBinding()); 

Khi bạn kích hoạt chức năng này, thành phần này sẽ trở nên đơn giản hơn nhiều:

 @Component({
   ...
})
export class SearchComponent {
   @Input() id!: string;
   @Input() searchDetails!: SearchDetails;
} 

4. Đầu vào bắt buộc

Một tính năng rất được mong đợi đối với cộng đồng Angular là khả năng đánh dấu một số đầu vào nhất định theo yêu cầu. Cho đến bây giờ, bạn phải sử dụng nhiều cách giải quyết khác nhau để đạt được điều này, chẳng hạn như gây ra lỗi trong vòng đời NgOnInit nếu biến không được xác định hoặc sửa đổi bộ chọn của thành phần để bao gồm các đầu vào bắt buộc.

Tuy nhiên, cả hai giải pháp này đều có ưu điểm và nhược điểm. Bắt đầu từ phiên bản 16, yêu cầu đầu vào đơn giản như cung cấp một đối tượng cấu hình trong siêu dữ liệu của chú thích đầu vào:

 @Input({
   required: true
}) name!: string;
 

5. Mời làm Máy chủ Dev

Angular 14 đã giới thiệu một gói JavaScript mới có tên là EsBuild, giúp cải thiện đáng kể thời gian xây dựng khoảng 40%. Tuy nhiên, bạn chỉ có thể nhận ra mức tăng hiệu suất này trong giai đoạn xây dựng chứ không phải trong quá trình phát triển với máy chủ nhà phát triển.

Trong bản phát hành sắp tới của Angular, công cụ xây dựng Vite cũng cho phép sử dụng EsBuild trong quá trình phát triển.

Để kích hoạt tính năng này, hãy cập nhật cấu hình trình tạo trong tệp angular.json như sau:

 "architect": {
   "build": {
       "builder": "@angular-devkit/build-angular:browser-esbuild",
       "options": {
           ...
       }
   } 

Xin lưu ý rằng chức năng này vẫn đang thử nghiệm.

Nâng cao kinh nghiệm và hiệu suất phát triển

Phiên bản góc 16 mang đến các bản cập nhật thú vị như Tín hiệu góc để quản lý dữ liệu, tạo dự án độc lập, ánh xạ tham số tuyến đường tự động, đầu vào bắt buộc và tích hợp Vite để phát triển được cải thiện. Những cải tiến này cải thiện trải nghiệm phát triển và tăng hiệu suất ứng dụng.