All In One AngularJS generator(Material Design/Gulp/ui-router).
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
.editorconfig update editorconfig Jun 7, 2015
.gitattributes
.gitignore
.jshintrc
.yo-rc.json
LICENSE
README.md
change-env.js
html5-mode-patch.diff
package.json
publish-to-gh-pages.sh

README.md

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
  • 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

License

MIT