Note: February 2018 housekeeping -> v 0.2.0 updates angular and fixes testing issues
Updated bundled angularjs lib from angular-1.2.0-rc.2 to angular-1.2.32 (latest of the 1.2 release series) + updated and fixed dependencies on karma and jasmine modules so that tests would run and pass again.
angular-openweather-app — a weather forecast app written in AngularJS
"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
Clone repository and install dependencies
via git and npm:
$ git clone firstname.lastname@example.org:atufkas/angular-openweather-app.git [my-app-name] $ cd [my-app-name] $ npm install
Run application via server
(see also angular-seed docs)
You can pick one of these options:
- serve this repository with a webserver of-your-choice
- having installed node.js, you can run a script starting a simple web server:
Then navigate your browser to
http://localhost:<port>/app/index.html to see the app running in
To run unit and end-2-end tests with karma/jasmine, call these scripts:
$ ./scripts/test.sh $ ./scripts/e2e-test.sh
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
All data provided by the great service and API of OpenWeatherMap.
Copyright (c) 2013 Matthias Lienau <email@example.com>