Mở đầu

Ngày nay công nghê thay đổi hàng ngày, mỗi sáng ngủ dậy đọc những tờ báo công nghệ lại thấy hàng tá công nghệ mới ra đời. Cái frame-work phục vụ cho việc lập trình web cũng vậy nó cũng biến động phát triển hàng ngày để bắt kịp xu thế, Angular cũng vậy được cập nhật liên tục để theo kịp các framework front-end khác. Mới đây angular 7 đã được ra mắt. Công đồng bàn tán rằng chưa kịp đọc doc của bản 5 6 đã đến bán 7 rồi. Bài viết bài mình sẽ tông hợp nhưng thay đổi quan trọng trong angular7.

Cập nhật lên angular 7

Nếu bạn đang ở ứng dụng angular lên v6 thì bạn chit cần sử dụng câu lệnh sau để cập nhaajtleen phiên bản 7

ng update @angular/cli @angular/core

Việc cập nhật có vẻ sảu ra nhanh chóng và rất thuận lợi.

LI Prompts

Nhóm Angular đã liên tục tập trung vào việc cải thiện các công cụ có sẵn cho developer và các lời nhắc CLI mới không khác nhau. Thông thường khi bạn chạy các lệnh như ng new hoặc ng add, nó chỉ chạy lần đầu. Khi mà bạn quên các option đi kèm hoặc nhớ nhầm thì có lẽ chúng ta phải xóa đi chạy lại hoặc hủy lệnh đó. Với angular7 CLI đã giúp developer rất nhiều qua các gọi ý. Sau khi cạp nhật lên angular7 bạn hãy thử sử dụng ng new + enter bạn sẽ thấy comman line sẽ hiển thị nôi dung tương tự như sau

Angular Elements

Chỉ xảy những thay đổi nhỏ ở các element

CDK

ScrollingModule

Như nhiều framwork mobile đã thực hiện việc scroll theo hướng tải dữ liệu động cho những dữ liệu như hình ảnh hoặc danh sách dài, Angular đã bắt kịp xu thế bằng cách thêm ScrollingModule để cho phép di chuyển ảo. Khi các phần tử được hiển thị hoặc bị ẩn, chúng hầu như được tải và dỡ ở DOM. Điều này có nghĩa là danh sách cuộn lớn của bạn nhanh hơn rất nhiều việc này rất tốt cho trải nghiệm người dùng.

<cdk-virtual-scroll-viewport itemSize="20">   
    <div *cdkVirtualFor="let item of items">{{item}}</div> 
</cdk-virtual-scroll-viewport>

Bạn có thể thấy các phần tử đang được thay đổi trong DOM khi chúng ta cuộn!

Drag & Drop

Ở phiên bản này CDK đã hỗ trọ drag and drop

• Tự động render khi người dùng di chuyển các mục
• Các helper methods cho việc sắp xếp lại/di chuyển các phần tử trong danh sách: moveItemInArray và transferArrayItem

Performance

Cài đặt Budgets cho app mới

Các gói Bundle Budgets trong CLI nhằm cung cấp khả năng cảnh báo khi gói ban đầu lớn hơn 2MB. Các giá trị mặc định là cảnh báo ở mức 2MB và một lỗi ở mức 5MB. Các giá trị mặc định này có thể dễ dàng thay đổi trong tệp angular.json của bạn. Bạn chỉ cần thêm một chút về budgets cùng với cảnh báo và kích thước lỗi ưa thích của mình

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "2mb",
    "maximumError": "5mb"
  }
]

Kiểm tra kích thước gói ứng dụng của riêng bạn

Nếu bạn tò mò về việc kiểm tra kích thước gói của bạn, tất cả những gì bạn cần làm là chạy** ng serve** trên ứng dụng Angular của bạn:

Loại bỏ eflect-metadata Polyfill trong Production

Sau khi xem xét những sai lầm phổ biến trong toàn hệ sinh thái, nhóm phát hiện thấy các nhà phát triển đang sử dụng reflect-metadata polyfill, khi nó chỉ nên được sử dụng trong quá trình sản xuất. Kết quả là, phiên bản cập nhật của Angular sẽ loại bỏ điều này khỏi các tệp polyfills.ts và bao gồm nó như là một bước trong quá trình cài đặt và phát triển.

Angular Material

Angular Material được ưa thích trong năm nay với nhiều bản cập nhật mới, bao gồm cả trang chủ mới cho tài liệu: material.io. Ở đây bạn có thể nhận được hướng dẫn thiết kế, các thành phần phát triển, dụng cụ và luôn cập nhật tin tức mới nhất.

Tăng cường khả năng truy cập cho các Selects

Angular Materia cũng cải thiện khả năng tiếp cận cho các selects. Bây giờ bạn có thể sử dụng native select trong mat-form-field. Vì nó là một native element, nó có khả năng truy cập nhiều hơn và hiệu suất tốt hơn so với mat-select. Bây giờ bạn có thể chọn select or mat-select để sử dụng. Cả hai đều có sẵn để bạn dùng.

Updated Dependencies

Angular cập nhật đến Typecript 3.1, RxJS 6.3 và hỗ trợ Node 10! Bạn hãy kiểm tra các ghi chú phát hành phiên bản tại đây.