Demo code for a Single Page Application using AngularJS.
This is a sample HTML5 / JS / CSS SPA (Single Page Application) developed with AngularJS.
Markup has been styled to be responsive, according to the device used to view the app.
It is intended as a demonstration of technical capabilities rather than design or helpful data. :-)
Note also that it is a work in progress; you can check out what features are in the pipeline in the issues list.
This is a simple application that displays several pages, including profile information for a list of people.
The sample data is contrived, but shows how the data is stored in JSON format, retrieved via AJAX, and inserted into HTML templates.
The functionality has been implemented using the following features:
- AngularJS 1.2, documented
- Twitter Bootstrap 3.2
- Javascript validated with JSHint and JSCS
- automated CI build on code repo change
- semantic HTML5
- well-structured CSS built with LESS
- responsive web development/design (no separate m-dot site)
- page content sourced via XHR service call with JSON response (static)
- multi-browser unit testing with Jasmine & Karma
- grunt-driven builds to dev and prod distributions
Fork/clone this repo, then:
$ bower install && npm install
# build the dev distribution:
$ grunt dev
# run the unit tests:
$ grunt test
# just build the docs
$ grunt docs
# build the prod distribution (includes clean, test & docs) :
$ grunt prodSet up local web servers to point to dist/dev and dist/prod for dev and prod distributions, respectively.
To customise the content, modify the contents of the following files:
svc/*/*.jsonsrc/js/app/*/*/*.html
Build the docs, fire up a web server with dist/docs as the webroot, and point your browser to localhost:8001:
$ ( grunt docs && cd dist/docs && python -m SimpleHTTPServer 8001 )The github issue system holds the issues for this project:
mcalthrop.github.io/angular-spa-demo/
This site is kept up to date with the latest code in the codebase.