Giter Club home page Giter Club logo

generator-ng2component's Introduction

angular+ ts + yo

generator-ng2component

###An angular 2 component/service generator(based on angular official release) that can generate templates for all kinds of angular 2 projects.

find in npm: https://www.npmjs.com/package/generator-ng2component ###VERSION 1.1.3

current features:
1. create a component with full standard structure (check example tree below);
2. create a service with full standard structure;
3. auto declare component in your current .module.ts file, or don't declare;
4. you decide if you want to use index.ts file

###Steps: ( Assuming you have installed node.js [tested against node v6.9.1])

  1. install yeoman (you may need 'sudo' for permission)

    npm install -g yo

  2. install this tool

    globally (may need sudo): npm install -g generator-ng2component

    or just to local project: npm install --save-dev generator-ng2component

  3. run via yeoman

    yo ng2component

  4. follow the command line instructions, and your component will be populated in designated directory.

    • what do u want to generate?
      you can generate either component or service or both! default only component
      • Name for this Component & its Folder?
        default: show-message
        [notice: generator will declare this component for u only if u have corresponding .module.ts]
      • resides position?
        default under: your_project_root/src/app, enter '.' will generate in current folder
      • style sheet?
        choose from scss, css, less
      • where is your module?
        default: src/app; (type = use component's location, type - do not declare)
        [assuming your module's folder name is the same with module's name, above example will find src/app/app.module.ts, also AVOID TYPING TRAILING SLASH at the end]
      • service name?
        default: device
      • service resides position?
        default under: your_project_root/src/app/shared/services/
      • import service into new component?
        default: no
      • omit index.ts?
        default: false. it will generate index.ts for each of your cmp/service

    normally, it will generate following (example) structure under your project/src/app:

    project-root/
    ├── src/
    │   └── some-module-name/
    │       ├── show-message/
    │       │    ├── show-message.component.ts
    │       │    ├── show-message.component.spec.ts
    │       │    ├── show-message.component.scss[less][css]
    │       │    ├── show-message.component.html
    │       │    └── index.ts
    │       ├── some-module-name.module.ts (auto declare)
    │       └── shared/
    │            └── device/
    │                ├── device.service.ts
    │                ├── device.service.spec.ts
    │                ├── device.ts
    │                └── index.ts
    

Find more generators on yeoman: http://yeoman.io/generators/

TODO (some thoughts):

  1. add 'generate pipe/directive/module/class/interface/e2e test' option

You're welcome to contribute (open issues, PRs)! Also, if you think this tool is helpful, please watch/star/fork me on github/npmjs and let more people know it!

developing logs

Check current version: npm view generator-ng2component version
Check newest version: npm outdated generator-ng2component
Update your local version: npm install generator-ng2component big changes happened on following versions. Feel free to use older version if you think current version contains issues.

02/25/2017 v1.1.2 generator can declare component automatically in your .module.ts now
02/24/2017 v1.1.1 generator can declare component automatically for your app.module.ts now
02/22/2017 v1.0.9 capable to omit generating index.ts now
11/12/2016 v1.0.6 generator is capable to import service automatically into component now
11/09/2016 v1.0.3 now you have stable service generator
11/8/2016 v0.0.11 fixed ts linting warnings
11/07/2016 v0.0.7 added global colors/fonts ref to scss
11/01/2016 v0.0.5 first stable version, can only generate component

generator-ng2component's People

Contributors

zzs1020 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

generator-ng2component's Issues

Some suggestions to make usage more clear

The flow is confusing at the moment and took me a while to figure out that I had to go to a different directory.

I'd like to be able to go to my directory, then yo ng2component. Instead I had to go up one directory.

Suggestion:

  1. yo ng2component
  2. component or service
  3. Component folder name? (I didn't know that the folder would be the same as the component)
  • instead ask Folder and component name?
  1. Resides location?
  • instead ask "Resides location (/ for current)?" - then make this work (I'm getting errors when I enter /)
  1. Style sheets?
  • once I choose one, please default it to that like the questions above.

Extra request: allow me to choose not to create the index.ts file. I'm going to end up deleting it every time.
Thanks for this generator. I'm using https://github.com/aspnet/JavaScriptServices/ and couldn't figure out how to get the @angular/cli working inside of it. I didn't want to create all these files by hand.

Add Declarations/providers automatically

It'd be great (if possible) to have yo ng2component add the import and declaration or provider to the app.module.ts file. The Angular Cli does this. If you had this, I wouldn't miss anything from the cli (when I'm using the JavaScriptServices template or Asp .Net).

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.