Angular.js provider for fetching current weather and forecasts (5 days and 16 days) using Openweathermap API.
1 person uses it
Submitted by: 234220?v=3 fladi


Build Status

Angular.js provider for fetching current weather and forecasts (5 days and 16 days) using Openweathermap API. It only fetches the requested data, and leaves the actual presentation to the developer. For a Angular.js directive that displass the same information directly, please see angular-openweathermap from which this provider draws some inspiration.

An API key from OpenWeatherMap is required in order to use this provider. See the section How to get API key on the OpenWeatherMap API documentation for further information.

A directive is also included that maps weather condition IDs to the excellent weather-icons by Erik Flowers.

Getting started

  • Include the script on your page after the AngularJS tag:

  • Ensure that your application module specifies ngOpenWeatherMap as a dependency:

  • Configure the provider by setting the API key:

    • Inject the owm provider into your controller:

      app.controller( 'weatherCtrl', [ '$scope', 'owm', function($scope, owm) {'Graz,AT').then(function(weather) { $ = weather; }); } ] );

Provider API

The owm provider exposes three OpenWeatherMap APIs to fetch data and one helper API that maps weather conditions to icon names:

Each of the three data APIs provides the same set of functions for weather data lookup that returns a Angular.js $q promise This promise is resolved once the weather data has been retrieved or gets rejected if there was an error.

The data retrieved from is directly passed to the function that gets called by the then methode of the promise:


  • setApiKey('key'): Set the OpenWeatherMap API key
  • useMetric(): Use metric units for weather data
  • useImperial(): Use imperial units for weather data
  • setLanguage('en'): Set the language for strings in the weather data, see the list of supported languages

Icon names

Each weather condition is mapped to a set of up to three distinctive icon names, a neutral one, one for daytime and one for nighttime. To get the icon names just pass the weather condition ID to one of the follwoing three functions:

The name returned by those functions is the name of the icons from weather-icons minus the leading wi-.

City name

Lookup by city name and optional ISO 3166 country code. name() is to be used for accurate name lookups i.e. when the correct name of the city is already known. find() searches for city names similar to the queried one.

City ID

Lookup by OpenWeatherMap city ID.


Lookup using latitude and longitued. Fetches the weather data from the nearest city to the given coordinates.

Zip code

Lookup using the zip code and an optional ISO 3166 country code.


Using the directive is simple, just pass the weather condition ID:

For the directive to be able to display any icons, please install the weather-icons package.


ngOpenWeatherMap is licensed under the MIT license. See the LICENSE file for more details.

comments powered by Disqus
This page was last updated about 3 years ago.