Mục tiêu

Tạo ứng dụng Hackernews- Thực hành tạo component và thao tác với template syntax, binding, directives.

Mô tả- Tạo ứng dụng Hackernews

Tạo một ứng dụng mô phỏng https://news.ycombinator.com – một trang tổng hợp tin tức cho lập trình viên. Mỗi bản tin sẽ bao gồm một tiêu đề và một đường dẫn đến nguồn. Ngoài ra còn có thông số ngày đăng và số lượt vote.

Hướng dẫn

Bước 1: Sử dụng anglar cli và tạo mới dự án

Bước 2: Hiển thị một article lên màn hình chính

Bổ sung data về một article vào app.component:

Sử dụng syntax hiển thị nội suy để hiển thị thông tin article lên view:

Bước 3: Sử dụng event binding để cập nhật thông tin article

Thêm 3 input sau vào template, bạn tự design cho đẹp:

Đặt logic cho handler method updateArticle:

Bước 4: Sử dụng two-way binding để cập nhật thông tin article

Tìm cách import FormsModule vào AppModule.
Sửa property binding trên hai textarea trên về thành two-way binding:

Bỏ phần tử input, bỏ handler method, kiểm thử lại chương trình.

Bước 5: Hiển thị một danh sách article

Bổ sung dữ liệu về một danh sách các article.

Thay vì chỉ hiển thị một article duy nhất, hãy sử dụng directive để hiển thị toàn bộ các article trong danh sách:

Bước 6: Bổ sung tính năng thêm article vào danh sách

Tính năng cập nhật thông tin article hiện tại trở nên vô nghĩa. Bạn hãy tận dụng những phần tử đã có để tạo thành tính năng thêm mới article.

Bổ sung button như sau vào template:

Bạn tự thêm các logic cần thiết để hoàn thành chức năng.

Bước 7: Bổ sung tính năng hiển thị số lượt thích

Tạo component để hiển thị số lượt like bằng lệnh ng cli sau:

Dựng các phần tử cần thiết, bạn tự design cho đẹp:

Thêm logic cho component

Sử dụng component likes trong danh sách article:

Trên đây CodeGym đã cùng với bạn luyện tập về tạo component và thao tác với template syntax, binding, directives. Hãy chụp ảnh màn hình và nộp bài thực hành của bạn trên CodeGymX để cùng nhau luyện tập nhé!


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.