Angular 7 có gì mới, Đặc trưng và tính năng cơ bản của angular
Chúng ta đều biết Google vừa trình làng phiên bạn dạng mới của Angular 8.0. Các nhà cách tân và phát triển Angular và cộng đồng đã đợi bản update này trường đoản cú lâu. Angular 8 sẽ thiết kế với những tính năng của IVY engine. Angular 8 là phiên phiên bản quan trọng tự Google trong thời hạn 2019 nó triệu tập vào những công chũm giúp Angular dễ dàng sử dụng cho các nhà cách tân và phát triển xâ dựng những loại ứng dụng với sự tối ưu về hiệu năng. Bên cạnh ra, phiên bạn dạng này cũng chứa một số tính anwng bắt đầu được hy vọng từ những phiên phiên bản trước. Angular 8 sẽ cung ứng phiên bạn dạng TypeScript 3.4 góp code dễ và nhanh hơn rất nhiều.
Bạn đang xem: Angular 7 có gì mới, Đặc trưng và tính năng cơ bản của angular
Tính năng mới trong Angular 8
Hỗ trợ TypeScript 3.4.x
Angular 8 hỗ trợ phiên bản TypeScript 3.4 hoặc cao hơn. Nếu bạn muốn dùng Angular 8 mang lại ứng dụng của chính mình thì cần upgrade TypeScript lên 3.4 hoặc cao hơn.
IVY Rendering Engine
Tính năng quan trọng đặc biệt và được mong chờ nhất của Angular 8 là IVY render engine. IVY là trình biên dịch Angular chuyển động như một phương pháp render mới. Công dụng của IVY là tạo thành các bundle nhỏ có thể thêmdễ dàng. IVY cơ phiên bản là một cải tiến của Angular. Sau khoản thời gian chuyển quý phái IVY thì ứng dụng đã bao gồm vẫn làm việc như trước đây nhưng giảm size bundle. Vào Angular 8, Google giới thiệu phiên bản preview mang đến IVY. Mục tiêu chính của bạn dạng này là nhận ý kiến từ những Developer liên quan tới Ivy. Nó được khuyến nghị không dùng cho môi trường xung quanh production.
Figure 1: kích cỡ Bundle của ứng dụng Hello World cùng với Angular Ivy và không có Ivy. (nguồn ngconf 2019 Keynote bởi Brad Green và Igor Minar)
Tạo ngconf 2019, Brad Green, Techincal Director của Angular Team chế tạo ra Google nói Ivy sẽ sở hữu một đổi mới đáng kể tương quan đến kích thước bundle và tương thích với tính năngDiffernent Loading. Họ sẽ có các tiện ích sau trên đây khi sử dụng Ivy:
Nó sẽ giúp đỡ biên dịch cấp tốc hơn (dự kiến kiến thiết ở Angular 9)Nhiều cải tiến kiên quan lại đến kiểm tra type vào template và bắt lỗi trong thời gian build với giúpngười cần sử dụng giảmgặp lỗi ở giai đoạn runtime.Bundle size nhỏ tuổi hơn so với hiện tại tạiNó cũng hoàn toàn có thể tương ưa thích ngược với các ứng dụng đã trở nên tân tiến trước đây.Code được tạo vì Angular Complier sẽ thuận lợi để phát âm hiểu hơn.Bạn hoàn toàn có thể debug cả template, bản lĩnh này chắc chắn rằng sẽ làm không ít developer ưa thích thú.Và nếu bạn có nhu cầu sử dụng Ivy trong ứng dụng mới của mình, bạn cũng có thể tạo new project với option enable-ivy
ng new ivy-project --enable-ivy Câu lệnh bên trên tạo bắt đầu Angular CLI đang lưu cấu hình trong tsconfig.json file
"angularCompilerOptions": "enableIvy": true thông số kỹ thuật trên hoàn toàn có thể thêm thủ công bằng tay vào bất cứ ứng dụng vũ nào sau thời điểm upgrade lên Angular 8. Một đề xuất là nếu bạn có nhu cầu dùng Ivy vào ứng dụng, chúng ta có thể chạy vận dụng trong mode debug cùng với mode AOT mode.
ng serve --aot
Hỗ trợ Bazel
Trong Angular 8, Google ra mắt một biện pháp build new là Bazel. Thực tiễn nó chưa hẳn là công cụ new hoàn toàn. Google sử dụng công vậy này nội bộ từ khóa lâu và bây giờ họ xây dừng nó như là 1 trong những mã nguồn mở. Tuy vậy một thứ nên phải hiểu rõ là Bazel chưa thực sự sẵn sàng chuẩn bị trên Angular 8. Nó được ra mắt như là một trong những tính năng nhỏ dại trong Angular 8 với được mong đợi là vẫn có bản chính thức trong Angular CLI 9. Chúng ta có thể có các ích lợi sau khi áp dụng tool này:Nó để giúp đỡ build nhanh hơn. Nó vẫn tốn time hơn mang lại lần đầu build dẫu vậy sẽ cấp tốc hơn nhiều nếu như build song song.Dùng cách thức này chúng ta có thể build ứng dụng như là 1 incremental build (build chỉ đông đảo gì thế đổi)và deploy chỉ với các gì thay đổi hơn là toàn bộ ứng dụng.Chúng ta có thể ẩn file Bazel điChúng ta có thể thêm Bazel vào ứng dụng sử dụng lệnh:
ng add
angular/bazel
Differential Loading cho câu hỏi tối ưu hóa hiệu năng
Một một trong những tính năng rất lôi cuốn trong Angular CLI 8. Chính vì nó giúp chúng ta chỉ ra trình duyệt y nào sẽ tiến hành target với CLI sẽ build áp dụng với các bundle JS liên quan cần thiết. Trình xem xét target khoác định vào tsconfig.json tệp tin giờ là es2015. Nghĩa là khi CLI build ứng dụng, nó đã build áp dụng trong một trình thông qua cũ hơn hoàn toàn như là IE9 sau đó chúng ta cần chỉ ra rằng nó trong tệp tin browserlist. File này tòn tại trong thư mục nơi bắt đầu của ứng dụng và sử dụng
# For IE 9-11 support, please remove "not" from the last line of the file and adjust as needed > 0.5% last 2 versions Firefox ESR not dead not IE 9-11 Nếu họ bỏ từ bỏ khóa not ở dòng cuối đi thì build process vẫn gen ra những file cho tất cả 2 version.
Chỉ tất cả một điểm yếu của quá trình này là sẽ mất quá nhiều thời gian build hơn. Những trình ưng chuẩn khác nhau hoàn toàn có thể sẽ cần ra quyết định xem bundle nào sẽ tiến hành load. Cho mục đích này, một sript reference được chế tạo index.html:
-- For ES6 support browser or latest browser -- For es5 support browser or old browser Hình ảnh trên chúng ta cũng có thể thấy bundle kích thước giảm đi đáng chú ý trong trường đúng theo ES2015 từ bỏ 9% mang lại 20%. Cuối cùng thì bundle form size nghĩa là về tối ưu hiệu năng. Chính vì như vậy Angular vẫn build thêm những file bổ sung với polyfills với chúng sẽ được thêm vào vào ứng dụng
Thay đổi Lazy Loading vào Route
Trong Angular trường đoản cú khi bắt đầu cho đến nay, chế độ router luôn cung cấp khái niệm lazy loading. Đến Angular 7 nó đã có được hoàn thiện:
path: "lazy", loadChildren: () => "./admin/admin.module#AdminModule" Giá trị trước vết # chỉ xuống đường dẫn cho module file mà lại module đó tồn tại, còn sau vết # chỉ ra tên của class Module. Phong thái này vẫn thao tác trong Angular 8, nhưng cách để viết lazy module được cố kỉnh đổi. Chuỗi quý hiếm của loadChidren bị deprecated. Tiếng loadChildren được khai báo như sau:
path: "lazy", loadChildren: () => import("./admin/admin.module").then(m => m.AdminModule)
Hỗ trợ web Worker
Như chúng ta đã biết JavaScript luôn luôn thực thi đối kháng thread. Nó là điều giỏi khi tiến hành lượng lớn dữ liệu hoặc gọi thường xuyên nhau trong phương pháp bất đồng bộ. Mà lại theo kịch bản ứng dụng thực tế, có mang này không hỗ trợ gì nhiều. Đó là nguyên nhân ngày này toàn bộ các trình coi xét web cung cấp web workder process. Cơ phiên bản là website worker process là các script được tiến hành bởi trình chăm bẵm trong một thread tách biệt. Giao tiếp với các thread đó trong trình chuẩn y sẽ có thể gửi tin nhắn. Nhìn chung, website worker không tương quan đến Angular nhưng điểm chính là các script này rất cần được xem xét trong build process của ứng dụng. Mục tiêu đó là cung cung cấp một bundle cho toàn bộ web worker. Giờ đồng hồ Angular 8 vẫn thực hiện công việc này vày Angular CLI.Theo đố chúng ta có thể cấu hình Angular CLI nếu họ thêm web worker đến lần đầu tiên. Trong quá trình này, CLI sẽ vứt bỏ các worker.ts trường đoản cú tsconfig.json cùng thêm các cấu hình TypeScript với tên là tsconfig.worder.json để quản lý file worker.ts. CÁc tin tức này cũng được thêm vào angular.json
"webWorkerTsConfig": "tsconfig.worker.json"
Thu thậpphâ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 mang đến Angular team có thể sắp xếp ưu tiên những tính năng và những cải tiến. Khi bọn họ update áp dụng CLI, nó sẽ hỗ trợ tùy lựa 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 dạng Node, CPU count, Ram Size, thời gian thực thi, lỗi nếu bao gồm và Angular team có thể đổi mới và chỉnh sửa trong phiên bạn dạng tiếp.Xem thêm: Chèn Chat Facebook Vào Website Không CầN Plugin, Cách Tích Hợp Live Chat Facebook Vào Website
Loại bỏ
angular/http. Nó đã biết thành deprecated (báo xong hỗ trợ phiên bạn dạng sau)từ Angular 4 và cung ứng một thư viện công dụng và bảo mật thông tin hơn hotline là
angular/common/httpThay đổi ViewChild cùng ContentChild
Trong Angular 8 gồm một số thay đổi lớn cùng với việc thực hiện ViewChild với ContentChild. Nó là đầy đủ thứ không mong mỏi đợi của team Angular. Bây giờ Angular 8 nó bắt buộc cung ứng một cờ Boolean static để quan niệm instance cho ViewChild và ConetntChild. Họ đã có kinh nghiệm tay nghề khi 1 issue thỉnh phảng phất là các instance này còn có sẵn trong ngOnInit, tuy nhiên đôi khi chúng ta không tìm kiếm thấy những instance này cho tới khi ngAfterContentInit hoặc ngAfterViewInit. Nó xuất hiện thêm chính khi những phần demo được load vào DOM sau khi dữ liệu được binding. (giống *ngIf hoặc *ngFor) tiếp đến các phần test được insert vào DOM vào ngAfterViewInit hoặc ngAfterContentInit. Điều này gây hiểu lầm và đó là vì sao bọn họ cần đã cho thấy compoinent:
ViewChild("info", static: false ) _cityViewChild: CityComponent; Nếu cực hiếm static là true, angular sẽ cố gắng tìm kiếm phần tử tở thời khắc khởi tạo ra component, ví dụ ngOnInit. Nó bao gồm thể kết thúc khi thành phần không được sử dụng ngẫu nhiên structure directive nào. Khi static value là false, angular đã tìm thành phần sau lúc khởi tạo thành view.
Hỗ trợ SVG Template
Hiện trên Angular 8 hỗ trợ template với đuôi mở rộng là SVG. Nghĩa là bạn có thể dùng file SVG để làm template như HTML cơ mà không cần cấu hình gì không giống cả. Nhưng câu hỏi là tại sao phải thực hiện .svg như là template nỗ lực vì thực hiện image vào HTML file. Vì sao là khi áp dụng SVG template, bạn có thể sử dụng như là 1 trong directive và kết quả bạn có thể bind nó như HTML template. Với các tiếp cận này, chúng ta cũng có thể tạo động các đồ hoạt xúc tiến trong ứng dụng.
Component( selector: "app-icon", templateUrl: "./icon.component.svg", styleUrls: <"./icon.component.css"> ) export class DashboardComponent ...
Hỗ trợ PNPM
Trong Angular 8, Angular CLI cũng cung ứng một package manager new PNPM bao gồm NPM cùng Yarn. Trong câu lệnh ng add giờ cung cấp thêm 1 dòng cờ nữa là –registry nhằm thêm những packages từ bất cứ NPM private nào. Câu lệnh này đã bao gồm sẵn bên trên Angular CLI cùng với ng update command.
Hỗ trợ Codelyzer 5.0
Angular 8 hỗ trợ cấu hình TSLint vì chưng Codelyzer 5.0. Phiên bản này của Codelyzer, một vài quy tắc được đổi tên. Dẫu vậy khi bọn họ upgrade Angular CLI, nó đang update file cấu hình TSLint. CLI update sẽ loại bỏ các lệnh import es6 từ tệp tin polyfills.ts. Bởi vì nó auto được cung ứng nếu được yêu thương cầu vị CLI.
Hỗ trợ thư viện bắt đầu New Builders/ Architect API
Phiên bạn dạng mới của Angular CLI đến phép bọn họ sử dụng phiên phiên bản mới của Builders được nghe biết là Architect API. Angular thực hiện Builders API để tiến hành các vận động như server, build, test, lint với e2e. Bạn có thể sử dụng builders trong tệp tin angular.json
"projects": "app-name": "architect": "build": "builder": "
angular-devkit/build-angular:protractor",
Làm sao để tăng cấp lên Angular 8
Đển nân cấp lên Angular 8 từ bất cứ ứng dụng bao gồm sẵn nào chạy Angular 7, bạn phải thực hiện công việc sau đây:
Angular 8 áp dụng TypeScript 3.4, phải cài TypeScript 3.4Bạn cần sử dụng Node 12 hoặc cao hơnHãy thực thi lệnh upgrade Angular CLI à ng updateangular/core.
Cách nữa là bạn cần kiểm tra quá trình upgrade trong link: https://update.angular.io/
Kết luậnBài viết này nói tới các tính năng được cải thiện trong Angular 8. Chúng ta cũng luận bàn về một số biến hóa đột pahts vào Angular 8 nghĩa nó là được biến đổi hoàn toàn so với version cũ.
Chuyên mục: Domain Hosting
