generator-aio-angular

All In One Yeoman generator for AngularJS 1.3, using gulp and ui-router with material design, based on John Papa's generator-hottowel and angular-styleguide.

Wanna use Webpack + ES6? Check the angular1-webpack-starter project.

Pure front-end implementation, all API interaction are mocked using angular-mocks. The server folder is just a placeholder here, you can use any back-end technique.

Preview

Check out a demo site generated by this generator.

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.

Feature

• Material Design
  • Using LumX.
  • Why not Angular Material? Many common used components are missing, for exmaple, dropdown menu.
  • Why not Bootstrap Material? Many components are not implemented, not pure material design.
• Flex Layout
  • Using flex layout for main layout and many other places.
• Responsive
  • Support mutiple 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 content.styl)
• Splited Gulp Tasks
  • Gulp tasks are splited in different files by category. (see gulp folder)
• More understandable router design
  • Using ui-router for main layout. (see layout.route.js)
• Easy implementation for Sidebar Navigation and Breadcrumb
  • See sidebar.controller.js and breadcrumb.controller.js.

Getting Started

npm install -g yo
npm install -g generator-aio-angular
yo aio-angular

How to do development

Many files(prefixed by _) under app/templates folder include <%= appNmae %> tag which needs to be replaced by Yeoman, it's not very convenient to do development under app/templates folder. That's the reason why I add a script called change-env.js.

• make app/templates ready for developent:

npm run-script env dev

This will rename all files prefixed by _ to normal name and replace the placeholder tag to normal content.

• change back from development:

npm run-script env prod

Blog Posts related(written in Chinese)

• 相关博文

Future Plan

Check the issues

License

MIT