Building a beautiful website with Angular 8 – A to Z guides (part 2)

Tram Ho

Step 2: Programming

B. Services

First we will separate the call API to retrieve data into a separate service, so that it can be called anywhere without having to rewrite it again.

Use CLI to automatically generate always

  • Weather Service

This service calls the OpenWeatherMap API to get weather information.

Here we have 2 functions:

getWeather () : Get the current weather of the city that we pass into the params

getForecast () : Get the weather of the next 5 days of the city that we pass into the params.

  • UI service This is a small service that contains functions used to share UI status, such as whether the user is selecting dark mode or light mode.

C. Routing

Basically when we generate the app using CLI, it already has routing file already, but it still has to be modified to add the url of the page and which component it links to.

Alright, finished the 2 remaining sections of the previous lesson, now continue to part 2! ?

D. Refactor

Latest Angular Update

If you have followed the article from part 1, then your project is still in Angular 7, so I will guide you how to update to the latest version. It is quite easy because from version 7 to version 8 has no effect on the old code.

Just run the following command and wait for it to update:

Refactor weather card for reuse in adding cities page

We will add a page so that the user can add a new city to our homepage, so we can reuse the weather card as a search result card and add a boolean variable for the parent component to pass down to distinguish it.

To know if addMode is a variable, we will add @input to the front of it when declaring. The city variable is similar, @input that, we want to get the weather condition of the city from the parent component as a string, and to do this, we add @input to a function instead of a variable, to be called. come whenever a city is created successfully.

Inside each subcribe method, using some common Javascript methods like Math.round to assign display values ​​outside of HTML, it makes WeatherService as simple as possible, returning only the correct API data, just in case we want to use the returned API data for something else.

The home page must be fixed a little

E: Adding and adding new features

CSS animation

 

Share the news now

Source : Viblo