Angular.js module for displaying current weather by Openweathermap API

angular-openweathermap module


Stars : 10

Forks : 10

Created by Dr. Mithun

Demo Download GitHub

Angular Openweathermap


Angular.js module for displaying current weather using Openweathermap API and weather-icons. This module depends on weather-icons created by erikflowers. The module fetches weather data from Openweathermap API and displays an appropriate weather icon.

The tooltip to display weather description depends on AngularUI Bootstrap.

Heavily inspired by footer weather

Getting Started

  • View the source of demo file
  • Include the script tag on your page after the AngularJS tag

    <script type='text/javascript' src='path/to/angular.min.js'></script>
    <script type='text/javascript' src='path/to/angular-sanitize.min.js'></script>
    <script type='text/javascript' src="path/to/ui-bootstrap-tpls.min.js"></script> <!-- If you wish to add tooltip -->
    <script type='text/javascript' src='path/to/angular-openweathermap.min.js'></script>
  • Ensure that your application module specifies angular-openweathermap as a dependency:

    angular.module('myApplication', ['angular-openweathermap', 'ngSanitize']);
    angular.module('myApplication', ['angular-openweathermap', 'ngSanitize', 'ui.bootstrap']); // for tooltip
  • Use this directive.

    <angular-openweathermap city-name="New York" offset-hours="-4" offset-minutes="0"></angular-openweathermap>

    Set offset-hours and offset-minutes according to your desired timezone.

    • Include the CSS files to load weather-icons


angular-openweathermap is licensed under the MIT license. See the LICENSE file for more details.


Javascript plugin