# Angular Overview

Angular là một frontend framework, cung cấp các cấu trúc và thành phần để phát triển một giao diện website phức tạp. Việc sử dụng TypeScript giúp cho nó chặt trẽ và rõ ràng, tuy nhiên cũng làm cho quá trình tích hợp trở nên khó khăn và tốn nhiều thời gian phát triển.

Cấu trúc của Angular dựa trên `component` hay còn gọi là `based-component structure`. Các thành phần trên trang web sẽ được chia nhỏ thành các component khác nhau, điều này làm tăng khả năng tái sử dụng, dễ dàng mở rộng và bảo trì. Vì vậy, Angular thích hợp hơn với các dự án vừa và lớn.

## Component

Giống như khi lắp ghép một ngôi nhà, component trong Angular đóng vai trò như những module xây dựng trong kiến trúc của dự án. Nó chứa các thông tin riêng và các phương thức để tương tác với người dùng cũng như với các component khác.

Mỗi một component có thể được định nghĩa trong một file duy nhất nhưng để dễ bảo trì, nên tách các thành phần khác nhau ra các file riêng, tất cả nằm trong cùng một folder:

├── app/
│   ├── home/
│   │   ├── home.component.ts
│   │   ├── home.component.html
│   │   └── home.component.css
│   └── app.module.ts
├── index.html
└── main.ts

Trong Angular, mỗi component sẽ được định nghĩa thông qua 3 thành phần là: Metadata, Class và Template. Dưới đây là ví dụ và giải thích chi tiết cho từng thành phần:

* **Metadata**: Chứa các thông tin quan trọng của component như selector, styles, providers...Được xác định thông qua `@Component` decorator:

  import { Component } from '@angular/core'
  import { HomeService } from './home.service'
  
  @Component({
    selector: 'home-component',
    templateUrl: ['./home.component.html'],
    styles: ['./home.component.css'],
    providers: [HomeService]
  })

* **Class**: Là một TypeScript class định nghĩa ngay phía dưới phần `Metadata`, xác định các thuộc tính, phương thức của component:

  export class HomeComponent() {
    message = 'Well come!';
  }

* **Template**: Là cấu trúc HTML, trực tiếp tương tác với người dùng và giao tiếp với `Class` thông qua các thuộc tính và phương thức mà nó phụ thuộc:

  <h1>{{ message }}</h1>
  <p>This is inside the HomeComponent</p>

Như vậy có thể thấy, component trong Angular cũng có cấu trúc tương đối giống với component trong Vuejs và React.

## Lifecyle

Trong Angular, mỗi component từ lúc xuất hiện cho đến kết thúc vòng đời sẽ đều trải qua các quá trình đã được xác định trước. Có thể chia ra thành 3 quá trình chính:

* **Data initialization**: Đây là quá trình inject services, providers...khởi tạo dữ liệu mặc định.

* **View initialization**: Dữ liệu sau khi được nạp sẽ được binding sang template và sau đó render view.

* **Destroying phase:** Là quá trình component bị remove khỏi DOM.

Tương ứng với các quá trình trên, Angular cung cấp các hooks để dễ dàng quản lý vòng đời của một component.


* **ngOnChange**: Giống như khi dùng `$watch` trong Angularjs nhưng khác ở chỗ hook này được chạy khi bất cứ giá trị đầu vào nào của component bị thay đổi.

* **ngOnInit**: Chạy sau khi component đã được khởi tạo và các giá trị đầu vào đã được thiết lập.

* **ngDoCheck**: Mỗi khi có bất kỳ thay đổi nào trên component, Angular sẽ kiểm tra để xác định phạm vị và cập nhật lại view nếu cần thiết. Hook này được gọi sau khi quá trị kiểm tra hoàn tất.

* **ngAfterContentInit**: Chạy sau khi content của component được khởi tạo, tuy nhiên lúc này nó chưa được hiển thị trên view.

* **ngAfterContentChecked**: Khác với `ngDoCheck`, được gọi khi kiểm tra tất cả các thay đổi liên quan đến dữ liệu đầu vào, `ngAfterContentChecked` chỉ được gọi sau quá trình kiểm tra sự thay đổi trong nội dung được trèn vào thông qua content projection của component.

* **ngAfterViewInit**: Chạy sau khi view của component được hiển thị.

* **ngAfterViewChecked**: Tương tự như `ngAfterContentChecked` nhưng phạm vi của hook này bao gồm toàn bộ view của component.

* **ngOnDestroy**: Hook này được gọi khi component bị remove khỏi DOM.

Ngoài ra còn có phương thức `constructor` luôn được gọi trước tất cả các hooks trên.