Component based Angular(1.x) web development with Webpack and ES6.
JavaScript HTML CSS Shell

README.md

angular1-webpack-starter

Travis Codecov David David node npm

A starter project using Angular 1.x with Webpack. A Webpack + ES6 re-implementation of the generator-aio-angular project.

Still wanna use Gulp + ES5? Check the generator-aio-angular project.

Pure front-end implementation, all API interaction are mocked using angular-mocks.

Preview

Check out the demo site.

The dome site is a pure front-end implementation, so you can use any email/password to login, see mock file for detail. It is hosted on Github pages, no back-end support, so we use # style URL.

Features

  • ES6
  • Component based structure proposed in https://github.com/fouber/blog/issues/10
  • Lazy load resources(js/css/images/templates...) for each page
  • Material Design using MaterializeCSS
  • Flex Layout
  • Responsive Design
    • Support multiple devices with different screen size.
    • Easy responsive implementation, very convenient to support small screen devices. (see responsive.styl)
  • Animation
    • Using animate.css.
    • All the animation defined by animate.css can be used directly as keyframe animation. (see animation.styl)
  • More understandable router design
  • Easy implementation for Sidebar Navigation and Breadcrumb

Get Started

git clone https://github.com/PinkyJie/angular1-webpack-starter.git
cd angular1-webpack-starter
npm install
npm start

Then open your browser with URL http://localhost:8080/webpack-dev-server/.

Tests

  • Unit Test: npm test
  • Unit Test with auto watch: npm run test:watch
  • E2E Test: npm run e2e
    • run npm run webdriver-update first
    • make sure a local mock server is running

Check the Unit test coverage report.

Check the E2E test report: Sauce Test Status

Sauce Test Status

Building

npm run build

The optimized files will be generated in build folder.

CI

Proudly use Travis to do Continuous Integration.

Every push will trigger a build on Travis, it will automatically:

  • run unit test.
  • run build script, deploy website and test coverage report to Github pages.
  • run E2E test on different browsers using Sauce Labs.

Check .travis.yml and publish-to-gh-pages.sh for detail implementation.

Check Travis build log for build results.

Blog series

http://pinkyjie.com/tags/angular1-webpack-starter/

License

MIT