Angular 4 dành cho angular 1 developer

Dạo gần đây mình đang có nghiên cứu về angular 4, và cách tốt nhất để hiểu về một thứ gì đó là migrate những thứ mình chưa biết sang những thứ mình đã biết. OK, Let s go.

Component trong angular 4

Có khá nhiều sự nhầm lẫn cho rằng component trong angular 4 tương ứng với controller trong angular 1, thật ra đây là quan điểm sai vì 2 mô hình quản lí frontend này khác nhau. Controller trong angular 1 dùng để quản lí một phần view, còn component thì có tác dụng lớn hơn thế, ngoài quản lí một phần view nó còn phân tách ra view ra nữa, và angular 1 bắt đầu từ bản 1.5 cũng đã bổ xung tính năng component.

// Angular 1
const module = angular.module('myModule', []);
module.component('myComponent', {
  template: '<div>Hello World!</div>'
});

/***************************************************************/

// Angular 4
import {Component} from '@angular/core';

@Component({
  selector: 'my-component',
  template: '<div>Hello World</div>'
})
class MyComponent {}

Directive trong angular 4

Directive trong angular 1 và angular 4 hoàn toàn mapping với nhau. Nhưng vẫn có một chút khác biệt đó là trong angular 1 chỉ có khái niêmj attribute directive, có nghĩa là directive sẽ thay đổi attribute của dom, còn structure directive sẽ thay đổi cáu trúc dom, nói chung là giống hệt với angular 1 chỉ có điều là nó thêm 1 defaul directive trong core angular 4 đó là directive ng-switch

// Angular 1
const module = angular.module('myModule', []);
module.component('myComponent', {
  template: `
    <div 
      ng-if="$ctrl.isShown" 
      ng-click="$ctrl.onClick($event)" 
      ng-class="{blue: $ctrl.isBlue}">
        Hello World!
    </div>
    <ul>
      <li ng-repeat="name in $ctrl.names">{{name}}</li>
    </ul>
  `
});

/***************************************************************/

// Angular 4
import {Component} from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <div 
      *ngIf="isShown" 
      (click)="onClick($event)" 
      [ngClass]="{blue: isBlue}">
        Hello World!
    </div>
    <ul>
      <li *ngFor="let name of names">{{name}}</li>
    </ul>
  `
})
class MyComponent {}

Input Model trong angular 4

cách sử dụng thì mình sẽ để sample code ngay dưới đây, còn về mục đích sử dụng thì bạn phải lưu ý rằng trong angular 2 để tăng hiệu năng sử dụng tính năng two way binding đã bị ngắt khỏi default. vì vây để sử dụng nó bạn phải sử dụng cú pháp:

// one way binding
<input type="text" [ngModel]="foo.bar" />
// two binding
<input id="name" name="name" [(ngModel)]="name" />

và cả 2 đều có những attribute to valid như : ng-valid, ng-invalid, ng-dirty, ng-pristine...... giôngs angular 1

// Angular 1
const module = angular.module('myModule', []);
module.component('myComponent', {
  template: `
    <form name="myForm">
      <label for="name">Your Name</label>
      <input id="name" name="name" ng-model="$ctrl.name" required />
      <div ng-if="myForm.name.$error">Name is Required</div>
    </form>
  `
});

/***************************************************************/

// Angular 4
import {Component} from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <form>
        <label for="name">Your Name</label>
        <input id="name" name="name" [(ngModel)]="name" required #nameField="ngModel" />
        <div *ngIf="!nameField.valid">Name is Required</div>
    </form>
  `
})
class MyComponent {
  name: string;
}

Filter trong angular 4

trong angular 1 khái niệm này được gọi là filter conf trong angular 2 thì nó được gọi là pipe, mình cũng rất ít sử dụng nó nên cũng chỉ đọc qua qua chứ không tìm hiểu kĩ

// Angular 1
const module = angular.module('myModule', []);
module.filter('kebabCase', () => (input) => input.toLowerCase().replace(' ', '-'));

/***************************************************************/

// Angular 4
import {Pipe, PipeTransform} from '@angular/core';

@Pipe({name: 'kebabCase'})
class KebabCasePipe implements PipeTransform {
  transform(input: string): string {
    return input.toLowerCase().replace(' ', '-')
  }
}

// Usage (Angular 1 + Angular 2)
// {{'Hello World' | kebabCase}}

Providers/Services/Factories/Values/Constants trong angular 4

một điều rất tuyệt vời đó là tất cả các khái niệm này trong angular 1 đều đã được gộp lại thành một khái niệm suy nhất trong angular 2 đó là các module injectable, được sử dụng như những depndence injection.

// Angular 1
const module = angular.module('myModule', []);
module.service('UserService', ['$http', function ($http) {
  
  this.getUsers = () => {
    // Code to retrieve users here
  }

}]);

/***************************************************************/

// Angular 4
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
class UserService {
 
  constructor(private http: Http) {}
  
  getUsers() {
     // Code to retrieve users here
  }
  
}

Code Demo

https://github.com/tuanna2704/angular4-rails5