Skip to content

Custom Weather application using .net core and angular 2

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 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 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 WeatherController

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 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.



Latest posts by Gary Woodfine (see all)