Angular 7: Nâng cấp & Tóm tắt các tính năng mới

Angular 7 vừa mới được phát hành và mặc dù có một chút ánh sáng về các tính năng mới, nhưng có một số thay đổi về công cụ mới rất thú vị cũng như một số tính năng tuyệt vời để cải thiện hiệu suất. Và tiếp tục xu hướng gần đây từ các version trước, việc nâng cấp trở nên dễ dàng (và thực sự nhanh hơn bao giờ hết).

Bổ sung & Tính năng mới

Danh sách dưới đây chỉ là một bản tóm tắt ngắn về các tính năng mới trong bản phát hành này nhưng hãy đảm bảo bạn tìm thấy đường xuống phần đọc thêm và xem thêm nhiều hơn nữa mà bản phát hành này cung cấp!

Dấu nhắc CLI

Group 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 các nhà phát triển và các dấu nhắc CLI mới cũng không có gì khác biệt. Thông thường khi bạn chạy các lệnh như ng new hoặc ng add , đó là một lần vượt qua. Quên bao gồm định tuyến? Ah, nghỉ khó. Bạn muốn bỏ qua cài đặt? Vâng, tôi đoán bạn có thể chấm dứt lệnh.

Không phải với CLI mới. Bây giờ CLI phản hồi bằng dấu nhắc . Đơn giản chỉ cần thử ng new myangular7app và bạn nhận được gì? Một dấu nhắc hoàn toàn mới hỏi bạn có muốn thêm định tuyến không. Bạn muốn thử một định dạng biểu định kiểu khác? Đừng lo lắng. CLI sẽ cho phép bạn chọn giữa CSS , SCSS , SASS và hơn thế nữa (hoặc thực sự là LESS HA!). Và tin tuyệt vời, nó có thể tùy chỉnh! Thêm một schematic.json bằng cách sử dụng Schematic CLI và bạn có thể cho Angular CLI biết những dấu nhắc thực thi! Tìm hiểu thêm về giản đồ trong phần đọc thêm .

Vật liệu góc CDK

ScrollingModule

Vì nhiều khung công tác di động đã bắt đầu chuyển sang tải động dữ liệu như hình ảnh hoặc danh sách dài, Angular đã làm theo bằng cách thêm ScrollingModule để cho phép cuộn ảo. Khi các phần tử tăng hoặc mất khả năng hiển thị, chúng hầu như được tải và không tải khỏi DOM. Hiệu suất được tăng lên rất nhiều cho mắt của user . Lần tới khi bạn có một danh sách lớn các mục để user cuộn, hãy gắn nó vào thành phần cdk-virtual-scroll-viewport và tận dụng lợi thế của việc tăng hiệu suất!

DragDropModule

Như vậy, bạn có thể ở lại hoàn toàn trong module Angular Material và triển khai hỗ trợ kéo và thả bao gồm sắp xếp lại danh sách và chuyển các mục giữa các danh sách. CDK bao gồm kết xuất tự động, trình xử lý kéo, trình xử lý thả và thậm chí cả khả năng truyền dữ liệu. Bạn không thích hoạt ảnh kéo tiêu chuẩn? Nhạt toẹt. Đó là Angular; nó là của bạn để overrides .

Đối với chính Angular Material, phiên bản 7 đi kèm với một số kiểu thành phần được cập nhật để tuân theo đặc điểm kỹ thuật Material Design mới.

Hiệu suất ứng dụng

Điều đầu tiên trước tiên: Angular 7 thậm chí còn nhanh hơn các version trước. Việc nâng cấp nhanh hơn (ít hơn 10 phút cho nhiều ứng dụng theo thông báo chính thức), framework nhanh hơn, module CDK cuộn ảo được nêu chi tiết ở trên giúp các ứng dụng chạy với hiệu suất tốt hơn.

Đây là nơi mọi thứ trở nên thú vị: Angular không chỉ dành riêng để làm cho khung nhỏ nhất có thể, nó còn dành riêng để làm cho ứng dụng của bạn nhỏ nhất có thể! Họ đã sửa một lỗi production phổ biến trong đó polyfill siêu dữ liệu phản ánh được đưa vào production . V7 tự động loại bỏ nó.

Các dự án mới hiện cũng được đặt mặc định bằng cách sử dụng Gói ngân sách có tác dụng thông báo cho bạn khi ứng dụng của bạn đạt đến giới hạn kích thước. Theo mặc định, bạn nhận được cảnh báo khi đạt 2MB và lỗi ở 5MB. Và khi bạn cần thêm một chút không gian, chỉ cần nhảy vào angle.json của bạn và điều chỉnh nếu cần.

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

Cập nhật phụ thuộc

Angular lên đến Typecript 3.1, RxJS lên đến 6.3 và hỗ trợ Node 10 đã được thêm vào! Kiểm tra các ghi chú phát hành trong (liên kết bên dưới để đọc thêm ).

Ivy Renderer

Trình kết xuất sẵn sàng khi nó sẵn sàng thế hệ tiếp theo… vẫn chưa hoàn toàn sẵn sàng. Group Angular sẽ không commit một mốc thời gian cuối cùng nhưng quá trình phát triển vẫn đang hoạt động và đang tiến triển. Họ lưu ý quá trình xác thực khả năng tương thích ngược đang bắt đầu và mặc dù không có thành viên chính thức nào trong group comment , một số người theo dõi nhiệt thành của commit đang mong đợi một bản beta hoàn chỉnh sẽ ra mắt một thời gian trong vòng đời của V7 với bản phát hành chính thức có thể có cùng với version 8. Hãy tự theo dõi tiến trình trên GitHub Ivy Renderer vấn đề trong Angular repo chính thức. Tin tốt nhất? Họ hoàn toàn mong đợi rằng Ivy có thể được phát hành trong một bản phát hành nhỏ miễn là nó được kiểm tra và xác nhận đầy đủ. Vậy ai biết được? Có lẽ ta sẽ thấy nó trong v7 sau khi tất cả.

Nâng cấp

Điều này có thể dễ dàng hơn không?

Đối với phần lớn các ứng dụng Angular hiện có và giả sử bạn đã chạy trên Angular 6 và RxJS 6, bạn chỉ cần chạy một lệnh duy nhất:

$ ng update @angular/cli @angular/core

Và nếu bạn đang sử dụng Angular Material , chỉ cần làm theo lệnh sau:

$ ng update @angular/material

Nếu có điều gì đó hơi khó hiểu, hãy đảm bảo bạn truy cập Hướng dẫn cập nhật để xem bạn có cần bất kỳ lệnh đặc biệt nào không.

Đọc thêm

Đảm bảo rằng bạn kiểm tra nhiều hơn các tài nguyên Angular 7 bên dưới:

Thông báo chính thức của Angular 7.
Tài liệu Angular 7 CLI.
Giới thiệu về Sơ đồ .
Đọc thêm về Cuộn ảo & Kéo và Thả .
Hướng dẫn cập nhật Angular.
Ghi chú version Typecript 3.1.
RxJS 6.3 CHANGELOG .
Hỗ trợ nút 10.

Tags:

Các tin liên quan