I thought I’d have a little fun today and create a custom weather page – I’m British we’re obsessed with the weather!
I thought what I’d do is just use the angular 2 SPA template and just integrate with OpenWeather.org API’s to get the weather reports for towns within my local vicinity. For extra fun I’d thought I’d make use of .net core and develop and deploy solely making use of Ubuntu 16.04
In order to make use of OpenWeather.org you will need to register for an account and get your API key. It’s free so go ahead!
I generated the application stub
dotnet new angular, which generates a basic dotnet core angular 2 SPA app.
I went ahead and deleted the counter component and removed it from the navigation menu and it’s reference in the App Module
I also went ahead and renamed the
fetch-data component to be
weather . I also renamed the
SampleDataController to be
I am developing this on my ubuntu laptop, so I also have to ensure
webpack is installed and all the dependencies are available.
There also seems to be an issue on Linux based SPA template environments that if you have made any changes to the project structure or added addtional code. You need to run
webpack to ensure the changes take effect.
I quickly test that the application still works and my changes have taken effect.
We’re now ready to start integrating the OpenWeather.org API’s. The code within in this sample is deliberately contrived in order to illustrate points.
Add Controller Method
We’ll initially just add a simple method to the
WeatherController to make use of the OpenWeather API to get forecast by City.
I created some Custom Classes to be used to capture the results.
Angular 2 Components
We’ll create a sime very simple Angular 2 Components in order to illustrate how they will all work together to retrieve data, and how they can be further developed to provide more abstraction.
We’ll create a Angular Service to interact with out .net API
We’ll create a very simple class that will interact with the service to get the desired forecast and make it available to the UI to present
We’ll create a very simple UI presentation class to present the data.