Từ một project được generate bởi Angular CLI, chúng ta có thể thấy có nhiều file và folder. Vậy application của chúng ta bắt đầu từ đâu?
Bắt đầu từ index.html
Đầu tiên, từ folder src, bạn có thể thấy file index.html. Bên trong tag <body>, sẽ có một tag HTML khác lạ (thường là <app-root>). Tag này không tồn tại trong HTML thông thường mà là một custom tag/selector của application, hay nói cách khác, đây là phần bao ngoài của một view trong ứng dụng.
Tìm hiểu main.ts
Tiếp theo, mở file main.ts. Đây là nơi khởi đầu của application. Bên trong là các đoạn code TypeScript (TS) thông thường. Đây là một module (ES module/TS module) và đã import một số thứ từ các thư viện/module khác để sử dụng. Nhiệm vụ chính của file này là gọi các hàm để thực thi việc bootstrap application.
Khám phá app.module.ts
Sau một vài chỉ dẫn, bạn sẽ tìm thấy file app/app.module.ts. Đây là một file TypeScript module khác, bên trong có một class kèm theo cái móc @NgModule (một TS decorator). NgModule là cách chúng ta tổ chức phần chức năng của một Angular application.
Mỗi Angular app sẽ được chia thành nhiều NgModule. Hiện tại, app của chúng ta chỉ có một NgModule tên là AppModule (hay còn 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.
Các Component trong Angular
Trong AppModule, chúng ta thấy được một trong những thành phần quan trọng nhất của các ứng dụng Angular: các Component. Ở đây là AppComponent, được import từ file app.component.ts. Mỗi component định nghĩa ra một view tương ứng.
Hãy tưởng tượng bạn là một kiến trúc sư xây dựng các tòa nhà cao tầng. Việc chúng ta ghép các Component (có sẵn hoặc tự tạo) để tạo ra tòa nhà đó giống như việc chúng ta xây dựng các ứng dụng dựa trên Component (Angular, React đều dựa trên ý tưởng chia ứng dụng thành các component và tích hợp chúng lại với nhau).
Ví dụ, trong ứng dụng của chúng ta có thể có các component như: Main Page, Header, Side Nav, Footer. Và bên trong mỗi component lại có thể là sự hợp thành của nhiều component khác nữa.
AppComponent và TS Decorator
AppComponent là root component của ứng dụng. Bạn có thể thấy một TS decorator khác tên là @Component. Ở dưới là một TS class thông thường.
Trong Angular, TS decorator thường được dùng để gắn thêm meta-data cho class/property/method. Đối với class AppComponent, decorator @Component sẽ gắn thêm meta-data như selector, template (view của component), v.v.
View của một component có thể coi là phần HTML mở rộng với nhiều tính năng hơn HTML thông thường. Trong view, chúng ta có thể nhúng các component/directive khác.
Khởi tạo thêm một component mới
Một Angular application được tạo từ nhiều component, nên chúng ta không để hết code vào AppComponent. Bây giờ, hãy tạo thử một component khác.
Tạo mới file hello.component.ts cùng trong thư mục của app.component.ts và thực hiện coding.
typescript
export class HelloComponent {}Nó là một TS class rất đơn giản. Bây giờ, chúng ta sẽ gắn meta-data cho nó như sau.
typescript
import { Component } from "@angular/core";
@Component({
selector: "app-hello",
template: `<h2>Hello there!</h2>`,
})
export class HelloComponent {}Thế là đã xong một component. Bây giờ, mở file app.component.html và chèn thêm selector của HelloComponent vừa tạo.
html
<app-hello></app-hello>Save file và khởi chạy ứng dụng với lệnh ng serve. Bạn sẽ gặp lỗi:
error NG8001: 'app-hello' is not a known element:
1. If `app-hello` is an Angular component, then verify that it is part of this module.
2. If `app-hello` is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.Chúng ta đã gặp lỗi vì mới chỉ tạo component mà chưa declare nó thuộc NgModule nào cả. Trong app hiện tại, có NgModule duy nhất là AppModule, chúng ta sẽ thêm vào đó.
Mở AppModule, import HelloComponent và thêm vào declarations:
typescript
import { HelloComponent } from "./hello.component";
@NgModule({
declarations: [
AppComponent,
HelloComponent,
],
})
export class AppModule {}App đã chạy thành công. Để tạo component, ngoài cách thủ công, bạn có thể dùng Angular CLI:
ng generate component helloVới cách tạo bằng tool, bạn sẽ không cần phải làm những bước lặp đi lặp lại. That's all for today. Các bạn hãy thử tìm hiểu cấu trúc ứng dụng và tạo thêm nhiều component nữa nhé!
