Table of Contents

What is Angular?

Key Features

• Components
• Templates
• Directives
• Dependency Injection

Summary

References

What is angular?

Angular là một nền tảng phát triển, được xây dựng trên TypeScript.

Là một nền tảng, Angular bao gồm:

• Framework dựa trên components để xây dựng các ứng dụng web có thể mở rộng
• Một tập hợp các thư viện được tích hợp tốt bao gồm nhiều tính năng khác nhau, bao gồm định tuyến(routing), quản lý biểu mẫu(form), liên lạc giữa máy khách và máy chủ(client -server sử dụng http), v.v.
• Một bộ công cụ dành cho nhà phát triển giúp bạn phát triển, xây dựng, thử nghiệm và cập nhật mã của mình

Với Angular, bạn đang tận dụng nền tảng có thể mở rộng quy mô từ các dự án dành cho nhà phát triển đơn lẻ đến các ứng dụng cấp doanh nghiệp. Điều tuyệt vời nhất là hệ sinh thái Angular bao gồm một nhóm đa dạng gồm hơn 1,7 triệu nhà phát triển, tác giả thư viện và người sáng tạo nội dung.

Key features

Components

Trong Angular, component là một khối xây dựng của giao diện người dùng đóng gói các thành phần logic và giao diện người dùng của ứng dụng.

Các component là các khối xây dựng chính của ứng dụng Angular. Mỗi component bao gồm:

• Một template HTML mô tả nội dung sẽ hiển thị trên trang
• Một class TypeScript xác định hành vi
• Một bộ chọn CSS định nghĩa cách sử dụng component trong template
• Tuỳ chọn, các kiểu CSS áp dụng cho template

Khai báo style cho component được sử dụng trong template của nó có hai cách:

• Thông qua việc tham chiếu đến một tệp, hoặc
• Trực tiếp bên trong thành phần.

Để khai báo kiểu dáng cho một thành phần trong một tệp riêng biệt, thêm thuộc tính styleUrls vào trang trí @Component.

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
  styleUrls: ['./component-overview.component.css']
})

Để khai styles trong component, thêm thuộc tính styles vào decorator @Component chứa các kiểu dáng bạn muốn sử dụng.

@Component({
  selector: 'app-component-overview',
  template: '<h1>Hello World!</h1>',
  styles: ['h1 { font-weight: normal; }']
})

Thuộc tính style lấy một mảng các chuỗi chứa các khai báo quy tắc CSS.

Ví dụ này minh họa một thành phần Angular cơ bản đóng gói một thông điệp chào mừng. Các thành phần rất quan trọng để cấu trúc các ứng dụng Angular và thúc đẩy khả năng sử dụng lại.

Templates

Trong Angular, template là bản thiết kế chi tiết cho một phần của giao diện người dùng (UI). Các mẫu được viết bằng HTML và cú pháp đặc biệt có thể được sử dụng trong một mẫu để xây dựng trên nhiều tính năng của Angular.

Ví dụ: xem lại ví dụ phần component, template chính là các phần tử HTML được định nghĩa trực tiếp hoặc thông qua tệp riêng biệt.

Directives

Trong Angular, directives là các điểm đánh dấu được gắn vào các thành phần trong HTML nhằm cung cấp chức năng bổ sung. Chúng là một cách để mở rộng HTML với các thuộc tính hoặc hành vi mới, cho phép chúng ta tạo ra các thành phần động và tương tác.

Ví dụ:

<!-- app.component.html -->
<div *ngIf="showElement">This element is shown conditionally.</div>

Explanation:

• ngIf được áp dụng cho một phần tử <div>.
• Biểu thức showElement được đánh giá, và nếu nó là true, <div> sẽ được hiển thị; nếu không, nó sẽ bị loại bỏ khỏi DOM.
• Điều này cho phép hiển thị nội dung động dựa trên tính đúng sai của biểu thức.

Có rất nhiều directives trong Angular, dưới đây là một số directives thường dùng.

1. ngIf:
   • Definition: Conditionally renders or removes an element based on a given expression.
   • Example: <div *ngIf="isVisible">Visible content</div>
2. ngFor:
   • Definition: Iterates over a collection and renders HTML for each item.
   • Example: <li *ngFor="let item of items">{{ item.name }}</li>
3. ngModel:
   • Definition: Creates a two-way data binding for form elements, allowing synchronization between the model and the view.
   • Example: <input [(ngModel)]="username" />
4. ngClass:
   • Definition: Conditionally applies CSS classes to an element based on expression evaluation.
   • Example: <div [ngClass]="{ 'highlight': isHighlighted }">Content</div>
5. ngStyle:
   • Definition: Conditionally applies inline styles to an element based on expression evaluation.
   • Example: <div [ngStyle]="{ 'color': textColor, 'font-size': fontSize }">Styled Content</div>
6. ngSwitch:

• Definition: Conditionally renders content based on multiple, mutually exclusive expressions.

  <div [ngSwitch]="status">
    <div *ngSwitchCase="'active'">Active Content</div>
    <div *ngSwitchCase="'inactive'">Inactive Content</div>
    <div *ngSwitchDefault>Default Content</div>
  </div>
  

7. ngShow / ngHide:
   • Definition: Shows or hides an element based on the truthiness of a given expression.
   • Example: <div [ngShow]="isVisible">Show when isVisible is true</div>
8. ngSubmit:
   • Definition: Binds to the submit event of a form, triggering a function when the form is submitted.
   • Example: <form (ngSubmit)="submitForm()">...</form>
9. ngClass and ngStyle:
   • Definition: Provides a way to conditionally apply multiple CSS classes or inline styles.
   • Example: <div [ngClass]="{ 'error': isError, 'important': isImportant }">Styled Content</div>
10. ngNonBindable:
    • Definition: Prevents Angular from compiling or binding to the content within an element.
    • Example: <div ngNonBindable>{{ dynamicContent }}</div>

Dependency injection:

Dependency injection giúp chúng ta:

• Phát triển phần nhỏ cần sử dụng tính năng từ các lớp khác.
• Dependency Injection (DI) là mẫu thiết kế và cơ chế để phân phối các phần của ứng dụng khi cần.
• Angular hỗ trợ DI để tăng linh hoạt và tính mô đun trong ứng dụng.
• Phần phụ thuộc thường là dịch vụ trong Angular, nhưng cũng có thể là giá trị như chuỗi hoặc hàm.
• Bộ tiêm tự động khởi tạo các phần phụ thuộc khi cần, sử dụng nhà cung cấp dịch vụ hoặc giá trị đã được định cấu hình.

Trong Angular, có 3 loại dependency injection chính:

Constructor Injection:

• Mô tả: Phụ thuộc được chuyển vào qua tham số của hàm tạo (constructor) của một class.

constructor(private authService: AuthService) { }

◦ Giải thích: Phụ thuộc được chuyển vào thông qua tham số của khởi hàm tạo. Trong ví dụ, authService là một đối tượng của AuthService.

Method Injection:

• Mô tả: Phụ thuộc được chuyển vào thông qua một phương thức.

setLogger(logger: Logger) {
  this.logger = logger;
}

Property Injection:

• Mô tả: Phụ thuộc được chuyển vào qua một thuộc tính của class.

@Injectable()
class ProductService {
  @Inject(Logger) private logger: Logger;
}

Các loại DI này cho phép Angular quản lý và cung cấp các phụ thuộc khi cần thiết, giúp tăng khả năng kiểm thử, tính tái sử dụng và linh hoạt trong quá trình phát triển ứng dụng.

Tóm tắt

• Angular Overview:
  • Angular là một nền tảng phát triển, xây dựng trên TypeScript.
  • Bao gồm framework dựa trên components, thư viện tích hợp, và bộ công cụ hỗ trợ phát triển.
• Components:
  • Là khối xây dựng chính của giao diện người dùng trong Angular.
  • Bao gồm template HTML, class TypeScript, selector CSS, và có thể có kiểu dáng được khai báo ngoại trời hoặc bên trong component.
• Templates:
  • Là bản thiết kế chi tiết cho một phần của giao diện người dùng.
  • Viết bằng HTML, sử dụng cú pháp đặc biệt để tích hợp các tính năng của Angular.
• Directives:
  • Đánh dấu HTML để cung cấp chức năng bổ sung.
  • Ví dụ: ngIf conditionally renders elements based on an expression.
• Dependency Injection (DI):
  • Mẫu thiết kế và cơ chế phân phối các phần của ứng dụng khi cần.
  • Các loại DI: Constructor Injection, Method Injection, Property Injection.
  • Tăng tính linh hoạt và tái sử dụng trong phát triển ứng dụng Angular.
• Conclusion:
  • Angular cung cấp một nền tảng mạnh mẽ cho việc phát triển ứng dụng web từ dự án nhỏ đến doanh nghiệp.
  • Sử dụng components, templates, directives, và DI giúp tạo ra các ứng dụng linh hoạt, dễ bảo trì và có khả năng mở rộng.

References

What is Angular? https://angular.io/guide/what-is-angular

Understanding Angular https://angular.io/guide/understanding-angular-overview