All In One Yeoman generator for AngularJS 1.3, using
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
- 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.
- Support mutiple devices with different screen size.
- Easy responsive implementation, very convenient to support small screen devices. (see responsive.styl)
- Using animate.css.
- All the animation defined by
animate.csscan 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
npm install -g yo npm install -g generator-aio-angular yo aio-angular
How to do development
Many files(prefixed by
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
app/templatesready 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)
Check the issues