Giới thiệu về các khái niệm Angular cơ bản

Angular là một nền tảng và khuôn khổ để xây dựng các ứng dụng một trang sử dụng HTML và TypeScript. Angular được viết bằng TypeScript. Nó triển khai chức năng cốt lõi và chức năng tùy chọn như một tập hợp các thư viện TypeScript mà bạn import vào các ứng dụng của mình.

Kiến trúc của một ứng dụng Angular dựa trên một số khái niệm cơ bản nhất định. Các khối xây dựng cơ bản của Angular framework là các component Angular được tổ chức thành NgModules.

NgModules thu thập mã liên quan thành các bộ chức năng; một ứng dụng Angular được xác định bởi một tập hợp các NgModules. Một ứng dụng luôn có ít nhất một module gốc cho phép khởi động và thường có nhiều module chức năng hơn.

  • Các component định nghĩa các view, là tập hợp các phần tử màn hình mà Angular có thể chọn trong số đó và sửa đổi theo logic và dữ liệu chương trình của bạn.
  • Các component sử dụng các service cung cấp chức năng cụ thể không liên quan trực tiếp đến các view. Các nhà cung cấp dịch vụ có thể được inject vào các component dưới dạng dependency, làm cho mã của bạn trở nên module, có thể tái sử dụng và hiệu quả.

Module, component và service là các lớp sử dụng decorator. Decorator đánh dấu kiểu của chúng và cung cấp siêu dữ liệu cho Angular biết cách sử dụng chúng.

  • Siêu dữ liệu cho một lớp component liên kết nó với một template để định nghĩa một view. Một template kết hợp HTML thông thường với các directive Angular và binding markup cho phép Angular sửa đổi HTML trước khi kết xuất nó để hiển thị.
  • Siêu dữ liệu cho một lớp service cung cấp thông tin mà Angular cần để cung cấp nó cho các component thông qua Dependency Injection (DI) .

Các component của ứng dụng thường định nghĩa nhiều view, được sắp xếp theo thứ bậc. Angular cung cấp service Router giúp bạn xác định tuyến đường giữa các view. Bộ định tuyến cung cấp khả năng điều hướng tinh vi trong trình duyệt.

Xem Bảng chú giải thuật ngữ Angular để biết các định nghĩa cơ bản về các thuật ngữ Angular quan trọng và cách sử dụng.
Đối với ứng dụng mẫu mà trang này mô tả, hãy xem ví dụ trực tiếp hoặc tải xuống ví dụ.

Module

Angular NgModules khác với và bổ sung cho các module JavaScript (ES2015). Một NgModule khai báo bối cảnh biên dịch cho một tập hợp các component dành riêng cho một miền ứng dụng, một quy trình làm việc hoặc một tập hợp các khả năng có liên quan chặt chẽ. Một NgModule có thể liên kết các component của nó với mã liên quan, chẳng hạn như các service, để tạo thành các đơn vị chức năng.

Mọi ứng dụng Angular đều có một module gốc, được đặt tên theo quy ước là AppModule, cung cấp cơ chế bootstrap để khởi chạy ứng dụng. Một ứng dụng thường chứa nhiều module chức năng.

Giống như các module JavaScript, NgModules có thể import chức năng từ các NgModules khác và cho phép các chức năng của riêng chúng được xuất và sử dụng bởi các NgModules khác. Ví dụ: để sử dụng service bộ định tuyến trong ứng dụng của bạn, bạn chỉ cần import NgModule Router.

Tổ chức mã của bạn thành các module chức năng riêng biệt giúp quản lý việc phát triển các ứng dụng phức tạp và thiết kế để có thể tái sử dụng. Ngoài ra, kỹ thuật này cho phép bạn tận dụng khả năng tải chậm (lazy loading) — nghĩa là tải các module theo yêu cầu — để giảm thiểu số lượng mã cần được tải khi khởi động.

Để có hiểu module chi tiết hơn, hãy xem bài viết Giới thiệu về Module.

Component

Mọi ứng dụng Angular đều có ít nhất một component, component gốc kết nối hệ thống phân cấp component với mô hình đối tượng tài liệu trang (DOM). Mỗi component định nghĩa một lớp chứa dữ liệu ứng dụng và logic, và được liên kết với một template HTML định nghĩa một view được hiển thị trong môi trường đích.

Decorator @Component() định nghĩa lớp ngay bên dưới nó là một component, nó cung cấp template và siêu dữ liệu cụ thể cho component.

Decorator là các hàm sửa đổi các lớp JavaScript. Angular định nghĩa một số decorator gắn các loại siêu dữ liệu cụ thể vào các lớp, để hệ thống biết các lớp đó có ý nghĩa gì và chúng sẽ hoạt động như thế nào. Tìm hiểu thêm về decorator.

Template, directive và data binding

Một template kết hợp HTML với thẻ Angular có thể sửa đổi các phần tử HTML trước khi chúng được hiển thị. Mẫu directive cung cấp logic chương trình và binding markup kết nối dữ liệu ứng dụng của bạn và DOM. Có hai loại data binding:

  • Event binding cho phép ứng dụng của bạn phản hồi thông tin đầu vào của người dùng trong môi trường đích bằng cách cập nhật dữ liệu ứng dụng của bạn.
  • Property binding cho phép bạn nội suy các giá trị được tính toán từ dữ liệu ứng dụng của bạn vào HTML.

Trước khi một view được hiển thị, Angular sẽ đánh giá các directive và giải quyết cú pháp liên kết trong template để sửa đổi các phần tử HTML và DOM, theo dữ liệu và logic chương trình của bạn.

Angular hỗ trợ data binding hai chiều, có nghĩa là các thay đổi trong DOM, chẳng hạn như lựa chọn của người dùng, cũng được phản ánh trong dữ liệu chương trình của bạn.

Các template của bạn có thể sử dụng các pipe để cải thiện trải nghiệm người dùng bằng cách chuyển đổi các giá trị để hiển thị.

Ví dụ: sử dụng pipe để hiển thị ngày tháng và giá trị tiền tệ phù hợp với ngôn ngữ của người dùng.

Angular cung cấp các pipe được định nghĩa trước cho các phép biến đổi thông thường và bạn cũng có thể định nghĩa các pipe của riêng mình.

Để thảo luận chi tiết hơn về các khái niệm này, hãy xem Giới thiệu về component.

Service và Dependency Injection

Đối với dữ liệu hoặc logic không được liên kết với một view cụ thể và bạn muốn chia sẻ giữa các component, bạn tạo một lớp service. Định nghĩa lớp service ngay trước decorator @Injectable(). Decorator này cung cấp siêu dữ liệu cho phép các nhà cung cấp khác inject các phụ thuộc vào lớp của bạn.

Dependency Injection (DI) cho phép bạn giữ cho các lớp component của mình gọn gàng và hiệu quả. Chúng không tìm nạp dữ liệu từ máy chủ, xác thực đầu vào của người dùng hoặc đăng nhập trực tiếp vào bảng điều khiển; chúng ủy thác các nhiệm vụ đó cho các service.

Để có tìm hiểu chi tiết hơn về service và dependency injection, hãy xem Giới thiệu về service và DI.

Routing

NgModule Router của Angular cung cấp một service cho phép bạn xác định đường dẫn điều hướng giữa các trạng thái ứng dụng khác nhau và xem cấu trúc phân cấp trong ứng dụng của bạn. Nó được mô phỏng theo các quy ước điều hướng trình duyệt quen thuộc:

  • Nhập URL vào thanh địa chỉ và trình duyệt điều hướng đến trang tương ứng.
  • Nhấp vào các liên kết trên trang và trình duyệt điều hướng đến một trang mới.
  • Nhấp vào nút back và forward của trình duyệt và trình duyệt điều hướng lùi và tới qua lịch sử các trang bạn đã xem.

Bộ định tuyến ánh xạ các đường dẫn giống như URL đến các view thay vì các trang. Khi người dùng thực hiện một hành động, chẳng hạn như nhấp vào liên kết, sẽ tải một trang mới trong trình duyệt, bộ định tuyến sẽ chặn hành vi của trình duyệt và hiển thị hoặc ẩn cấu trúc phân cấp view.

Nếu bộ định tuyến xác định rằng trạng thái ứng dụng hiện tại yêu cầu chức năng cụ thể và module xác định nó chưa được tải, bộ định tuyến có thể tải module một cách lười biếng (lazy load) theo yêu cầu.

Bộ định tuyến diễn giải một URL liên kết theo quy tắc điều hướng view của ứng dụng của bạn và trạng thái dữ liệu. Bạn có thể điều hướng đến các view mới khi người dùng nhấp vào nút hoặc chọn từ hộp thả xuống hoặc để đáp lại một số sự kiện khác từ bất kỳ nguồn nào. Bộ định tuyến ghi lại hoạt động trong lịch sử của trình duyệt, vì vậy các nút quay lại và chuyển tiếp cũng hoạt động.

Để xác định các quy tắc điều hướng, bạn liên kết các navigation path với các component của mình. Đường dẫn sử dụng cú pháp giống như URL để tích hợp dữ liệu chương trình của bạn, giống như cách mà cú pháp template tích hợp view với dữ liệu chương trình của bạn. Sau đó, bạn có thể áp dụng logic chương trình để chọn view sẽ hiển thị hoặc ẩn, đáp ứng với đầu vào của người dùng và các quy tắc truy cập của riêng bạn.

Để tìm hiểu chi tiết hơn, hãy xem Định tuyến và điều hướng.

Tiếp theo là gì

Bạn đã học những kiến ​​thức cơ bản về các khối xây dựng chính của một ứng dụng Angular. Sơ đồ sau đây cho thấy các phần cơ bản này có liên quan như thế nào.

Các phần cơ bản của Angular

Component và template kết hợp cùng với nhau định nghĩa một view Angular.

  • Decorator trên một lớp component sẽ thêm siêu dữ liệu, bao gồm một tham chiếu tới template được liên kết.
  • Các directive và binding markup trong template của component sửa đổi view dựa trên dữ liệu và logic của chương trình.

Dependency Injection (DI) cung cấp các service cho component, chẳng hạn như service bộ định tuyến cho phép bạn xác định điều hướng giữa các view.

Angular
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.