Giới thiệu

Với những ai đã từng làm qua Angular2 đã biết rằng Angular2 là 1 framework phát triển trên nền Javascript của google, Angular2 là một framework hoàn chỉnh và mạnh mẽ. giúp cho front-end web developer có thể xây dựng trang web của mình một cách nhanh chóng, dễ dàng, và dễ maintain. kế thừa những tính năng, sự thành công của Angular2, google cho ra mắt Angular4 với những tính năng và cải tiến so với Angular2, hứa hẹn sẽ là một Framework không thể bỏ qua . Vậy Angular4 có những sự bổ sung gì so với người anh em Angular2?

1. Angular4 xây dựng app nhỏ hơn và nhanh hơn

Với Angular4 ứng dụng của chúng ta sẽ nhỏ hơn và nhanh hơn so với các phiên bản angular trước đây.

2. Giảm kích thước view engine

Việc thay đổi dưới framework với việc thêm AOT cho việc biên dịch code giúp cải thiện thời gian biên dịch, những sự thay đổi này giúp Angular4 giảm được 60% kích thước trong hầu hết các trường hợp

3. Tách riêng animation ra package riêng

thay vì việc giữ animation trong @angular/core như trước đây. Angular4 đã tách riêng animation ra package của riêng nó là @angular/platform-browser/animations. Sự thay đổi này giúp có thể tìm tài liệu dễ dàng hơn và tận dụng tốt hơn auto-complete

4. Bổ sung if/else thay vì chỉ có if như Angularjs và Angular2

Angular4 đã bổ sung thêm if/eles

    <div *ngIf=""users.length > 0; else empty"> 
          <h2> Users </h2>
    </div>
    <ng-template #empty>  <h2> No Users </h2>  </ng-template>

ví dụ trên kiểm tra mảng user.length có lớn hơn 0 hay không. nếu có thì in

User

. nếu không thì in ra

No Users

. ta thấy cú pháp sẽ ngắn hơn khi ra sử dụng angular2 hay angularjs trước đây. với angular2:

    <div *ngIf="users.length > 0"> 
        <h2>  Users  </h2>
    </div>
    <div *ngIf="users.length === 0"> 
        <h2> No Users </h2>
    </div>

5. Sử dụng từ khóa 'as'

một tính năng mới được thêm vào cú pháp trong template là từ khóa as. đây là đơn giản hóa của cú pháp let. nó cho phép lưu kết quả trong một biến của template để sử dụng nó trong element. nó có thể được sử dụng để lưu slice collection ví dụ.

    <div *ngFor="let user of users | slice:0:2 as total; index as i"> 
        {{index + 1}} / {{total.length}}: {{user.name}}
    </div>

trong đoạn code trên sẽ filter và lấy user thứ 0 và thứ 1 và gán vào biết total.

hữu ích hơn. subscript với 1 async. giả sử muốn get một user từ http request. user là một observable hay Promise, thay cho đoan code sau trong angular 2:

    <div>
        <h2>  {{(user | async)?.name}} </h2>
        <small> {{(user|async)?.age}} </small>
    </div>

ta có thể sử dụng với as như sau:

    <div *ngIf="user | async as userModel">
        <h2>  {{userModel.name}} </h2>
         <small> {{userModel.age}} </small>
    </div>

6. Pipes

Angular4 giới thiệu một filter mới là titlecase. nó sẽ thay đổi ký tự đầu tiên của mỗi từ thành uppercase:

    <p>{{ 'ninja squad' | titlecase }}</p>
    <!-- will display 'Ninja Squad' -->

7. Đơn quả hóa HTTP request

thêm parameter cho HTTP request đơn giản hơn nhiều ví dụ:

    http.get(`${baseUrl}/api/races`, { params: { sort: 'ascending' } });

đối với angular2:

    const params= new URLSearchParams();
   params.append('sort', 'ascending');
   http.get(`${baseUrl}/api/races`, { search: params });

8. Giới thiệu về thẻ Meta

Angular4 đã thêm Meta service nhờ đó ta có thể dễ dàng get hoặc update meta tags

    @Component({
      selector: 'ponyracer-app',
      template: `<h1>PonyRacer</h1>`
    })
    export class PonyRacerAppComponent {

      constructor(meta: Meta) {
        meta.addTag({ name: 'author', content: 'Ninja Squad' });
      }

   }

9. Thêm một số thuộc tính cho form validators

Ngoài các thuộc tính đã có sẵn như required, minLength, maxLength và pattern. Angular4 giới thiệu thêm email giúp chúng ra validate email

10. Thêm sự so sánh cho select options

theo tôi đây là một tính năng rất hưu ích mà angular4 mang lại. thay vì select ta chỉ có thể chọn được plain text như trước đây thì bây giờ ta có thể selected được theo object bằng cách sử dụng directive 'compareWith' ví dụ:

    <select [compareWith]="byId" [(ngModel)]="selectedPony">
        <option *ngFor="let pony of ponies" [ngValue]="pony"> {{ pony.name }} </option>
    </select>

    byId(p1: PonyModel, p2: PonyModel) {
        return p1.id === p2.id
    }

11. Cải tiến về Router

ParamMap

một interface mới được giới thiệu đại diện cho các tham số của URL là ParamMap. thay cho việc sử dụng params và queryParams, bạn nên sử dụng ParamMap hoặc queryParamMap, bởi vì chúng có thể sử dụng get('key') dể get về giá trị của param với key hoặc getAll() để get toàn bộ giá trị rất hữu ích ví dụ:

    const id = this.route.snapshot.paramMap.get('ponyId');
    this.ponyService.get(id).subscribe(pony => this.pony = pony);

hoặc ta có thể sử dụng

    this.router.paramMap
        .map(params => params.get('ponyId'))
        .switchMap(id => this.ponyService.get(id))
        .subscribe(pony => this.pony = pony);

canDeactivate

canDeactivate đã thêm một tham số tùy chọn chứa trạng thái tiếp theo (nơi mà bạn muốn navigate tới). và bạn có thể thực hiện logic tốt hơn khi bạn sử dụng navigates từ component hiện tại.

12. Thêm optional parameter

I18n

internationalization đang được cải thiện với những cái nhỏ nhất ví dụ với ngPural trong angular4 đơn giản hơn.

    <div [ngPlural]="value">
      <ng-template ngPluralCase="0">there is nothing</ng-template>
      <ng-template ngPluralCase="1">there is one</ng-template>
    </div>

thay vì trong angular2:

    <div [ngPlural]="value">
      <ng-template ngPluralCase="=0">there is nothing</ng-template>
      <ng-template ngPluralCase="=1">there is one</ng-template>
    </div>

Kết Luận.

angular 4 đã thêm một số tính năng rất hay và hưu ích đúng không nào. hy vọng sau bài này các bạn có thể có một cái nhìn tổng quát về sự thay đổi của angular4 so với angular2. . tham khảo: http://www.code-sample.com/2017/03/angular-4-vs-angular-2-difference.html