There are several reasons you may wish to add a basic weather forecast to a mobile application. Recently I added weather forecasts to a customer’s LOB app to allow technicians to anticipate weather at multiple job sites. This allows them to better plan for conditions over the course of several days.

In this tutorial, I will build a basic angular service to get weather forecasts using the Weather Underground API.

  1. Create an API Key and store this key in your application’s configuration.
  2. Create an angular service to retrieve the forecast data. Include your API Key in the calls.


  3. Include the service’s js file in your application’s Index.html


  4. In your app.js, include the service.


  5. In your controller, add a method to call getForecast and store the result in a $scope variable.


  6. In your view, display the result using a repeater and a template.


Your view will now display a formatted weather forecast, using the images from WeatherUndreground’s simple forecast data.


Like this post? Share it!