Tổng quan về Angular4

Có 3 phiên bản chính của Angular. Phiên bản đầu tiên là Angular 1, còn gọi là AngularJS. Tiếp đó là Angular 2, có rất nhiều thay đổi so với Angular 1, và cuối cùng là Angular 4.

Kiến trúc của Angular dựa trên các component/service, còn AngularJS dựa trên model, view và controller. Ra mắt vào tháng 3/2017,team Angular đã chứng tỏ Angular 4 là một bước đột phá lớn sau Angular 2.

Angular 4 gần giống so với Angular 2. Angular 4 hỗ trợ việc tương thích ngược, tức việc tương thích với các phiên bản trước đó, do vậy, project phát triển trên Angular 2 khi nâng cấp lên thì vẫn chạy được bình thường trên Angular 4.

1. Tại sao lại là Angular 4 mà không phải Angular 3

Team Angular gặp phải sự xung đột trong nội bộ về việc đánh số phiên bản (versioning), vì thế mà họ phải chuyển sang phiên bản 4 sau phiên bản 2 mà không phải là 3
Bây giờ, chúng ta hãy cùng xem những thay đổi và những tính năng mới có trong Angular 4 nhé.

2. Các tính năng mới trong Angular 4

ngIf

Angular 2 chỉ hỗ trợ điều kiện if, còn Angular 4 thì hỗ trợ cả else, tức if else:

Bài viết này được đăng tại [kiso.vn]

Cùng lấy 1 ví dụ với ng-template:

<span *ngIf="isRain; else whenNotRain"> It's rain now</span>
<ng-template #whenNotRain> It's not rain now</ng-template>

Trong ví dụ trên thì nếu giá trị của isRain = true thì hiển thị ra “It’s rain now“, còn nếu giá trị của isRain = false thì sẽ hiển thị ra “It’s not rain now“

Sử dụng as trong vòng for

Với as, bạn có thể lưu trữ dữ liệu vào biến (hay có thể hiểu là gán vào biến)

months = ["Tháng 1", "Tháng 2", "Tháng 3", Tháng 4", "Tháng 5", "Tháng 6", "Tháng 7", "Tháng 8", "Tháng 9", "Tháng 10", "Tháng 11", "Tháng 12"];

<div *ngFor="let i of months | slice:0:5 as total">
   	Months: {{i}} Total: {{total.length}}
</div>

Trong ví dụ trên thì ta cắt ra 1 mảng mới gồm 5 tháng đầu trong mảng month, sau đó đặt tên là total

Như vậy, giá trị của mảng total sẽ là:

total = ["Tháng 1", "Tháng 2", "Tháng 3", "Tháng 4", "Tháng 5"];

Và kết quả hiển thị lên trình duyệt:

Months: Tháng 1 Total: 5
Months: Tháng 2 Total: 5
Months: Tháng 3 Total: 5
Months: Tháng 4 Total: 5
Months: Tháng 5 Total: 5

Dễ hiểu, phải không nào 🙂

Animation Package

Animation package của Angular 4 được tách thành package riêng (Trong angular 2 thì để chung trong @angular/core).
Bạn có thể import animation package bằng cách khai báo: @angular/animations

Template

Angular 4 sử dụng thẻ <ng-template> thay vì thẻ <template> như Angular 2 vì lý do xung đột với thẻ <template> của HTML.

Typescript 2.2

Angular 4 sử dụng phiên bản Typescript 2.2 để cải thiện tốc độ và kiểm tra kiểu dữ liệu đơn giản hơn.

Pipe title case

Có thể hiểu pipe title case gần giống như directive trong AngularJS, có tác dụng viết in hoa các chữ cái đầu.

{{ 'Angular 4 titlecase' | titlecase }}

Nhận được kết quả là “Angular 4 Titlecase“.

Http Search Parameters

Search parameter được sử dụng trong Angular 4 làm cho việc sử dụng http get đơn giản hơn (không cần gọi URLSearchParams như làm trên Angular 2)

Ứng dụng nhỏ gọn hơn

Các ứng dụng Angular 4 nhỏ và nhẹ hơn so với Angular 2 do sử dụng typescript 2.2 – phiên bản nhẹ và mới nhất.

Ở bài sau, chúng ta sẽ tìm hiểu cách cài đặt môi trường để lập trình Angular 4.