Copy the entire /javascript-premium-weather-widget directory on your web server. The directory is included in the downloaded archive.
Include the /javascript-premium-weather-widget/bins/wl-ng-weather.js in your page.
The script has AngularJS, bootstrap.css, skycons and google maps API as dependencies, so they should be included also.
The paths are relative to your current HTML page, so please pay attention to that.
<link href="/javascript-premium-weather-widget/bins/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"/> <script src="/javascript-premium-weather-widget/bins/lib/skycons/skycons.js" type="text/javascript"></script> <script src="/javascript-premium-weather-widget/bins/lib/angular/angular.min.js" type="text/javascript"></script> <script src="/javascript-premium-weather-widget/bins/lib/angular/angular-animate.min.js" type="text/javascript"></script> <script src="https://maps.googleapis.com/maps/api/js?libraries=places" type="text/javascript"></script> <script src="/javascript-premium-weather-widget/bins/wl-ng-weather.js" type="text/javascript"></script>
The weather widget is shown by adding a div as below:
<div ng-app="wl-ng-weather" wl-ng-weather theme="complex1" background="dynamic"></div>
In order to configure the script properly, please visit https://developer.forecast.io to get a forecast.io API key. Registration is free, very easy and you get 1000 free API calls per day. After getting the key, just replace the your-developer.forecast.io-key string with your actual key.
Also, the module needs to know where its files are located. Add the following code at the end of your HTML page but replace the path to your actual path relative to the HTML page:
<script type="text/javascript"> angular.module('wl-ng-weather').value('bins', 'javascript-premium-weather-widget/bins'); angular.module('wl-ng-weather').value('apikey', 'your-forecast.io-key'); </script>
For instance, if you have a file structure like:
Then, index.html should look like:
<html> <head> <link rel="stylesheet" href="../bins/lib/bootstrap/css/bootstrap.min.css"/> <script type="text/javascript" src="../bins/lib/skycons/skycons.js"></script> <script type="text/javascript" src="../bins/lib/angular/angular.min.js"></script> <script type="text/javascript" src="../bins/lib/angular/angular-animate.min.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> <script type="text/javascript" src="../bins/wl-ng-weather.js"></script> </head> <body> <div ng-app="wl-ng-weather" wl-ng-weather></div> <script type="text/javascript"> angular.module('wl-ng-weather').value('bins', '../bins'); angular.module('wl-ng-weather').value('apikey', 'your-forecast.io-key'); </script> </body> </html>
WiseLoop JavaScript Premium Weather Widget is an AngularJS based weather condition and forecast script.
Its flexibility and easiness makes it perfect for displaying local or searched weather information in websites, blogs, portals, web and mobile apps.
It features GEO location, address search, localization, animations, theme support with really nice included themes that are responsive and compatible with mobile devices.