Angular 4.0.0 Có Gì Mới?

Tháng 3-2017, Angular team đã phát hành Angular 4, vậy Angular 4 có gì mới, có những gì thay đổi mà chúng ta cần lưu ý. Bài này sẽ giới thiệu cho các bạn những điểm mới trong Angular 4.
Angular 4.0.0 Có Gì Mới?

1. Tổng quan

  • New features: Những tính năng mới có trong phiên bản mới.
  • Breaking changes: Những thay đổi ở phiên bản mới có thể làm hệ thống hiện tại bị lỗi khi nâng cấp.
  • Deprecated: Những thay đổi không được sử dụng trong phiên bản mới, và ở phiên bản tiếp theo sẽ bị loại bỏ đi.

2. New features

  • Smaller & Faster: new View Engine giúp giảm kích thước code gen ra khoảng 60% so với trước đây.
  • Tương thích với TypeScript 2.1, 2.2, Angular Universal, Source Maps for Templates.
    angular 4

  • Cải tiến ngIf, ngFor: tạo ra các local variable, if/else:
    angular 4

  • Giới thiệu NgComponentOutlet và NgTemplateOutlet tương thích với * syntax.
    Cú pháp của NgComponentOutlet và NgTemplateOutlet:

angular 4

Tạo dynamic component trong Angular:

angular 4

angular 4

3. Breaking changes

  • Lifecyle events: thay thế toàn bộ là interface nên phải thay thế hết thành “implements”.
  • Không cho phép deep imports và tất cả các export được đặt ký tự ɵ ở đầu thì không được phép sử dụng trong ứng dụng của bạn.

angular 4 lifecycle
Các imports không hợp lệ trong Angular 4:
angular 4 imports exports

  • Animation đã tách riêng khỏi @angular/core, thay vào đó là import BrowserAnimationsModule từ @angular/platform-browser/animations và các thành phần như trigger từ @angular/animations. angular 4 animation import

4. Deprecated

  • OpaqueToken thay thế bằng InjectionToken<?>
    angular 4 injectiontoken

  • Renderer thay thế bằng Renderer2

  • <template> thay thế bằng <ng-template>
    angular 4 ng-template

5. Video bài học

6. Tham khảo

http://angularjs.blogspot.com/2017/03/angular-400-now-available.html

TypeScript strictNullChecks

Lịch trình phát hành phiên bản và tính tương thích giữa các phiên bản Angular

Ngoài ra, còn khá nhiều các API bị đánh dấu là deprecated, bạn có thể vào trang documentation của Angular để tìm hiểu thêm tại địa chỉ: https://angular.io/search/#stq=deprecated&stp=1

TiepPhan - 04/01/2017 http://www.tiepphan.com/angular-4-0-0-co-gi-moi/

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Tiep Phan

7 bài viết.
20 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
19 6
Giới thiệu series học Lập trình Angular (Angular 2) Xin chào các bạn, trong thời gian vừa qua cộng đồng Javascript lại đón nhận một đứa con mới đến...
Tiep Phan viết hơn 1 năm trước
19 6
White
12 3
Thử Nghiệm Với Angular – Forms Trong Angular Hầu hết các ứng dụng web hiện đại đều làm việc với forms để thu thập dữ liệu từ người dùng. Angular c...
Tiep Phan viết 1 năm trước
12 3
White
7 5
Giới thiệu bài toán Đã bước chân vào "thế giới" Javascript, nhiều khi bạn thật sự điên cuồng. Có quá nhiều thứ được biết đến ở Javascript mà bạn c...
Tiep Phan viết hơn 1 năm trước
7 5
Bài viết liên quan
White
17 5
(Ảnh) Hiện tại mình đang làm một dự án về angular2 nên thành ra mình cũng muốn làm một chuỗi bài về angular2 cho những bạn nào đang muốn tìm hiểu v...
Dinh Duong viết hơn 1 năm trước
17 5
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
7 bài viết.
20 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!