Trong bài này, chúng ta sẽ thực hành viết ứng dụng Wordcloud sử dụng Highchart và làm quen với 3 thành phần còn lại của Angular là Directive, Service và Dependency injection (chi tiết tại bài Tổng quan về Angular)

Trước hết, chúng ta tạo mới một Angular project và cài đặt Angular material, Highchart với dòng lệnh sau:

Trong bài trước (Tạo một trang Login với Angular Material), chúng ta sử dụng trực tiếp AppComponent (root component) để viết ứng dụng login. Tuy nhiên, trong bài này, chúng ta sẽ tạo một module mới cho ứng dụng là module word-cloud với component là word-cloud component:

Khi quá trình tạo module và component hoàn tất, ta kiểm tra trong file word-cloud.module.ts, WordCloudComponent đã được import và có sẵn trong declarations. Tuy nhiên, để các modules khác có thể sử dụng component này, ta cần phải khai báo tham số export cho WordCloud module như sau:

Để Root module có thể sử dụng các component của WordCloud module, ta phải import WordCloud module vào App module như sau:

Tiếp theo, để hiển thị view của WordCloud component ta xóa bỏ các đoạn html có sẵn trong file app.component.html và thêm selector của component này vào file app.component.html như sau (tên selector là tên trong tham số selector của @Component decorator trong file word-cloud.component.ts):

Khởi chạy project với lệnh ng serve ta được kết quả hiển thị “word-cloud works!”. Như vậy ta đã hoàn tất quá trình thiết lập môi trường để xây dựng ứng dụng WordCloud. Bây giờ chúng ta sẽ tập trung vào các file trong WordCloud component để viết ứng dụng WordCloud với giao diện như sau:

Với giao diện trên, bên trái thể hiện Wordcloud với số lần xuất hiện của từng từ và bên phải là bảng liệt kê các câu chứa từ được chọn trong Wordcloud (click vào từ trong Word cloud)

1. Template (word-cloud.component.html)

Chúng ta viết template của ứng dụng với hai thành phần chính là HighChart và Table (mỗi thành phần nằm trong một mat-card riêng)như sau:

Ta cấu hình stylesheet cho ứng dụng trong file word-cloud.component.css như sau:

2. Module (word-cloud.module.ts)

Trong template trên chúng ta sử dụng Card module của Angular Material và Highchart do đó trong file word-cloud.module.ts chúng ta phải thực hiện import các modules này như sau:

3. Directives

Trong ví dụ này, chúng ta sử dụng ngFor directive để hiển thị các câu chứa từ được chọn trong wordcloud (mỗi câu tương ứng với một dòng của table)

4. Service and Dependency injection

Chúng ta tạo data service cung cấp cho WordCloud component các dữ liệu cần thiết với dòng lệnh sau:

Lưu ý: chúng ta sử dụng lệnh ng g s để khởi tạo service, do đó service này đã được khai báo ở mức root:

Trong ví dụ này, data service (data.service.ts) cung cấp hai dữ liệu với hàm getData() và getSentences(word). Trong đó:

– getData(): trả về dữ liệu là các từ với số lần xuất hiện của từng từ (array của các dictionary với key là name và weight được quy định bởi Highchart)

– getSentences(word): trả về dữ liệu là các list các sentence có từ word xuất hiện.

Để sử dụng DataService, trong WordCloud component ta khai báo instance của DataService trong constructor() như sau:

4. Component (word-cloud.component.ts)

Trong WordCloud component, chúng ta sẽ cấu hình option cho Highchart (tham khảo thêm tại đây) với các dữ liệu nhận được từ DataService và thiết lập click() event cho Highchart. Do đó, component của ứng dụng sẽ được viết như sau:

Lưu ý: Khi Studio Code báo lỗi Parameter ‘….’ implicitly has an ‘any’ type: chúng ta vào file tsconfig.json và chỉnh giá trị “strict” thành false

Cuối cùng, ta khởi chạy ứng dụng WordCloud với lệnh ng serve, ta được kết quả như sau:

Như vậy ta đã hoàn thành việc viết ứng dụng Wordcloud sử dụng Highchart và làm quen với 3 thành phần còn lại của Angular là Directive, Service và Dependencies injection. Các bạn có thể tham khảo toàn bộ code trong bài hướng dẫn này trong trang Github của Itech Seeker tại đây.

Tháng Tám 22, 2021
ITechSeeker