Giter VIP home page Giter VIP logo

generator-aio-angular's Introduction

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

generator-aio-angular's People

Contributors

coreybrown89 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.