Skip to content

PinkyJie/generator-aio-angular

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
app
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

All In One AngularJS generator(Material Design/Gulp/ui-router).

Resources

License

Stars

Watchers

Forks

Packages

No packages published