Xây dựng một trang web xinh đẹp với Angular 8 – Hướng dẫn từ A tới Z (phần 2)

Tram Ho

Bước 2: Lập trình

B. Services

Đầu tiên ta sẽ tách phần gọi API lấy dữ liệu sang 1 service riêng, để có thể gọi đến ở bất cứ chỗ nào mà không phải viết lại nữa.

Dùng CLI để tự động generate luôn

  • Weather Service

Service này gọi đến API của OpenWeatherMap để lấy thông tin thời tiết.

Ở đây ta có 2 function:

getWeather(): Lấy thời tiết hiện tại của thành phố mà ta truyền vào params

getForecast(): Lấy thời tiết 5 ngày tiếp theo của thành phố mà ta truyền vào params.

  • UI service
    Đây là 1 service nhỏ để chứa các function dùng để chia sẻ trạng thái UI, như kiểu người dùng đang chọn chế độ dark mode hay light mode

C. Routing

Về cơ bản khi chúng ta generate app bằng CLI thì nó đã có sẵn file routing rồi, nhưng vẫn phải sửa lại để thêm url các trang và nó liên kết vs component nào

Rồi, xong 2 phần còn sót lại của bài trước, giờ tiếp phần 2 nhé! 😀

D. Refactor

Update Angular mới nhất

Nếu bạn đã follow bài viết từ phần 1 thi chắc hẳn project của bạn vẫn đang là bản Angular 7, vì vậy mình sẽ hướng dẫn các bạn cách update lên version mới nhất. Cũng khá dễ thôi vì từ bản 7 lên bản 8 không có phần nào gây ảnh hưởng đến code cũ.

Chỉ cần chạy lệnh sau và đợi nó update:

Refactor weather card để dùng lại trong trang thêm thành phố

Chúng ta sẽ thêm 1 trang để người dùng có thể thêm thành phố mới vào trang homepage của mình, nên có thể dùng lại weather card làm card kết quả tìm kiếm và thêm 1 biến boolean để component cha truyền xuống để phân biệt.

Để biết được addMode là biến truyền sang, chúng ta sẽ thêm @input vào phía trước nó khi khai báo. Biến city cũng tương tự vậy, có điều, ta muốn lấy điều kiện thời tiết của thành phố từ component cha dưới dạng 1 string, và để làm được điều này thì ta thêm @input cho 1 hàm thay vì 1 biến, để được gọi đến mỗi khi có thành phố được tạo thành công.

Bên trong mỗi phương thức subcribe, có sử dụng 1 số phương thức Javascript thông thường như Math.round để gán các giá trị hiển thị ngoài HTML, nó giúp cho WeatherService đơn giản hết mức có thể, chỉ trả về đúng dữ liệu API, đề phòng sau này ta sẽ muốn dùng dữ liệu API trả về làm cái gì khác.

Trang home cũng phải sửa lại 1 chút

E: Bổ sung và thêm tính năng mới

CSS animation

 

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo