AngularJS Material Design ECMA6 Dashboard

This is a starting point to create an Angular 1.4 Material Design application that is structured using ES6 modules in a component based way. It comes with karma/protractor testing, Traceur transpilation and live reload out of the box.

• ECMA6 new features
• Angular Material
• Google Material Design Spec

Prerequisites:

• node.js

Application Dependencies

All the dependencies required for the build system, testing and so on are managed with npm and defined in package.json. They can be installed with:

npm install
bower install

Running the Application

You can run script/start to fire up the application on http://localhost:3010.

(You may need to make each file in script folder and add execution permission to script/lib/css.js file.)

Tests

You can use npm test to run JSHint, Karma Unit tests and our E2E tests.

To run just the Karma tests use:

karma start ./config/karma.config.js

Karma will automatically watch the files and rerun tests when files change.

Live Reloading

Install the fb-flo chrome extension.

To enable live-reloading have the developer tools open and activate fb-flo.

Build & Deployment

Create a production optimized build using AssetGraph Builder: currently waiting for a fix assetgraph/assetgraph-builder#162

Debugging Protractor (E2E) tests

script/e2etest

Running individual files

Serve client/ on port 3010

npm start

Run protractor with --specs option

HTTP_PORT=3010 ./node_modules/.bin/protractor --specs client/app/routes/mandates/show/mandates-show.e2e.js

Pausing the browser

Add browser.pause(); to your spec.`

Credits

• ECMA6 Angular Project by GoCardless
• D3 Financial Components by Scott Logic