Những điểm mới nổi bật ở Angular 16

Angular 16 đã ra mắt vào đầu tháng 5. Dưới đây là những cải tiến nổi bật ở Angular 16.

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

Angular phiên bản 16 giới thiệu những nội dung mới và cải tiến thú vị cho trải nghiệm lập trình cũng như đảm bảo độ ổn định và hiệu suất hoạt động của ứng dụng tốt hơn.

Angular Signals

Angular Signals là một thư viện, cho phép định nghĩa các giá trị phản ứng và thiết lập phần phụ thuộc giữa chúng. Đây là ví dụ đơn giản về cách dùng Angular Signals trong ứng dụng Angular.

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

Snippet code ở trên tạo một giá trị được tính toán tên fullName, dựa trên các signal firstName và lastName. Ngoài ra, nó còn xác định một hiệu ứng, một hàm callback chạy bất kỳ lúc nào giá trị của signal mà nó đọc thay đổi.

Trong trường hợp này, giá trị fullName phụ thuộc vào firstName và lastName, vì thế thay đổi một trong số chúng sẽ kích hoạt hiệu ứng này. Khi giá trị firstName được đặt sang John, trình duyệt ghi lại thông báo sau vào console:

Name changed: John Doe.

Bộ sưu tập Ng New độ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! Để thử bản xem trước sơ đồ độc lập dành cho lập trình viên, đảm bảo bạn đã cài Angular CLI v16 và chạy lệnh sau:

ng new --standalone

Bằng cách làm việc này, bạn sẽ có được một cấu trúc dự án đơn giản hơn mà không cần tới NgModules. Hơn nữa, toàn bộ trình tạo trong dự án sẽ cho lệnh, phần tử và pipe độc lập!

Ánh xạ Route Params tự động

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, truy vấn hoặc dữ liệu liên quan cho một URL cụ thể.

Đây là ví dụ về cách bạn làm việc này:

@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ố định tuyến khác nhau vì bạn có thể liên kết trực tiếp chúng với các trường nhập thành phần.

Để kích hoạt tính năng này trong ứng dụng dùng hệ thống mô đun, đặt giá trị tương ứng trong những lựa chọn RouterModule:

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

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

provideRoutes(routes, withComponentInputBinding());

Sau khi kích hoạt hàm này, thành phần đó trở nên đơn giản hơn:

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

Input bắt buộc

Một tính năng được khuyến khích dành cho cộng đồng Angular là đánh dấu các trường nhập cần thiết. Hiện tại, bạn phải dùng các phương pháp khác nhau để đạt được điều này, chẳng hạn như gây lỗi trong chu trình NgOnInit nếu biến không được xác định hay chỉnh sửa bộ chọn thành phần để bao gồm các trường nhập bắt buộc.

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

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

Vite là server phát triển

Angular 14 giới thiệu một gói JavaScript mới tên EsBuild, 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 sự thay đổi đó trong giai đoạn xây dựng, không phải phát triển với server lập trình.

Ở bản cập nhật sắp tới của Angular, công cụ build Vite cho phép sử dụng EsBuild trong suốt quá trình phát triển.

Để kích hoạt tính năng này, update cấu hình trình builder trong file angular.json như sau:

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

Lưu ý tính năng này vẫn đang trong quá trình thử nghiệm.

AngularJS 16 đã cập nhật những tính năng thú vị như Angular Singals để quản lý dữ liệu, tạo dự án độc lập, tự động ánh xạ route params, input bắt buộc và tích hợp Vite để cải thiện quá trình phát triển. Những nâng cấp này cải thiện trải nghiệm lập trình và tăng hiệu quả hoạt động của ứng dụng.