CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Dùng công cụ này chúng ta có thể build ứng dụng như là một incremental build (build chỉ những gì thay đổi) và deploy chỉ với những gì thay đổi hơn là toàn bộ ứng dụng. Chúng ta có thể ẩn file Bazel đi. - Differential Loading cho việc tối ưu hóa hiệu năng Một trong những tính năng rất hay trong Angular CLI 8. Bởi vì nó giúp chúng ta chỉ ra trình duyệt nào sẽ được target và CLI sẽ build ứng dụng với các bundle JS liên quan cần thiết.
Trình duyệt target mặc định trong tsconfig.json file giờ là es2015. Nghĩa là khi CLI build ứng dụng, nó sẽ build ứng dụng trong một trình duyệt cũ hơn như là IE9 sau đó chúng ta cần chỉ ra nó trong file browserlist. File này tòn tại trong thư mục gốc của ứng dụng và sử dụng. - Thay đổi Lazy Loading trong Route Trong Angular từ khi khởi đầu cho đến nay, cơ chế router luôn hỗ trợ khái niệm lazy loading.
Đến Angular 7 nó đã được hoàn thiện: Giá trị trước dấu # chỉ ra đường dẫn đến module file mà module đó tồn tại, còn sau dấu # chỉ ra tên của class Module. Phong cách này vẫn làm việc trong Angular 8, nhưng cách để viết lazy module được thay đổi. Chuỗi giá trị của loadChidren bị deprecated. Giờ loadChildren được khai báo như sau: - Hỗ trợ Web Worker Như chúng ta đã biết JavaScript luôn thực thi đơn thread.
Nó là điều tốt khi thực thi lượng lớn dữ liệu hoặc gọi liên tiếp nhau trong phương pháp bất đồng bộ. Nhưng theo kịch bản ứng dụng thực tế, khái niệm này không giúp gì nhiều. Đó là tại sao ngày này tất cả các trình duyệt web hỗ trợ web workder process. Cơ bản là web worker process là các script được thực thi bởi trình duyệt trong một thread tách biệt.
Giao tiếp với 5 do an CHƯƠNG 1: CƠ SỞ LÝ THUYẾT các thread đó trong trình duyệt sẽ có thể gửi tin nhắn. Nhìn chung, web worker không liên quan đến Angular nhưng điểm chính là các script này cần được xem xét trong build process của ứng dụng. Mục tiêu chính là cung cấp một bundle cho tất cả web worker. Giờ Angular 8 đã thực hiện công việc này bởi Angular CLI.
Theo chúng ta có thể cấu hình Angular CLI nếu chúng ta thêm web worker cho lần đầu tiên. Trong quá trình này, CLI sẽ loại bỏ các worker.ts từ tsconfig.json và thêm các cấu hình TypeScript với tên là tsconfig.json để quản lý file worker. CÁc thông tin này cũng được thêm vào angular. - Thu thập phân tích dữ liệu sử dụng: Với Angular 8, Angluar CLI thu thập các dữ liệu phân tích cho Angular team có thể sắp xếp ưu tiên các tính năng và các cải tiến.
Khi chúng ta update ứng dụng CLI, nó sẽ hỗ trợ tùy chọn ng analytics. Nếu chúng ta cho phép nó chạy toàn bộ, nó sẽ thu thập dữ liệu như các lệnh được sử dụng, các cờ được sử dụng, hệ điều hành, phiên bản Node, CPU count, Ram Size, thời gian thực thi, lỗi nếu có và Angular team có thể cải tiến và chỉnh sửa trong phiên bản tiếp. - Loại bỏ @angular/http: Từ Angular 8, angular ngừng hỗ trợ @angular/http. Nó đã bị deprecated (báo ngừng hỗ trợ phiên bản sau) từ Angular 4 và cung cấp một thư viện hiệu quả và bảo mật hơn gọi là @angular/common/http.
Nhưng ở Angular 7 vẫn cho phép chúng ta sử dụng @angular/http trong ứng dụng. Nhưng Angular 8 thì nó đã dừng hỗ trợ. Chúng ta cần chỉnh code lên @angular/common/http. - Thay đổi ViewChild và ContentChild: Trong Angular 8 có một số thay đổi lớn với việc sử dụng ViewChild và ContentChild.
Nó là những thứ không mong đợi của team Angular. Hiện tại Angular 8 nó bắt buộc cung cấp một cờ Boolean static để định nghĩa instance cho ViewChild và ConetntChild. Chúng ta đã có kinh nghiệm khi 1 issue thỉnh thoảng là các instance này có sẵn trong ngOnInit, nhưng đôi khi chúng ta không tìm thấy các instance này cho đến khi ngAfterContentInit hoặc ngAfterViewInit. Nó xuất hiện chính khi các phần thử được load vào DOM sau khi dữ liệu được binding.
(giống *ngIf hoặc *ngFor) sau đó các phần thử được insert vào DOM trong ngAfterViewInit hoặc ngAfterContentInit. 6 do an CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Điều này gây hiểu lầm và đó là vì sao chúng ta cần chỉ ra compoinent: Nếu giá trị static là true, angular sẽ cố tìm kiếm phần tử tở thời điểm khởi tạo component, ví dụ ngOnInit. Nó có thể hoàn thành khi phần tử không được sử dụng bất kỳ structure directive nào. Khi static value là false, angular sẽ tìm phần tử sau khi khởi tạo view.
- Hỗ trợ SVG Template: Hiện tại Angular 8 hỗ trợ template với đuôi mở rộng là SVG. Nghĩa là chúng ta có thể dùng file SVG để làm template như HTML mà không cần cấu hình gì khác cả. Nhưng câu hỏi là tại sao phải sử dụng .svg như là template thay vì sử dụng image trong HTML file. Lý do là khi sử dụng SVG template, chúng ta có thể sử dụng như là một directive và kết quả chúng ta có thể bind nó như HTML template.
Với các tiếp cận này, chúng ta có thể tạo động các đồ hoạt tương tác trong ứng dụng. - Hỗ trợ PNPM: Trong Angular 8, Angular CLI cũng hỗ trợ một package manager mới PNPM bao gồm NPM và Yarn. Trong câu lệnh ng add giờ cung cấp thêm 1 cái cờ nữa là –registry để thêm các packages từ bất cứ NPM private nào. Câu lệnh này đã có sẵn trên Angular CLI với ng update command.
- Hỗ trợ Codelyzer 5.0: Angular 8 hỗ trợ cấu hình TSLint bởi Codelyzer 5. Phiên bản này của Codelyzer, một vài quy tắc được đổi tên. Nhưng khi chúng ta upgrade Angular CLI, nó sẽ update file cấu hình TSLint. CLI update sẽ loại bỏ các lệnh import es6 từ file polyfills.
Bởi vì nó tự động được thêm vào nếu được yêu cầu bởi CLI. - Hỗ trợ thư viện mới New Builders/ Architect API: 7 do an CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Phiên bản mới của Angular CLI cho phép chúng ta sử dụng phiên bản mới của Builders được biết đến là Architect API. Angular sử dụng Builders API để thực hiện các hoạt động như server, build, test, lint và e2e. Chúng ta có thể sử dụng builders trong file angular.3 Ưu điểm và nhược điểm của Angular 8 CLI - Ưu điểm: Angular được phát triển trên nền tảng hiện đại hơn, nhiều tính năng, và dễ dàng cho người mới học hơn.
Với Angular 1, các nhà phát triển đã biết về sự khác nhau giữa Controllers, Services, Factories, Providers và các khái niệm khác có thể gây ra sự khó hiểu đặc biệt là các coder mới. Angular 8 là một framework với sự sắp xếp hợp lý hơn cho phép lập trình viên tập trung vào việc tạo lên các class JavaScript đơn giản. Views và các controllers sẽ được thay thế bởi Components, thứ mà có thể mô tả là một sự tinh chế mới của directives. Ngay cả các lập trình viên có kinh nghiệm với Angular cũng không chắc là có thể biết tất cả những khả năng của directives.
Angular 8 component đã tăng khả năng đọc đáng kể, các API của chúng giảm đáng kể các biệt ngữ hơn là Angular 1. Angular 8 được viết với TypeScript, một superset của JavaScript, nó triển khai nhiều tính năng của ES2016 và các tính năng của TypeScript. Bằng cách tập trung tạo nên một framework dễ dàng hơn trong việc xử lý, Angular2 cho phép hệ sinh thái phát triển phong phú hơn. Các lập trình viên có thể sử dụng các trình soạn thảo tinh vi hơn với các tính năng gợi ý code hay tự động hoàn thành code.
Những tính năng này giúp giảm thời gian học Angular2. May mắn hơn nữa cho các nhà phát triển ES5 truyền thống rằng không nhất thiết phải viết ES6 hay TypeScript, các coder có thể vẫn viết JavaScript thuần mà không cần biên dịch. Mặc dù được viết lại hoàn toàn, Angular 8 vẫn giữ lại các khái niệm cốt lõi và các quy tắc của Angular1. Điều đó có nghĩa là các lập trình viên giỏi vói Angular1 sẽ dễ dàng chuyển đổi sang Angular 8 hơn là các thư viện khác như ReactJS.
Angular 8 được thiết kế cho mobile từ ban đầu. Bỏ qua một bên các vấn đề về sức mạnh xử lý, các thiết bị di động có các tính năng khác và sự giới hạn đó phân biệt chúng với máy tính truyền thống. Giao diện chạm, màn hình nhỏ, phần cứng đã được tính toán trong Angular 8. Máy tính để bàn cũng sẽ được cải tiến về hiệu suất và khả năng đáp ứng.
Angular 8 giống React và các framework hiện đại khác, có thể tăng hiệu năng bằng cách render ra HTML trên server hoặc ngay cả trên browser. 8 do an CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Phụ thuộc vào thiết kế cấu trúc giúp cho trải nghiệm người dùng tốt hơn. Yêu cầu về hiệu năng không bao giờ là dừng lại với việc tiền xử lý. Angular 8 có khả năng tích hợp với mobile bằng cách tích hợp với NativeScript, một thư viện mã nguồn mở là cậu nỗi giữa JavaScript và mobile.
Bổ sung thêm, Ionic cũng đang được phát triển trên Angular8 cung cấp một cách khác giúp tăng hiệu quả của ứng dụng trên mobile. Phiên bản đầu tiên của Angular cung cấp cho các lập trình viên một thư viện mềm dẻo để phát triển ứng dụng. Đây là sự thay đổi đáng kể cho các lập trình viên web, và trong khi framework rất hữu ích thì nó là một bằng chứng cho sự linh hoạt đó. Qua thời gian, các best practice từ cộng đồng được tán thành rộng rãi.x đã cố gắng làm việc xung quanh các hạn chế trên trình duyệt liên quan đến JavaScript.
Điều này được giải quyết bằng cách cung cấp một hệ thống các module sử dụng cơ chế Dependency Injection. Điều này thật tuyệt tuy nhiên có một vài vấn đề.x sử dụng hệ thống module ECMA Script 6 (ES6), và các công cụ đóng gói hiện đại như Webpack hoặc SystemJS. Module được tùy biến theo cách riêng của Angular để dễ dàng viết các Generic cho JS để cắm vào Angular. Hệ thống module mới giúp dễ dàng phát triển các dự án lớn hiệu quả hơn.2 ANT-DESIGN(NG-ZORRO) - Ng-Zoro là thư viện Angular UI ng-zorro-antd chứa một bộ các thành phần và bản trình diễn chất lượng cao để xây dựng giao diện người dùng tương tác phong phú.
- Các tính năng (Đoạn này bọn em xin được viết tiếng anh vì quá nhiều từ ngữ chuyên ngành): An enterprise-class UI design language for web applications. A set of high-quality Angular components out of the box. Written in TypeScript with complete defined types. Support OnPush mode, high performance.
Support Customize theme.