Angular 4 - Tổng quan

Có ba bản phát hành chính của Angular. Phiên bản đầu tiên được phát hành là Angular1, còn được gọi là AngularJS. Angular1 được theo sau bởi Angular2, có rất nhiều thay đổi khi so sánh với Angular1.

Cấu trúc của Angular dựa trên kiến trúc các thành phần / dịch vụ. AngularJS dựa trên bộ điều khiển chế độ xem mô hình.Angular 4 được phát hành vào tháng 3 năm 2017 chứng tỏ là một bước đột phá lớn và là bản phát hành mới nhất từ nhóm Angular sau Angular2.

Angular 4 gần giống như Angular 2. Nó có khả năng tương thích ngược với Angular 2. Các dự án được phát triển trong Angular 2 sẽ hoạt động mà không gặp bất kỳ vấn đề nào với Angular 4.

Bây giờ chúng ta hãy xem các tính năng mới và những thay đổi được thực hiện trong Angular 4.

Tại sao Angular4 và không Angular3?

Nhóm Angular đã phải đối mặt với một số vấn đề về lập phiên bản nội bộ với các mô-đun của họ và do xung đột, họ phải tiếp tục và phát hành phiên bản Angular tiếp theo - Angular4.

Bây giờ chúng ta hãy xem các tính năng mới được thêm vào Angular 4 -

ngIf

Angular2 chỉ hỗ trợ iftình trạng. Tuy nhiên, Angular 4 hỗ trợif elseđiều kiện là tốt. Hãy để chúng tôi xem nó hoạt động như thế nào bằng cách sử dụng ng-template.

<span *ngIf="isavailable; else condition1">Condition is valid.</span>
<ng-template #condition1>Condition is invalid</ng-template>

làm từ khóa trong vòng lặp for

Với sự giúp đỡ của as từ khóa bạn có thể lưu trữ giá trị như hình dưới đây -

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

Tổng biến lưu trữ đầu ra của lát bằng cách sử dụng as từ khóa.

Gói hoạt hình

Hoạt ảnh trong Angular 4 có sẵn dưới dạng một gói riêng biệt và cần được nhập từ @ angle / animations. Trong Angular2, nó có sẵn với @angular/core. Nó vẫn được giữ nguyên về khía cạnh tương thích ngược.

Bản mẫu

Angular 4 sử dụng <ng-template> dưới dạng thẻ thay vì <template>;cái sau được sử dụng trong Angular2. Lý do Angular 4 thay đổi<template> đến <ng-template> là do xung đột tên của <template> gắn thẻ với html <template>thẻ tiêu chuẩn. Nó sẽ hoàn toàn không được chấp nhận khi tiếp tục. Đây là một trong những thay đổi lớn trong Angular 4.

TypeScript 2.2

Angular 4 được cập nhật lên phiên bản TypeScript gần đây, là 2.2. Điều này giúp cải thiện tốc độ và kiểm tra kiểu tốt hơn trong dự án.

Hộp tiêu đề ống

Angular 4 đã thêm một trường hợp tiêu đề ống dẫn mới, thay đổi chữ cái đầu tiên của mỗi từ thành chữ hoa.

<div>
   <h2>{{ 'Angular 4 titlecase' | titlecase }}</h2>
</div>

Dòng mã trên tạo ra kết quả sau: Angular 4 Titlecase.

Tham số Tìm kiếm Http

Các tham số tìm kiếm cho api http get được đơn giản hóa. Chúng tôi không cần gọiURLSearchParams giống như đã được thực hiện trong Angular2.

Ứng dụng nhỏ hơn và nhanh hơn

Các ứng dụng Angular 4 nhỏ hơn và nhanh hơn khi so sánh với Angular2. Nó sử dụng TypeScript phiên bản 2.2, phiên bản mới nhất làm cho bản biên dịch cuối cùng có kích thước nhỏ.