7.

Module

7.1 Module là gì?

Một ứng dụng Angular thông thường sẽ có ít nhất một module gốc được gọi là
"AppModule." AppModule là module chính và đầu tiên được khởi chạy khi ứng
dụng bắt đầu. AppModule thường định nghĩa cấu trúc và cài đặt chung của ứng
dụng.

 declarations: Dùng để khai báo những thành phần chúng ta sẽ dùng ở trên
template (thường chủ yếu là các component, directive và pipe).
 providers: Dùng để khai báo các service dùng trong toàn bộ các module của
con (dù có lazy loading module hay không vẫn available).
 imports: Nó là một mảng các module cần thiết để được sử dụng trong ứng
dụng. Nó cũng có thể được sử dụng bởi các Component trong mảng
Declarations. Ví dụ: trong @NgModule, chúng ta thấy BrowserModule và
AppRoutingModule được import
 bootstrap: Định nghĩa component gốc của module
7.2 Module chức năng
 Angular cho phép bạn tạo các module phụ để quản lý các phần riêng lẻ của ứng
dụng. Điều này giúp tạo sự phân tách logic và chức năng, và cho phép bạn tải các
module theo nhu cầu, giúp cải thiện hiệu suất ứng dụng.

Ví dụ, bạn có thể tạo một module để quản lý tính năng đăng nhập, một module cho
tính năng giỏ hàng, và nhiều module khác tùy thuộc vào cấu trúc và yêu cầu của
ứng dụng.

Việc tách ra các module có một tầm ảnh hưởng rất lớn đến việc phát triển một dự
án angular nếu phân chia nó hợp lý và khoa học, một dự án sẽ phát triển dễ dàng,
dễ bảo trì, dễ tiếp cận. Khi khỏi tạo một dự án hãy xem xét kĩ, và nên tạo ra một
rule thống nhất trong quá trình phát triển để khi mỗi người tạo một module hay
thêm những component sẽ không làm phá vỡ các quy tắc mọi người đang làm.

Dưới đây là câu lệnh tạo 1 module mới:

dung
Vậy là đã tạo ra được module chức năng có tên ModuleChucnangModule, lưu
ở file với cấu trúc thư mục như trên.

Giả sử tạo ra một component có tên là Vidu01Component để sử dụng cho

module này gõ lệnh sau:

Nó đã sinh ra các file trong thư mục/src/module-chucnang/vidu01-component và

trong đó có định nghĩa tag selector cho component này là app-vidu01-component,
khai báo component đó thuộc module ModuleChucnangModule sửa lại mã như sau

Để nạp module này vào AppModule thì mở file app.module.ts và thêm

ModuleChucnang vào phần declare
Như vậy Module chức năng đã nạp vào AppModule, để hiện thị Component của
Module AppModule, ở template của AppModule sử dụng đến selector app-vidu01-
component

10. Xuất file

File Excel

Cài đặt thư viện bằng lệnh sau

npm install xlsx

Kết quả chạy khi hoàn tất

Trong component, import thư viện và sử dụng nó để tạo và xuất file Excel:

Sau đó ta thêm code như sau:

Trong đó, data là nội dung mà khi ta ấn “Xuất Excel” thì file sẽ có nội dung ở đoạn data.

Chạy Project lên, ta sẽ thấy như sau

Kết quả