Angular 12 - Bản tóm tắt Angular v12 | Angular 2021 [Mới Nhất]
Channel: Quá Nhanh Coding Music
Date: 2021-08-12

#AngularQuaNhanh #QuaNhanh Xin chào Việt Nam, tôi là Quá Nhanh từ kênh lập trình Angular đây. Và hôm nay chúng ta sẽ nói về: Angular 12, phiên bản mới nhất năm 2021.

Vâng, tôi biết là các bạn rất vui mừng khi được chia sẻ những cập nhật này. Chúng ta vào ngay thôi.

Angular 12 có một số tính năng khá là hay ho.

1. Nullish Coalescing.

Nullish coalescing đã được tích hợp trong phiên bản mới nhất của Angular. Chúng ta có thể viết code rõ ràng hơn trong template. Cụ thể ở đây là trường hợp sử dụng các điều kiện kiểm tra null và undefined.

Trước khi có Angular 12, ta cần kiểm tra 2 điều kiện khác null và khác undefined.

Bây giờ, bạn có thể biến một biểu thức phức tạp thành đơn giản với cấu trúc 2 dấu ? (hỏi chấm).

Trông thật ngon nghẻ phải không các bạn!

Ngắn gọn và dễ đọc hơn.
Chắc chắn hãy thử cái này nhé!

2. Style Update.

Tiếp theo, hãy nói về style. Dĩ nhiên, không phải phong cách quần áo.

Hãy cùng tôi đến với một số cập nhật về style của Angular 12.

2.1. Inline Sass.

Các developer hiện có thể sử dụng inline Sass trong trường Styles trên  a còng com-pâu- nừn  đi-co-rây-tơ.

Tôi nghĩ rằng đây là 1 thay đổi tuy nhỏ nhưng vô cùng tuyệt vời với Sass.

Đối với những bạn chưa biết Sass là gì, thì hãy hình dung như thế này. SASS cũng là css, nhưng ta có thể tạo các biến stylesheet. Điều này giúp việc tùy chỉnh giao diện linh hoạt hơn.

Để sử dụng sức mạnh mới này trong các project đã tạo, hãy thêm thuộc tính inlineStyleLanguage vào angular.json.

Khi bạn đã update Angular cli lên phiên bản 12, Các project mới sẽ có hỗ trợ cho inline scss mặc định. Các bạn không cần import vào angular.json.

2.2. TailWind css.

Trong bản phát hành v11.2, Angular đã thêm hỗ trợ cho Tailwind CSS. Để bắt đầu sử dụng nó trong các project, ta tiến hành cài tailwind css package từ npm. Sau đó khởi tạo Tailwind để tạo tailwind.config.js trong dự án của bạn.

Một funfact thú vị về TailWind. Đây cũng là tên một dòng giày của Nike. Điều này khiến chúng ta nghĩ ngay đến Bootstrap (1 framework css phổ biến cũng được đặt tên theo 1 bộ phận của chiếc giày).

2.3. Hệ thống mô-đun mới của Sass.

Angular CDK và Angular Material đã áp dụng nội bộ hệ thống mô-đun mới của Sass. Nếu bạn đang sử dụng Angular CDK hoặc Angular Material, bạn sẽ cần tạo một số
cập nhật cho các dự án của bạn.
Gói node-sass sẽ không còn được duy trì và không còn được bổ sung tính năng mới nữa. Thay vào đó là sass npm.

2.4. Thư viện API mới.

Nói về Angular CDK và Angular Material, đã có thư viện API Sass mới. Để sử dụng thư viện này thì ta sẽ khai báo với cú pháp @use. Về mặt tính năng, thư viện mới không có gì thay đổi. Nhưng tên hàm sẽ có ý gợi nhớ hơn, và phần nhập liệu sẽ linh hoạt hơn.

Để cập nhật, ta sử dụng ng update. Câu lệnh này sẽ cấu trúc lại bất kỳ câu lệnh nhập Sass nào cho Angular CDK và Angular Material.
Hãy xem tại https://material.angular.io/guides để tham khảo ví dụ cũng như hướng dẫn cập nhật chi tiết.

3. ng build.

Khi chạy lệnh ng build, mặc định sẽ là production. Các bạn sẽ không cần gán cờ --prod nữa! Điều này giúp ta tiết kiệm thời gian ở một số bước. Ngoài ra, nó còn giúp ngăn chặn các bản build developer sinh ra trong production!

Lưu ý, project tạo mới sau khi cập nhật Angular lên phiên bản 12 thì mới có tính năng này. Nếu bạn muốn sử dụng các tính năng mới này trong các project cũ, hãy sử dụng câu lệnh sau:

ng update @angular/cli — migrate-only production-by-default

4. Webpack 5.

Webpack 5 hiện đã sẵn sàng trên bản Angular mới này,
Trong bản cập nhật v11, chúng ta đã được trải nghiệm Webpack 5. Với Angular 12, chúng ta sẽ được sử dụng chính thức webpack 5.

Webpack 5 là gì nhỉ? Tôi cũng không biết nữa. Có lẽ, tôi sẽ tìm hiểu và làm 1 video về webpack 5 cho mọi người sau nhé.

5. TypeScript 4.2.

Phiên bản TypeScript 4.2 (mới nhất) đã được hỗ trợ. Với TypeScript phiên bản 4.2, chúng ta có rất nhiều thứ hay ho để làm Ví dụ như:

5.1. Định nghĩa kiểu thông minh hơn.

Ta có thể khai báo biến, hàm với nhiều kiểu giá trị như sau:

type Input = number | string | boolean;

5.2. Khởi tạo mảng linh hoạt hơn

Một mảng hữu hạn có thể khởi tạo linh hoạt với cấu trúc” đầu/ giữa/ còn lại như sau:

let arr: [number, ...string[], number];
arr = [1, 100]; 
arr = [1, "xin chao", 100];
arr = [1, "xin chao", "Viet", "Nam", 100];

5.3. Phát hiện lỗi runtime với từ khóa “in”

Trong JavaScript, khi để non-object bên phải từ khóa “in”, sẽ có 1 lỗi runtime. TypeScript 4.2 sẽ đảm bảo  lỗi này bị bắt khi viết code.


Và còn rất nhiều tính năng mới được đóng gói trong bản phát hành lần này.

6. Angular 13

Hãy dành một chút thời gian để nói về tương lai của Angular 13.

Tầm nhìn của Angular 13 hướng tới xây dựng các ứng dụng có khả năng mở rộng mạnh mẽ.zzzzzzzzz Đội ngũ phát triển Angular sẽ thực hiện một số thay đổi quan trọng:

Đầu tiên -  Angular 13 sẽ ngừng hỗ trợ cho IE11
Tiếp theo, Angular 13 sẽ không hỗ trợ win 7
Cuối cùng, Angular sẽ không dùng View Engine nữa và nó sẽ bị xóa trong một bản phát hành trong tương lai.