Angular 5 có gì mới

      26

Angular 5 là phiên phiên bản mới nhất của Angular. Phiên phiên bản Angular 5 được chính thức phát hành vào thời điểm tháng 9/10 năm 2017. Theo đánh giá của giới thiết kế viên bên trên thế giới thì so với các phiên bạn dạng trước, Angular 5 mang lại mang đến xây dựng viên cảm hứng dễ dàng sử dụng rộng cùng với một số những công dụng new được bổ sung cập nhật thời thượng khác.Angular 5 bổ sung một vài các tính năng mới, nâng cao tính năng, cũng tương tự cách xử trí những lỗi xuất hiện bên trên các phiên bạn dạng trước (Angular 4, Angular 2).Đây là changelog của version: changelog.

Bạn đang xem: Angular 5 có gì mới

Cải tiến tính năng Angular 5

Tối ưu hóa build production bằng Việc áp dụng chính sách build optimizer được tích thích hợp sẵn vào vào CLI. Công chũm này tối ưu tree shark và loại trừ code dư quá.

Sử dụng Static Injector sửa chữa thay thế Reflective sầu –Injector: Do injector không bắt buộc intl & Reflect polyfills nên làm cho sút size của ứng dụng.

Xem thêm: Hướng Dẫn Cài Hyper V Trên Win 7, Cài Đặt Hyper

Before:ReflectiveInjector.resolveAndCreate(providers);After:Injector.create(providers);

Có thêm option mới "preserveWhitespaces" nhằm mục đích thải trừ những khoảng tầm trắng không cân thiết trong template giúp sút kích cỡ của bundle Khi biên dịch. Chức năng này off làm cho mang định, để thay đổi chỉ việc thêm loại config vào tệp tin tsconfig.json:

{ , "angularCompilerOptions": "preserveWhitespaces": false Chúng ta cũng hoàn toàn có thể thêm config thẳng vào component:

import Component from "
angular/core";
Component( selector: "app-root", templateUrl: "./phầm mềm.component.html", styleUrls: <"./tiện ích.component.css">, preserveWhitespaces: false ) export class AppComponent // ... Các chức năng mới:updateOn blur or submitMột chắt lọc new cho form fiels hoặc những thành phần vào khung là updateOn, nó đã validate chỉ lúc bao gồm sự khiếu nại "submit " hoặc "submit", trong những lúc khoác định trước kia là việc kiện "change".Ví dụ sự biến đổi này, đấy là template cũ:

User Name: Register Có thể thêm validate mang đến đầu vào chỉ khi input đầu vào kia blurred-out:

Chúng ta cũng hoàn toàn có thể vận dụng cho cả form:

...hoặc trong tệp tin ts:

ngOnInit() this.newUserForm = this.fb.group( userName: <"Bob", updateOn: "blur", validators: > );Router EventsBố sung thêm 2 sự kiện Activationstart với ActivationEnd. Bổ sung thêm 2 class ChildActivationStart cùng ChildActivationEnd.Một số những sự kiên tương ứng với Router bắt đầu được bổ sung cập nhật bao hàm : GuardsCheckEnd, GuardsCheckStart, ResolveStart và ResolveEnd.

Cách Upgrading lên angular 5Việc tăng cấp đã được đội hình Angular phát triển mức sử dụng để trsinh hoạt đề xuất dễ dãi hơn.Chúng ta cần phải upgrade những package chỉ với cùng 1 lệnh:

$ npm install
angular/animations,comtháng,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-hệ thống,router
5.0.0# or, using Yarn:$ yarn add
angular/animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-hệ thống,router
5.0.0Trong khi buộc phải upgrade version của kiểm tra codelyzer, tslint để tương xứng với angular 5:"codelyzer": "~3.2.0","jasmine-core": "~2.6.2","jasmine-spec-reporter": "~4.1.0","ts-node": "~3.2.0","tslint": "~5.7.0"Angular 5 phải áp dụng TypeScript 2.4.2 and RxJS 5.5.2 bắt buộc họ rất cần phải đổi khác config trong tệp tin packge.json cùng với version cao hơn hoặc bởi."typescript": "~2.4.2","rxjs": "^5.5.2",Ttốt đổi của thẻ biến .Nếu project của chúng ta dùng Flex Layout, chúng ta nên chắc chắn sẽ upgrade cho tới phiên phiên bản mới nhất.Nếu bạn áp dụng date, currency hoặc % thì bạn phải chuyển đổi cú pháp:

*
Nên thay thế Http bằng HttpClient, HttpModule sẽ dần dần bị loại bỏ bỏ. HttpClient giúp câu hỏi handle những request thuận lợi với nkhô giòn rộng. Việc áp dụng HttpClient để giao tiếp với những Service phía Backover đã đổi mới quy trình nắm bắt những lỗi Lúc xây dựng cùng hiển thị những chi tiết lỗi.
Injectable()class JWTInterceptor implements HttpInterceptor constructor(private router: Router) intercept(req: HttpRequest, next: HttpHandler): Observable> return next.handle(req).map((event: HttpEvent) => if (event instanceof HttpResponse) // bởi stuff with response if you want ).catch(err => if (err instanceof HttpErrorResponse if (err.status === 401) // JWT expired, go to login // Observable.throw(err); ) Với phiên bạn dạng Angular 5 khoác định sử dụng RxJs 5.5. thế nên khi nâng cấp lên phiên phiên bản Angular 5 cùng với các dự án vẫn viết bởi Angular 4+ thì các lập trình viên cần được hết sức để ý.Khi tăng cấp áp dụng lên Angular 5 với các áp dụng thực hiện Angular material thì những bạn cần phải upgrade sử dụng Angular Material bạn dạng mới nhất. Như vậy cũng tạo pthánh thiện toái chút xíu vày chúng ta phải sửa đổi tương đối sinh sống các template.Với những Dự án được thi công template với bootstrap hoặc PrimeNg thì bạn không cần thiết phải sửa đổi hoặc nếu có là siêu ít.Đây là ví dụ về sự chuyển đổi của đoạn code sau:import Component, OnInit from "
angular/core";import Observable from "rxjs/Observable";import "rxjs/add/observable/of";import "rxjs/add/operator/map";import "rxjs/add/operator/filter";import "rxjs/add/operator/do";
Component( ... )export class AppComponent implements OnInit myObs = Observable.of("Hello", "Alligator", "World!"); ngOnInit() this.myObs .do(x => console.log("The bởi vì operator is the vày operator!")) .filter(x => x.length > 8) .map(x => x.toUpperCase()) .subscribe(x => console.log(x)); ...và đoạn code này được viết lại thành:

import Component, OnInit from "
angular/core";import of from "rxjs/observable/of";import map, filter, tap from "rxjs/operators";
Component( ... )export class AppComponent implements OnInit myObs = of("Hello", "Alligator", "World!"); ngOnInit() this.myObs .pipe( tap(x => console.log("The vị operator is now tap!")), filter(x => x.length > 8), map(x => x.toUpperCase()) ) .subscribe(x => console.log(x));
Đã ĐK Bản quyền