angular-spa-demo
Demo code for a Single Page Application using AngularJS.
Purpose
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.
Functionality
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.
Implementation
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
Usage
Building
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 prodRunning
Set up local web servers to point to dist/dev and dist/prod for dev and prod distributions, respectively.
Customising
To customise the content, modify the contents of the following files:
svc/*/*.jsonsrc/js/app/*/*/*.html
Viewing the docs
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 )Issues
The github issue system holds the issues for this project:
Demo site
mcalthrop.github.io/angular-spa-demo/
This site is kept up to date with the latest code in the codebase.