Angularjs Webpack ES6 Starter
Summary
It simply includes font-awesome, bootstrap for the people who don’t want to use boostrap-webpack, font-awesome-webpack. I find it saves us so much effort to create prototype, since we don’t need spectacular UI.
- This starter uses angular 1.5 for someone want to build component.
- This repo follows mvc patterns instead of component pattern.
- ES6, and ES7 support with babel.
- Development server with live reload.
- Production builds with cache busting.
- Testing environment using karma to run tests and jasmine as the framework.
- Code coverage when tests are run.
- Include font-awesome without font-awesome-loader.
- Include Bootstrap 3 without bootstrap-loader.
- No gulp and no grunt, just npm scripts.
Structure of starter
\path\to\angularjs-webpack-es6-starter
| .babelrc <-// default setting es2015.
| karma.conf.js <-// tests and report setup
| webpack.config.js <-// webpack config
\---src
| tests.webpack.js
|
+---app
| | app.html <-// app view
| | app.js <-// app module
| | app.routes.js <-// app route to manage all routes
| | app.runner.js <-// app runner for state change enhancement
| | app.spec.js <-// app spec file for testing
| |
| +---common <-// common module for whole app
| | | common.js
| | | common.spec.js
| | +---directives <-// common directives for whole app
| | | appUiDirectives.js
| | | appUiDirectives.spec.js
| | | commonDirectives.js
| | | commonDirectives.spec.js
| | +---services <-// common views for whole app
| | | ApiService.js
| | | ApiService.spec.js
| | | UtilService.js
| | | UtilService.spec.js
| | \---views <-// contains common views
| | footer-view.html
| | header-view.html
| | sidebar-view.html
| | topbar-view.html
| \---main <-// built-in fonts, css, images
| \---dashboard
| +---controllers
| | dashboardController.js
| | dashboardController.spec.js
| \---views
| dashboard-view.html
|
+---public <-// built-in fonts, css, images
| | index.html
| +---fonts
| | +--- ...
| \---img
| +--- favicon.ico
\---style <-// css files including customized css