Angular là gì?

Chủ đề này có thể giúp bạn hiểu về Angular: Angular là gì, những ưu điểm của nó và những gì bạn có thể mong đợi khi bắt đầu xây dựng các ứng dụng của mình.

Angular là một nền tảng lập trình, được xây dựng trên TypeScript. Là một nền tảng, Angular bao gồm:

  • Một framework dựa trên component để xây dựng các ứng dụng web có thể mở rộng.
  • Một bộ sưu tập các thư viện được tích hợp tốt bao gồm nhiều tính năng như: định tuyến, quản lý biểu mẫu, giao tiếp máy khách-máy chủ, 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, kiểm tra và cập nhật mã của mình.

Với Angular, bạn đang tận dụng một nền tảng có thể mở rộng quy mô từ các dự án của một nhà phát triển đến các ứng dụng cấp doanh nghiệp. Angular được thiết kế để giúp cập nhật dễ dàng nhất có thể, vì vậy bạn có thể tận dụng những phát triển mới nhất mà không tốn nhiều công sức. Hơn hết, hệ sinh thái Angular bao gồm một nhóm đa dạng hơn 1,7 triệu nhà phát triển, tác giả thư viện và người tạo nội dung.

Ứng dụng Angular: Những điều cần thiết

Phần này giải thích các ý tưởng cốt lõi đằng sau Angular. Hiểu những ý tưởng này có thể giúp bạn thiết kế và xây dựng các ứng dụng của mình hiệu quả hơn.

Component

Component là các khối xây dựng tạo nên một ứng dụng. Một component bao gồm một lớp TypeScript với một decorator @Component(), một template HTML và style. Decorator @Component() chỉ định thông tin cụ thể về Angular sau:

  • Bộ chọn CSS xác định cách component được sử dụng trong template. Các phần tử HTML trong template của bạn khớp với bộ chọn này sẽ trở thành các instance của component.
  • Template HTML hướng dẫn Angular cách hiển thị component.
  • Một tập hợp các kiểu CSS tùy chọn định nghĩa style của các phần tử HTML của template.

Sau đây là một component Angular tối thiểu.

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

@Component({
  selector: 'hello-world',
  template: `
    <h2>Hello World</h2>
    <p>This is my first component!</p>
    `,
})
export class HelloWorldComponent {
  // The code in this class drives the component's behavior.
}

Để sử dụng component này, bạn viết như sau trong một template:

<hello-world></hello-world>

Khi Angular hiển thị component này, DOM kết quả trông giống như sau:

<hello-world>
    <h2>Hello World</h2>
    <p>This is my first component!</p>
</hello-world>

Mô hình component của Angular cung cấp khả năng đóng gói mạnh mẽ và cấu trúc ứng dụng trực quan. Các component cũng giúp ứng dụng của bạn dễ dàng viết unit test hơn và có thể cải thiện khả năng đọc tổng thể mã của bạn.

Để biết thêm thông tin về những gì bạn có thể làm với các component, hãy xem mục Components.

Template

Mọi component đều có một template HTML khai báo cách component đó hiển thị. Bạn có thể khai báo template này trực tiếp bên trong component hoặc sử dụng đường dẫn file template.

Angular mở rộng HTML với cú pháp bổ sung cho phép bạn chèn các giá trị động từ component của mình. Angular tự động cập nhật DOM được hiển thị khi trạng thái component của bạn thay đổi. Một ứng dụng của tính năng này là chèn văn bản động, như trong ví dụ sau.

<p>{{ message }}</p>

Giá trị cho thông báo đến từ lớp component:

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

@Component ({
  selector: 'hello-world-interpolation',
  templateUrl: './hello-world-interpolation.component.html'
})
export class HelloWorldInterpolationComponent {
    message = 'Hello, World!';
}

Khi ứng dụng tải component và template của nó, người dùng sẽ thấy như sau:

<p>Hello, World!</p>
Lưu ý việc sử dụng dấu ngoặc nhọn kép {{}} - chúng hướng dẫn Angular nội suy nội dung bên trong component.

Angular cũng hỗ trợ các ràng buộc thuộc tính, để giúp bạn thiết lập giá trị cho các property và attribute của các phần tử HTML và chuyển các giá trị cho logic hiển thị của ứng dụng của bạn.

<p [id]="sayHelloId" [style.color]="fontColor">You can set my color in the component!</p>
Lưu ý việc sử dụng dấu ngoặc vuông [] - cú pháp đó chỉ ra rằng bạn đang ràng buộc property hoặc attribute với một giá trị trong lớp component.

Bạn cũng có thể khai báo trình lắng nghe sự kiện để lắng nghe và phản hồi các hành động của người dùng như nhấn tổ hợp phím, chuyển động chuột, nhấp chuột, ... Bạn khai báo trình xử lý sự kiện bằng cách chỉ định tên sự kiện trong dấu ngoặc đơn:

<button (click)="sayMessage()" [disabled]="canClick">Trigger alert message</button>

Ví dụ trước gọi phương thức sayMessage() được định nghĩa trong lớp component:

sayMessage() {
    alert(this.message);
}

Sau đây là một ví dụ về nội suy và liên kết trong template Angular:

Mã nguồn component trong file hello-world-bindings.component.ts

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

@Component ({
  selector: 'hello-world-bindings',
  templateUrl: './hello-world-bindings.component.html'
})
export class HelloWorldBindingsComponent {
    fontColor = 'blue';
    sayHelloId = 1;
    canClick = false;
    message = 'Hello, World';
    sayMessage() {
        alert(this.message);
    }
}

Mã nguồn template trong file hello-world-bindings.component.html

<button (click)="sayMessage()" [disabled]="canClick">Trigger alert message</button>
<p [id]="sayHelloId" [style.color]="fontColor">You can set my color in the component!</p>

Bạn có thể thêm chức năng bổ sung cho template của bạn thông qua việc sử dụng các directive. Các directive phổ biến nhất trong Angular là *ngIf*ngFor. Bạn có thể sử dụng các directive để thực hiện nhiều tác vụ khác nhau, chẳng hạn như sửa đổi động cấu trúc DOM. Và bạn cũng có thể tạo các directive tùy chỉnh của riêng mình để tạo trải nghiệm người dùng tuyệt vời.

Đoạn mã sau là một ví dụ về directive *ngIf.

Mã nguồn component trong file hello-world-ngif.component.ts

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

@Component({
    selector: 'hello-world-ngif',
    templateUrl: './hello-world-ngif.component.html'
  })
export class HelloWorldNgIfComponent {
  message = 'I\'m read only!';
  canEdit = false;

  onEditClick() {
    this.canEdit = !this.canEdit;
    if (this.canEdit) {
      this.message = 'You can edit me!';
    } else {
      this.message = 'I\'m read only!';
    }
  }
}

Mã nguồn template trong file hello-world-ngif.component.html

<h2>Hello World: ngIf!</h2>
<button (click)="onEditClick()">Make text editable!</button>
<div *ngIf="canEdit; else noEdit">
    <p>You can edit the following paragraph.</p>
</div>
<ng-template #noEdit>
    <p>The following paragraph is read only. Try clicking the button!</p>
</ng-template>
<p [contentEditable]="canEdit">{{ message }}</p>

Các khai báo template của Angular cho phép bạn tách biệt logic của ứng dụng khỏi giao diện của nó một cách rõ ràng. Các template dựa trên HTML tiêu chuẩn, vì vậy chúng dễ dàng xây dựng, bảo trì và cập nhật.

Để biết thêm thông tin về những gì bạn có thể làm với các mẫu, hãy xem mục Templates.

Dependency injection

Dependency injection cho phép bạn khai báo các phụ thuộc của các lớp TypeScript của bạn mà không cần quan tâm đến việc khởi tạo chúng. Thay vào đó, Angular xử lý việc khởi tạo cho bạn.

Mẫu thiết kế này cho phép bạn viết mã có thể kiểm tra và linh hoạt hơn. Mặc dù việc hiểu được dependency injection không phải là điều quan trọng để bắt đầu sử dụng Angular, chúng tôi thực sự khuyên bạn nên sử dụng nó như một best practice và nhiều khía cạnh của Angular hãy tận dụng nó ở một mức độ nào đó.

Để minh họa cách hoạt động của dependency injection, hãy xem xét ví dụ sau. File logger.service.ts định nghĩa lớp Logger. Lớp này chứa một hàm writeCount ghi một số vào Console.

import { Injectable } from '@angular/core';

@Injectable({providedIn: 'root'})
export class Logger {
  writeCount(count: number) {
    console.warn(count);
  }
}

Tiếp theo, file hello-world-di.component.ts định nghĩa một component Angular. Component này chứa một button sử dụng chức năng writeCount của lớp Logger. Để truy cập hàm đó, dịch vụ Logger được đưa vào lớp HelloWorldDependencyInjectionComponent bằng cách thêm private logger: Logger vào hàm khởi tạo.

import { Component } from '@angular/core';
import { Logger } from '../logger.service';

@Component({
  selector: 'hello-world-di',
  templateUrl: './hello-world-di.component.html'
})
export class HelloWorldDependencyInjectionComponent  {
  count = 0;

  constructor(private logger: Logger) {
  }

  onLogMe() {
    this.logger.writeCount(this.count);
    this.count++;
  }
}

Để biết thêm thông tin về tiêm phụ thuộc và Angular, hãy xem mục Dependency injection in Angular.

Angular CLI

Angular CLI là cách nhanh nhất, dễ nhất và được khuyến nghị để phát triển các ứng dụng Angular. Angular CLI giúp thực hiện một số tác vụ dễ dàng. Dưới đây là một số ví dụ:

ng build Biên dịch một ứng dụng Angular vào một thư mục đầu ra.
ng serve Build và chạy ứng dụng của bạn, rebuild khi tệp thay đổi.
ng generate Tạo hoặc sửa đổi tệp dựa trên giản đồ.
ng test Chạy các bài kiểm tra unit test trên một dự án nhất định.
ng e2e Build và chạy một ứng dụng Angular, sau đó chạy các bài kiểm tra end-to-end test.

Bạn sẽ thấy Angular CLI là một công cụ có giá trị để xây dựng các ứng dụng của bạn.

Để biết thêm thông tin về Angular CLI, hãy xem mục CLI Reference.

First-party libraries

Phần "Ứng dụng Angular: Những điều cần thiết" cung cấp một cái nhìn tổng quan ngắn gọn về một số yếu tố kiến ​​trúc chính mà bạn sẽ sử dụng khi xây dựng các ứng dụng Angular.

Nhưng nhiều lợi ích của Angular thực sự trở nên rõ ràng khi ứng dụng của bạn phát triển và bạn muốn thêm các chức năng bổ sung như điều hướng trang web hoặc cho phép người dùng nhập dữ liệu đầu vào.

Đó là lúc bạn có thể tận dụng nền tảng Angular để kết hợp một trong nhiều thư viện của bên thứ nhất (First-party libraries) mà Angular cung cấp.

Một số thư viện có sẵn cho bạn bao gồm:

Angular Router Điều hướng và định tuyến nâng cao phía máy khách dựa trên các component Angular. Hỗ trợ tải chậm (lazy-loading), các tuyến đường lồng nhau (nested route), khớp đường dẫn tùy chỉnh (custom path matching) và hơn thế nữa.
Angular Forms Hệ thống thống nhất để xác thực biểu mẫu.
Angular HttpClient HTTP client mạnh mẽ có thể hỗ trợ giao tiếp server-client nâng cao hơn.
Angular Animations Hiệu ứng animation dựa trên trạng thái ứng dụng.
Angular PWA Các công cụ để xây dựng Ứng dụng web PWA bao gồm service worker và tệp Web app manifest.
Angular Schematics Các công cụ scaffolding, refactoring và update tự động giúp đơn giản hóa việc phát triển ở quy mô lớn.

Các thư viện này mở rộng chức năng ứng dụng của bạn đồng thời cho phép bạn tập trung nhiều hơn vào các tính năng làm cho ứng dụng của bạn trở nên độc đáo. Và bạn có thể thêm các thư viện này khi biết rằng chúng được thiết kế để tích hợp liền mạch và cập nhật đồng thời với Angular framework.

Các thư viện này chỉ được yêu cầu nếu và khi nào chúng có thể giúp bạn thêm chức năng vào các ứng dụng của mình hoặc giải quyết một vấn đề cụ thể.

Bước tiếp theo

Chủ đề này nhằm cung cấp cho bạn một cái nhìn tổng quan ngắn gọn về Angular là gì, những lợi thế mà nó cung cấp và những gì bạn có thể mong đợi khi bắt đầu xây dựng các ứng dụng của mình.

Để xem cách Angular hoạt động, hãy xem hướng dẫn Bắt đầu với ứng dụng Angular đơn giản. Hướng dẫn này sử dụng stackblitz.com, vì vậy bạn có thể khám phá một ví dụ làm việc của Angular mà không cần bất kỳ yêu cầu cài đặt nào.

AngularTypeScript
Bài Viết Liên Quan:
Trình khởi động bootstrap trong Angular
Trung Nguyen 26/07/2021
Trình khởi động bootstrap trong Angular

Trong hướng dẫn này, chúng ta sẽ tìm hiểu về trình khởi động bootstrap và cách Angular hoạt động bên trong và khởi động ứng dụng của chúng ta.

Cách tạo một dự án mới trong Angular
Trung Nguyen 25/07/2021
Cách tạo một dự án mới trong Angular

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách sử dụng Angular CLI để tạo một dự án mới trong Angular.

Không gian làm việc và Cấu trúc file dự án
Trung Nguyen 22/07/2021
Không gian làm việc và Cấu trúc file dự án

Trong hướng dẫn này, bạn sẽ tìm hiểu về không dan làm việc và cấu trúc file dự án ứng dụng, dự án thư viện của Angular.

Service và Dependency Injection trong Angular
Trung Nguyen 21/07/2021
Service và Dependency Injection trong Angular

Trong bài viết này, bạn sẽ tìm hiểu vì sao Angular lại tách riêng component và service, cách sử dụng dependency injection để khởi tạo instance của service.