Bắt đầu khám phá Angular App từ dự án được tạo bởi Angular CLI, bạn sẽ được dẫn đến một thế giới gồm nhiều file và thư mục. Vậy, ứng dụng của bạn bắt đầu từ đâu?

Đầu tiên, điểm khởi đầu là thư mục “src”, nơi bạn có thể tìm thấy tập tin “index.html”. Trong thẻ body của nó, có một thẻ HTML khá đặc biệt thường là “app-root”. Đây không phải là một thẻ HTML tiêu chuẩn, đó là một cái gì đó custom của ứng dụng, một loại “bọc ngoài” cho một view nào đó trong ứng dụng.

Sau đó, bạn sẽ mở file “main.ts”, nơi bắt đầu của ứng dụng. Bên trong đó là mã TypeScript thông thường, một module (ES module/TS module) đã import các thứ từ các thư viện/module khác để sử dụng. File này không có gì đặc biệt, chỉ đơn giản là gọi và thực thi các hàm để khởi động ứng dụng.

Và sau một số chỉ dẫn, bạn sẽ tìm thấy file “app/app.module.ts”. Đây là một TypeScript module khác, chứa một class với NgModule (một decorator TS). Đây chính là cách chúng ta tổ chức chức năng của Angular application. Mỗi ứng dụng Angular được phân chia thành các NgModule, và đến thời điểm hiện tại, ứng dụng của chúng ta có AppModule (còn được gọi là root NgModule). Trong tương lai, NgModule có thể không còn cần thiết cho ứng dụng nữa.

Trong AppModule, một trong những phần quan trọng nhất là các Component, ví dụ như AppComponent, được import từ file “app.component.ts”. Mỗi component định nghĩa một view tương ứng trong ứng dụng. Đối với ứng dụng Angular, việc ghép các Component lại với nhau giống như việc xây dựng tòa nhà từ các phần cấu trúc khác nhau, từ các Component có sẵn hoặc phải tạo mới.

AppComponent là root component của ứng dụng, kèm theo một TS decorator khác là Component. Decorator này thêm vào class AppComponent một số thông tin như selector, template (định nghĩa view của component), v.v. View của một component là một phần mở rộng của HTML, có nhiều tính năng hơn HTML thông thường, cho phép nhúng các component/directive khác.

Cuối cùng, tag “app-root” mà chúng ta nhìn thấy từ “index.html” thực chất thuộc về AppComponent sau khi chúng ta đi sâu vào tìm hiểu.

Tạo Component mới

Bắt đầu bằng việc khởi tạo một component mới. Trong Angular, một ứng dụng thường sẽ gồm nhiều component, do đó không nên chứa tất cả mã code trong AppComponent. Hãy tạo một component mới và xem kết quả như thế nào.

Đầu tiên, tạo file “hello.component.ts” cùng thư mục với “app.component.ts” và thêm mã code:

export class HelloComponent {}

Đây là một class TypeScript rất đơn giản, bây giờ chúng ta sẽ thêm meta-data cho nó như sau:

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

@Component({
  selector: "app-hello",
  template: ` <h2>Hello there!</h2> `,
})
export class HelloComponent {}

Đã có một component mới, rất đơn giản đúng không? Với selector “app-hello” này, liệu chúng ta có thể sử dụng nó như AppComponent không? Hãy mở file “app.component.html” và thêm selector của HelloComponent vừa tạo:

<app-hello></app-hello>

Lưu file và khởi chạy ứng dụng với lệnh “ng serve” như lúc ban đầu. Nhưng, có lỗi xuất hiện.

error NG8001: 'app-hello' is not a known element:
If app-hello is an Angular component, then verify that it is part of this module.
If app-hello is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Rõ ràng, thông báo lỗi đã gợi ý cách khắc phục. Chúng ta chỉ tạo ra component mới mà chưa khai báo nó thuộc NgModule nào. Điều này giống như khi bạn mới gia nhập một công ty mà chưa xác định được phòng ban nào quản lý bạn, có thể khiến bạn không được phép vào văn phòng vì không ai biết bạn làm gì.

Trong app hiện tại, chỉ có một NgModule là AppModule. Chúng ta sẽ thêm component mới vào đó, nhưng làm thế nào? Khi mở AppModule, bạn sẽ thấy AppComponent được thêm vào NgModule decorator, và có lẽ component mới cũng cần phải làm như vậy. Chúng ta nhìn thấy từ khóa khá dễ hiểu: declarations.

import { HelloComponent } from "./hello.component";

declarations: [
  AppComponent,
  HelloComponent,
],

Ứng dụng đã chạy thành công. Nhìn kỹ lại, việc tạo một component cũng không quá phức tạp. Đồng thời, mảng declarations có thể chứa cả component, pipe, directive (có lẽ là một khái niệm khác trong Angular). Ngoài cách tạo component bằng tay như trên, bạn cũng có thể tạo bằng Angular CLI:

ng generate component hello

Với cách này, bạn sẽ không phải thực hiện các bước thủ công lặp đi lặp lại. Đó là tất cả cho hôm nay. Hãy tự khám phá cấu trúc ứng dụng và tạo thêm nhiều component khác nhau nhé!