JavaScript Premium Weather Widget

JavaScript Premium Weather Widget

Weather Conditions and Forecast Script

Using the Data Service

Along with the directive that displays the weather widget, the module offers a service that is able to provide raw weather data and forecast also.
The service can be used to build other directives or it can be used to make a standalone application that presents the weather conditions in own UI or use it in any other scenarios.
Bottom line is that the service will offer raw weather data on demand without any UI, leaving the developer the freedom of choice to decide what to do with the data.

In this section, we will build a simple JavaScript AngularJS application that will get the weather conditions using the data service.
To keep the things as simple as possible, the data will be displayed inside a classical alert box without any other UI or DOM elements. Also, please visit https://developer.forecast.io to get a forecast.io API key in order to configure the script properly. It's free and very easy. After getting the key, just replace the your-developer.forecast.io-key with your actual key.

The server file structure

The following file structure is assumed to exists on the server as this is the default structure that the package comes with.

tut-file-structure.png
The assumed server file structure

The file we are editing is /sample/index.html

A very basic JavaScript AngularJS app using the weather forecast data service should look like:

<html ng-app="demo-app" ng-controller="demoAppController">
    <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>
        <script type="text/javascript">
            //configuration
            angular.module('wl-ng-weather').value('bins', '../bins');
            angular.module('wl-ng-weather').value('apikey', 'your-forecast.io-key');
            //create an AngularJS module with a dependency to our weather forecast module
            var demoApp = angular.module('demo-app', ['wl-ng-weather']);
            //declare a controller with a dependency on the data service (wlNgWForecastIo)
            demoApp.controller('demoAppController', function(wlNgWForecastIo) {
                //get the weather for the North Pole (latitude = 90, longitude = 0)
                wlNgWForecastIo.get(90, 0)
                    .then(function(weather) {
                        //on success, display the weather
                        alert(JSON.stringify(weather));
                    }, function(error) {
                        //on error ...
                        alert(error);
                    });
            });
        </script>
    </head>
</html>

Looking at the JavaScript code above, after configuring the module, we created a basic AngularJS module (application) called demo-app with a dependency to the weather data service wl-ng-weather:

var demoApp = angular.module('demo-app', ['wl-ng-weather']);

Then, we created a controller inside the demo application having a dependency to the weather data service (wlNgWForecastIo):

demoApp.controller('demoAppController', function(wlNgWForecastIo) {
    //get the weather for the North Pole (latitude = 90, longitude = 0)
    wlNgWForecastIo.get(90, 0)
        .then(function(weather) {
            alert(JSON.stringify(weather));
        }, function(error) {
            alert(error);
        });
});

The code above is pretty much self explanatory: get() method of the service is called and if everything goes fine, the weather taken from forecast.io is displayed inside an alert box.

tut-data-service.png
Data Service Sample App
Note:
The sample above is available under the same /sample/ directory of the downloaded package.
Regular License $9.00
Use by you or one client, in a single end product which end users are not charged for.

Extended License $45.00
Use by you or one client, in a single end product which end users can be charged for.

Short Information

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.

Buyer rating:
204 Sales