OpenWeatherMap AngularJS Demo

A simple demo of an AngularJS (v1.5) Single Page Application to view a 5-day weather forecast using the OpenWeatherMap API. Highlights include:

• application style and layout managed by AngularUI Bootstrap

• development tasks run by gulp (v4), with automatic browser reloading on changes handled by browsersync

• script bundling with browserify

• extensive unit testing with karma and jasmine

• test code coverage reporting with istanbul

• end-to-end testing with protractor and selenium-standalone

• documentation generated by gulp-ngdocs

• code standards maintained with the help of jshint, jscs and sass-lint.

Install

Clone this repository, and run

$ npm install

Run

From the top-level directory, run

$ gulp serve

and point a web browser at http://127.0.0.1:4300. For source code documentation, use http://127.0.0.1:4300/docs.

All source files are monitored for changes, and the browser will automatically reload the application and documentation pages.

Production Build

To create a standalone, minified build of the application, run

$ gulp compile:app:prod

The output is created in the dist directory, and is suitable for serving by any web server.

Unit Tests

While gulp is serving the application, any changes to source or test files will trigger the unit tests. The tests can also be started at any time by running

$ gulp test

Code Coverage

The unit tests generate code coverage information using istanbul, which is written to the coverage directory. Open ./coverage/index.html in a browser to view coverage details for each source file.

End to End Tests

To start end-to-end tests, run

$ gulp protractor

This uses selenium-standalone, so progress can be observed in the browser windows that pop up.

By default, tests are run in Chrome and Firefox, and Safari if the testing is done on a Mac OS X host. (NB, Firefox is currently disabled until the driver issues between Selenium and newer versions of Firefox are ironed out.) To run the tests in a particular browser, use

$ gulp protractor:chrome

or

$ gulp protractor:firefox

or

$ gulp protractor:safari

The tests also by default run in four browser window sizes: xs (600x800), sm (800x1024), md (1000x1024) and lg (1200x1024). Add the suffix :xs, :sm, :md or :lg to the gulp task to run in just the one size. For example

$ gulp protractor:chrome:xs

Licence

MIT © Ecgtheow Ltd