Mục tiêu

Ứng dụng blog- nắm bắt được về các thao tác với HttpClient trong Angular.

Mô tả- Ứng dụng blog

Ứng dụng blog đơn giản

Hướng dẫn

Bước 1: Khởi tạo project với Angular CLI (nếu đã có project thì có thể bỏ qua)

Các bạn chạy lệnh npm i typescript@2.9.2 -D để cài đặt thư viện typescript nếu phiên bản hiện tại < 2.9.2

Bước 2: Khởi tạo một service tên là post, 3 component tên là blog, blog-detail, blog-edit, interface post

ng g s post

ng g c blog

ng g c blog-edit

ng g c blog-detail

ng g interface post

Bước 3: Thay phần template của component vừa tạo bằng đoạn code sau:

file blog.component.html:

blog-detail.component.html:

blog-edit.component.html:

Bước 4: Code phần logic cho component

blog.component.ts:

blog-edit.component.ts:

Bước 5: Cài đặt post service để call API:

Bước 6: Cài đặt post interface:

Bước 7: Tạo mới file app-routing.module.ts:

Bước 8: Thêm vào app.module.ts:

Bước 9: Thêm vào app.component.html:

Bước 10: Kiểm tra kết quả hiển thị trên trình duyệt localhost:4200/blog

User có thể click chuyển trang qua lại, có thể tạo mới post, có thể edit, delete post

ứng dụng blog

Mã nguồn tham khảo: https://github.com/codegym-vn/angular-training/tree/master/angular-http/src/app

Trên đây CodeGym đã cùng với bạn luyện tập các thao tác với HttpClient trong Angular. 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é!