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 OpenWeatherMap.org weather condition IDs to the excellent weather-icons by Erik Flowers.
-
Include the script on your page after the AngularJS tag:
<script type='text/javascript' src='path/to/angular.min.js'></script> <script type='text/javascript' src='path/to/ng-openweathermap.min.js'></script> -
Ensure that your application module specifies ngOpenWeatherMap as a dependency:
var app = angular.module('myApplication', ['ngOpenWeatherMap']); -
Configure the provider by setting the API key:
app.config(['owmProvider', function(owmProvider) { owmProvider .setApiKey('XXXXXXX') .useMetric() .setLanguage('en'); }]); -
Inject the
owmprovider into your controller:app.controller( 'weatherCtrl', [ '$scope', 'owm', function($scope, owm) { owm.current.name('Graz,AT').then(function(weather) { $scope.weather = weather; }); } ] );
The owm provider exposes three OpenWeatherMap APIs to fetch data and one
helper API that maps weather conditions to icon names:
owm.icons: Weather condition ids to weather-icons namesowm.current: Current weather dataowm.forecast5: 5 day weather forecastowm.forecast16: 16 day weather forecast
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 OpenWeatherMap.org is directly passed to the function
that gets called by the then methode of the promise:
setApiKey('key'): Set the OpenWeatherMap API keyuseMetric(): Use metric units for weather datauseImperial(): Use imperial units for weather datasetLanguage('en'): Set the language for strings in the weather data, see the list of supported languages
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:
owm.icons.neutral(200)
owm.icons.day(200)
owm.icons.night(200)
The name returned by those functions is the name of the icons from
weather-icons minus the leading
wi-.
owm.current.name('Graz')
owm.forecast5.name('Graz')
owm.forecast16.name('Graz')
owm.current.name('Graz,AT')
owm.forecast5.name('Graz,AT')
owm.forecast16.name('Graz,AT')
owm.current.find('London')
owm.forecast5.find('London')
owm.forecast16.find('London')
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.
owm.forecast16.id(2778067)
Lookup by OpenWeatherMap city ID.
owm.current.coordinates(47.066667, 15.433333)
owm.forecast5.coordinates(47.066667, 15.433333)
owm.forecast16.coordinates(47.066667, 15.433333)
Lookup using latitude and longitued. Fetches the weather data from the nearest city to the given coordinates.
owm.current.zip('8045,AT')
owm.forecast5.zip('8045,AT')
owm.forecast16.zip('8045,AT')
Lookup using the zip code and an optional ISO 3166 country code.
Using the directive is simple, just pass the weather condition ID:
<owm-icon id="{{ condition.id }}"></owm-icon>
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.