Requirements

A JavaScript enabled internet browser;
AngularJS 1.2.2 or newer;
Bootstrap 3 (CSS only).

Step 1: Script Directory

Copy the entire /javascript-premium-weather-widget directory on your web server. The directory is included in the downloaded archive.

Step 2: Include the Script

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>

Step 3: Show the weather widget

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>

Step 4: Configuration

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>

Note:: Please be aware that the path is relative to the current file where your JavaScript application is included or executed.

A Basic Usage Sample

For instance, if you have a file structure like:

Server file structure example

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>