Angular Weather Directive

This is a directive meant to make displaying the weather or a forecast for a given region relatively trivial. There are a few requirements to making this work but the usage is simple.

Usage

This directive is dependent on moment.js, ngSanitize/angular-sanitize.js, and weather-icons or Google's static weather images.

Weather Icons used from this project: https://github.com/erikflowers/weather-icons

Bower install:

bower install https://github.com/shusain/angular-sh-weather.git#~0.0.2 --save

Be sure the dependencies above are installed and loaded properly. Then load the weather directive in your script block:

<script type="text/javascript" src="bower_components/angular-weather-directive/angular-weather-directive.min.js"></script>

Although not strictly required the directive makes use of Bootstrap for the classes used on the divs doing the layout.

A full block in the head of a file using this component would look like:

  <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
  <link rel="stylesheet" type="text/css" href="bower_components/weather-icons/css/weather-icons.css"/>
  <script type="text/javascript" src="bower_components/angular/angular.js"></script>
  <script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.js"></script>
  <script type="text/javascript" src="bower_components/moment/moment.js"></script>
  <script type="text/javascript" src="bower_components/angular-sh-weather/dist/angular-weather-directive.min.js"></script>
  <script type="text/javascript">
    angular.module('myApp', ["weatherModule", "ngSanitize"]);
  </script>

Use the directive:

<todays-weather
  location="Chicago, IL"
  custom-size="100"
  use-google-images="true">
</todays-weather>

<weather-forecast
    location="London, UK"
    units="metric">
</weather-forecast>

Authors and Contributors

2014, Shaun Husain @shusain

Optional weather images pulled from Google servers used for the Weather API

The date display is currently dependent on Moment.js

Support or Contact

Having trouble with this directive? Contact shaun@intellectual-tech.com and we’ll help you sort it out.