The provided directive is able to retrieve the weather condition and forecasts for client or other desired location and displays them in a nice responsive HTML theme template.
For the simplicity of the learning process, all the samples will use a simple HTML page layout.
Also, you need a basic understanding of HTML and JavaScript. If you are not familiar with HTML or JavaScript, you can find plenty of documentation over the internet.
The following samples will show you how to integrate the provided AngularJS directive into your own projects.
If you don't know what a directive is, you just need to know that it is a sort of a HTML tag or attribute that has the ability to change the DOM.
The following file structure is assumed to exists on the server as this is the default structure that the package comes with.
The file we are editing is /sample/index.html
The following code shows how to integrate the directive with the default options.
<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>
After browsing to our http;//the-server-root/javascript-premium-weather-widget/sample/index.html, we should get something like:
The following code shows how to customize the widget with a theme and some static background color.
<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 theme="complex3" background="#6F004B"></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>
After browsing to our http;//the-server-root/javascript-premium-weather-widget/sample/index.html, we should get something like:
By default, the widget will get the location using geo-location.
This behaviour can be overridden by setting an initial location explicitly.
The explicit initial location can be specified by providing a latitude and longitude gps coordinates or by providing a string location that eventually can be evaluated as country, city, zone, area, zipcode, company name, address, street etc.
Of course, this will be just the initial location; it can be changed by interacting with the widget. Please check the User Interaction section for more details.
The most convenient way of setting an initial location is by specifying an address.
The address can be quite anything: country, city, zone, area, zipcode, company name, address, street etc.
In order to eliminate any confusion when searching an address, you can be as specific as you want by mixing any address elements such as countries, cities, street names etc.
For instance, there is location "Boston" both in USA and in UK, and if you want to get the weather from "Boston UK", just set the address to "Boston UK".
The address search is case-insensitive.
<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 theme="widget1" background="#007B50" location="boston uk"></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>
After browsing to our http;//the-server-root/javascript-premium-weather-widget/sample/index.html, we should get something like:
If very accurate precision is needed for setting the initial location, it can be specified by using GPS coordinates (latitude and longitude attributes).
If latitude or longitude are set, the location parameter will be just shown like a label as the weather will be retrieved from the (latitude, longitude) pair.
<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 theme="widget3" background="dynamic" latitude="42.872197" longitude="-0.083404" location="National Park on Spanish Border"></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>
After browsing to our http;//the-server-root/javascript-premium-weather-widget/sample/index.html, we should get something like:
By default, SI metric system (abbreviated from French: Le Système International d'Unités) is used that sets the following measure units: °C for temperature, km/h for wind speed and mBar for pressure.
The widget can initially show weather data using also the US metric system.
The metric system can be changed from within the widget by interacting with it. Please check the User Interaction section for more details.
<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 theme="widget2" units="us" location="ibiza"></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>
After browsing to our http;//the-server-root/javascript-premium-weather-widget/sample/index.html, we should get something like:
Forecast.io supports the following languages: bs (bosnian), de (german), en (english), es (spanish), fr (french), it (italian), nl (dutch), pl (polish), pt (portuguese), ru (russian).
Although, forecast.io supports only a limited language set, the widget texts (i.e. weekdays, high/low etc.) can still be localized using external language files located under the javascript-premium-weather-widget/bins/lang directory.
If the specified language is not supported by forecast.io, the weather messages will be returned in english as it is the default language of forecast.io.
A few more languages were already included in the package: hi (hindi), hr (croatian), ro (romanian), tr (turkish) and using them will localize the widget texts but the forecasts will be in english as forecast.io do not support these languages.
More languages can be added add or the existing ones can be modified.
For more information on localization support, please see the Localization Support section.
<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 theme="wide2" location="munich" lang="de"></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>
After browsing to our http;//the-server-root/javascript-premium-weather-widget/sample/index.html, we should get something like:
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.