Fixed bug leading to broken openweathermap API calls: Header field x-api-key is not sufficient anymore, so that now an additional query parameter APPID is mandatory.

"OpenWeather App" is a small AngularJS project that makes use of the OpenWeatherMap service for fetching and displaying weather data and forecasts based on a given location (city).

This project basically serves as an example app I refer to within an article about AngularJS I wrote for the German web technology magazine t3n no. 34.

A demo site running this little app can be found here.

Points of interests:

• Building an app with AngularJS (of course!)
• Building an app based on the OpenWeatherMap API
• Bootstrapping an AngularJS app: Basic modules and view definition, ng-app, ng-view
• Defining a controller for handling the weather data in $scope
• Defining a service for fetching weather data from openweathermap.com via JSONP
• Defining a custom directive for instantly embedding sort of "weather data day panel"
• Setting up unit and e2e-tests with karma/jasmine

angular-openweather-app uses:

• AngularJS v1.2.0-rc.2 / angular-seed
• iso-3166-country-codes-angular
• Bootstrap v3.0.0

via git and npm:

$ git clone [email protected]:atufkas/angular-openweather-app.git [my-app-name]
$ cd [my-app-name]
$ npm install

(see also angular-seed docs)

You can pick one of these options:

• serve this repository with a webserver of-your-choice
• install node.js and run scripts/web-server.js

Then navigate your browser to http://localhost:<port>/app/index.html to see the app running in your browser.

Ideas, suggestions and pull requests are welcome. Someone willing to suggest a fancy (responsive) design for desktop and mobile use?

• Make use (and parse) more provided weather data (+ add filters, formatting)
• Internationalization / Localization
• Provide "use current location" and fetch data via lat/lon
• Build a view with n-day-forecast in typical weather app style
• Improve UI/UX by integrating a fancy design, transitions, effects

The MIT License

All data provided by the great service and API of OpenWeatherMap.

Copyright (c) 2013 Matthias Lienau <[email protected]>