Hello All,
Today we are going to build a basic World weather app using Angular and restcountries API. Our aim is to build app with two pages :
- Landing Page :
1.1. Grid View :displaying all the countries in a grid having sorting, filtering and search functionality in grid.
1.2. Card View : displaying the countries in card format with their flags shown.
We need a toggle button to toggle between the above two views. On click of either this individual card or a particular row , we will navigate our user to display weather of Capital of that country.
2. Weather Page:
When we click on a particular Country either from Grid or Card view , user will be navigated to this page displaying current weather (Temperature, precipitation and wind
data) for its capital using the following API:
api.openweathermap.org/data/2.5/weather?q={{#capital#countryCode}}&APPID={{#yourownappId}}
Design/Structure of project:
The aim is to build in simplest form . Since I wanted Country -weather App as common text in all my views, included that in my app.component.html. I used ag-grid for grid , Angular Material for tab and card creation as all of these things are available to use easily and gives smooth UI.
We will create a country-landing page having the toggle button to toggle in between grid and card view for showing list of countries [OnViewChange method is doing same]. On loading of this page itself we will fetch the list of countries[getCountries does that, we call that in ngOnInit]
You can see the two routes above list and grid for two views:
these will be child component of above landing page , hence the below routes:
Coming to the Grid view: We are using ag -grid , where countries is basically list of all countries to be shown as row, and columnDefs specifies the various column name of the grid:
Resulting in below View :
On click of row , we want to navigate user to Weather Page:
On click of toggle button from grid to list view , which is created using angular material card. below is code and corresponding view for it.
On click of any tile/card or row of individual country , we want to display the details for that YOU WILL NEED TO GENERATE OWN APPID(signup at https://home.openweathermap.org/users/sign_in for appid)as the API call needs unique appid for sending out the data.
Calling the service above , we can fetch all the details of capital climate, display that in whatever format you wish . For now i have kept it simple as below.
This is complete explanation of this basic weather application. For detailed code , please refer to https://github.com/Shal31/weatherApp
