angular-dark-sky

angular-dark-sky

Angular.js 1.x provider for fetching current and forecasted (7 days) weather data using the Dark Sky API.

An API key from darksky.net/dev/ is required in order to use this provider. See https://darksky.net/dev/ for further information.

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

Getting started

• Include Scripts - the provider script should be included after the AngularJS script:

   <script type='text/javascript' src='path/to/angular.min.js'></script>
   <script type='text/javascript' src='path/to/angular-dark-sky.js'></script>
  

• Configure the provider by setting the API key:

   angular.module('app', ['app.weather']);
  
   ... 
  
   angular.module('app').config(['darkSkyProvider', function(darkSkyProvider) {
   	darkSkyProvider.setApiKey('XXXXXXX');
   }]);
  

• Specify dependency - ensure that your module specifies dark-sky as a dependency:

   angular.module('app.weather', ['dark-sky'])
   ...
  

• inject service - inject darkSky service into your controller/directive/service/etc:

   angular.module('app.weather', ['dark-sky'])
   	.controller('WeatherCtrl', WeatherCtrl);
  
   WeatherCtrl.$inject = ['$q', 'darkSky'];
   	
   function WeatherCtrl($q, darkSky) {
   	activate();
  
   	// log current weather data
   	function activate() {
   		getNavigatorCoords()
   			.then(function(position) {
   				darkSky.getCurrent(position.latitude, position.longitude)
   					.then(console.log)
   					.catch(console.warn);
   			})
   			.catch(console.warn);
   	}
  
   	// Get current location coordinates if supported by browser
   	function getNavigatorCoords() {
   		var deferred = $q.defer();
  
   		// check for browser support
   		if ("geolocation" in navigator) {
   			// get position / prompt for access
   			navigator.geolocation.getCurrentPosition(function(position) {
   				deferred.resolve(position.coords);
   			});
   		} else {
   			deferred.reject('geolocation not supported');
   		}
   		return deferred.promise;
   	}
   });
  

Provider API

The darkSky provider exposes the following Dark Sky API methods to fetch data:

• darkSky.getCurrent(43.0667, 89.4000): Get current weather data.
• darkSky.getDailyForecast(43.0667, 89.4000): Get forecasted weather data in days.
• darkSky.getHourlyForecast(43.0667, 89.4000): Get forecasted weather data in hours.
• darkSky.getMinutelyForecast(43.0667, 89.4000): Get forecasted weather data in minutes.
• darkSky.getAlerts(43.0667, 89.4000): Get alerts data.
• darkSky.getFlags(43.0667, 89.4000): Get flags data.
• darkSky.getUnits(): Get response units object (i.e. { temperature: 'f', windSpeed: 'mph', [...] }).

Both methods take latitude and longitude and return an angular Promise which resolves with the data object as retrieved from Dark Sky. The promise is rejected if there was an error. See data points for an explaination of the data structure retrieved.

Options

All API methods (except getUnits) take an additional options object as the 3rd parameter.

i.e: darkSky.getCurrent(43.0667, 89.4000, { extend: true })

Supported options include:

• time: include a unix timestamp to use timemachine requests
• extend: include true to extend hourly forecasts (see 'extend' request parameter)

Configuration

• darkSkyProvider.setApiKey('XXXXXXX'): Set Dark Sky API key.
• darkSkyProvider.setUnits('us'): Set unit type for response formatting, see the list of supported units. Defaults to 'us'.
• darkSkyProvider.setLanguage('en'): Set language for response summaries, see the list of supported languages. Defaults to 'en'.

Directive

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

<dark-sky-icon icon="{{ item.icon }}"></dark-sky-icon>

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