AngularJS Material Design ECMA6 Dashboard
This is a starting point to create an Angular 1.3 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.
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
DIST=./dist ./script/build
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
- Build system/ES6 tooling: Guy Bedford
- ECMA6 Angular Project by GoCardless