PinkyJie / angular1-webpack-starter

Component based Angular(1.x) web development with Webpack and ES6.

angular1-webpack-starter

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 fouber/blog#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:

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