.net core tutorials

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 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 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 OpenWeather.org API’s.  The code within in this sample is deliberately contrived in order to illustrate points.

Can’t wait to see it in action ?

Check out the code on GitHub

Code on GitHub

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.



Gary Woodfine

Freelance Full Stack Developer at threenine.co.uk
Helps businesses by improving their technical proficiencies and eliminating waste from the software development pipelines.

A unique background as business owner, marketing, software development and business development ensures that he can offer the optimum business consultancy services across a wide spectrum of business challenges.

Affiliate Disclaimer

Disclosure: Please note that some of the links included in the blog posts are affiliate links, which means I will earn a commission if you decide to make a purchase.

I only include affiliate links to products, services and companies that I have personal experience and have actually used. I only recommend them because they are helpful and useful, not because of the small commissions I make if you decide to buy something.

Please do not spend any money on these products unless you feel they are relevant, suitable and will help you achieve your goals.

Buying anyone of these products and the commisions earned will not make me an overnite multi millionaire, but they will help to cover the hosting costs and compensate for the countless hours and effort I put in to create meaningful and valuable free content I provide to help others succeed.

You've also undoubtedly noticed that I also use various advertising networks - unless of of course you're using an Ad blocker, this is also an attempt to reduce my monthly deficit I experience in providing free relevant, valuable and on occassion insightful content for the benefit of others.

I only really make some money if people click on the ads, unless of course you consider 1c per 1000 impressions real money!

Bear in mind just how many impressions I need to make before I can cover my £20 hosting costs a month!

If you are using an adblocker and guilt stricken you can of course donate using any of the buttons below, but I won't be holding my breath.

Buy me a coffeeBuy me a coffee