Menu Close



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.


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.


  • 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
  • Easy implementation for Sidebar Navigation and Breadcrumb

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



View Source Code
Posted in Development