generator-ng-zhaimi

Yeoman generator

• Forked from angular-fullstack's frontend part: ng-component
• Follows the ngbp Repo and Angular Style Guide
• ComposeWith gulp-angular's app part
• Contains pre-commit, scss-lint, jscs, eslint and two scripts to do release and deploy
• Supports migrating from generator-angular
• Supports extensions: [scss, js, html], for now, so ignore options about style, javascript and html in promptings.
• Welcome everyone to contribute.

So happy to find 300+/month downloads after a casual glance at this repo in npm, which was published 10 months ago.

However, where are my github stars? Unfortunately, I, an intern 10 months ago, didn't change the repo url after fork.

Just update the link in case someone is using this repo. Welcome contribute!

Getting Started

Install

Install required tools yo, gulp and bower:

npm install -g yo gulp bower

Install generator-ng-zhaimi:

From npm:

npm install -g generator-ng-zhaimi

Or from repos, which will be the latest version

git clone [email protected]:stupidisum/generator-ng-zhaimi.git
// or zhaimi private repo
cd generator-ng-zhaimi
npm install
sudo npm link

Initialize:app

Create a new directory, and go into:

mkdir my-new-project && cd $_

Run yo gulp-angular, and select desired technologies:

yo ng-zhaimi

Sub-generators

• ng-zhaimi:route(use 'routeA.routeB' to represent subRoute)
• ng-zhaimi:controller
• ng-zhaimi:factory
• ng-zhaimi:directive
• ng-zhaimi:filter
• ng-zhaimi:service
• ng-zhaimi:provider
• ng-zhaimi:decorator

Documentation

Main-generator

Generator-gulp-angular

• docs/README
• More informations about how to use your new project is available in the docs/user-guide
• If you want to know: docs/how-it-works.

Sub-generators

Generator-angular-fullstack

Migrate

Migrate your project generated by generator-angular

• Copy your code in old-project into new-project

cd old-project
cp -r app new-project/src
cp -r test new-project
cp package.json bower.json new-project
cd new-project
mv src/app/robots.txt src/app/favicon.ico src

• Merge your index.* into new index.*. Remember to remain inject comments.

  Typical files:

  • src/app/index.hmtl -> src/index.html

    Remember to delete script-includes injected by generator-angular, because gulp will inject them into this block when building:

    <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
    <!-- inject:js -->
    <!-- js files will be automatically insert here -->
    <!-- endinject -->

  • src/app/styles/main.scss -> src/app/index.scss

    recommend remianing main.scss. Let gulp to inject, so that you can control inject order in gulp/inject.js like this:

    var injectFiles = gulp.src([
      path.join(conf.paths.src, '/app/**/*.scss'),
      path.join('!' + conf.paths.src, '/app/index.scss'),
      path.join(conf.paths.src, '/app/styles/animate.scss'),
      path.join(conf.paths.src, '/app/styles/style.scss'),
    ], {read: false});

  • src/app/scripts/app.js -> src/app/index.*.js

    split app.js into module.js, run.js, route.js, config.js, ...

• Add prefix app/ for all assets' urls in files, including

  • route
  • directive
  • controller(openModal)
  • html(img, ng-include)
  • scss

• Config server in gulp/server, uncomment server.middleware first.

  var domainPort = 'franky.test.zhai.me';
  var changeOrigin = true;
  if (options.ip) {
    domainPort = options.ip + ':8080';
    changeOrigin = false;
  } else if (options.server) {
    domainPort = options.server;
  }
  server.middleware = proxyMiddleware(
    'http://' + domainPort + '/franky/api/',
    {changeOrigin: changeOrigin}
  );
  
  browserSync.instance = browserSync.init({
       startPath: '/',
    server: server,
    browser: browser,
    port: 9100,
    ui: {
      port: 9180,
      weinre: {
        port: 9190,
      },
    },
  });

• Test the result with gulp serve, gulp serve:dist and gulp build

  You can test gulp build results with nginx proxy.

  cp -r dist /usr/local/Cellar/nginx/1.x.x/

• Pre-commit with pre-commit and pre-commit run [hookId]

  Your code certainly can't pass our pre-commit.

  • Best choice: Fix them.

  • Good choices:

    • add comments to set envs or disable some rules

      /*eslint-env node */
      
      // scss-lint:disable Comment
      ...
      // scss-lint:enable Comment

    • change errors to warnings in .eslintrc

      "rules": {
        "comma-dangle": [1, "always-multiline"],
        "angular/controller-name": [1, "/[A-Z].*Ctrl$/"],
        "no-unused-vars": 1
      }

  • Bad choices:

    • add ignores or excludes
    • skip hooks SKIP=eslint pre-commit, SKIP=eslint git commit ...

Pre-commit

• pre-commit
• scss-lint
• jscs
• eslint

Useful commands:

• pre-commit run --all-files: run pre-commit on all files.
• pre-commit run (hookId): run single hook by hookId, which could be found in .yaml file.
• SKIP=(hookId) pre-commit: run pre-commit while skipping one single hook by hookId
• SKIP=(hookId) git commit: run git commit while skipping one single hook by hookId

Typical Workflow (kind of out-dated, but maybe have some reference significance)

Style1: Readable and Short Filename

Step1: Config

vi .yo-rc.json
...
"routeDirectory": "src/app/",
"directiveDirectory": "src/app/common/directives/",
"filterDirectory": "src/app/common/filters/",
"serviceDirectory": "src/app/common/services/",
...
"fileNamePrompt": true,
"defaultFileName": ""
...

Step2: Users

// enter all the way
yo ng-zhaimi:route users
yo ng-zhaimi:route users.login
yo ng-zhaimi:route users.register
yo ng-zhaimi:factory users

And you will get this structure:

src
└─┬ app/
  ├─┬ users/
  │ ├─┬ login/
  │ │ ├── _login.scss
  │ │ ├── login.html
  │ │ ├── login.js
  │ │ ├── login.spec.js
  │ │ └── route.js
  │ ├─┬ register/
  │ │ ├── _register.scss
  │ │ ├── register.html
  │ │ ├── register.js
  │ │ ├── register.spec.js
  │ │ └── route.js
  │ ├── _users.scss
  │ ├── users.html
  │ ├── users.js
  │ ├── users.spec.js
  │ └── route.js
  └─┬ common/
    └─┬ services/
      └─┬ users/
        ├── factory.js
        └── factory.spec.js

Step3: Orders

assume | common | private ---------- | ------ | ---------- serives | users | orders directives | order | order-item

// enter all the way
yo ng-zhaimi:route orders
yo ng-zhaimi:directive order
yo ng-zhaimi:service orders
? Where would you like to create this service? (common/services/orders) app/orders
yo ng-zhaimi:directive order-item
? Where would you like to create this directive? (common/directives/order_item) app/orders/item
? What file name would you like to use? (order_item) item

And you will get this structure:

src
└─┬ app/
  ├─┬ orders/
  │ ├─┬ item/
  │ │ ├── _directive .scss
  │ │ ├── directive .html
  │ │ ├── directive .js
  │ │ └── directive .spec.js
  │ ├── _orders.scss
  │ ├── orders.html
  │ ├── orders.js
  │ ├── orders.spec.js
  │ ├── route.js
  │ ├── service.spec.js
  │ └── service.js
  └─┬ common/
    └─┬ directives/
      └─┬ order/
        ├── _directive .scss
        ├── directive .html
        ├── directive .js
        └── directive .spec.js

Style2: index-style names

Step1: Config

Same as Style1, but

...
"defaultFileName": "index"
...

Step2: Users

Same as Style1, but you will get

...
    ├─┬ login/
    │ ├── _index.scss
    │ ├── index.html
    │ ├── index.js
    │ ├── index.spec.js
    │ └── route.js
    ├─┬ register/
    │ ├── _index.scss
    │ ├── index.html
    │ ├── index.js
    │ ├── index.spec.js
    │ └── route.js
    ├── _index.scss
    ├── index.html
    ├── index.js
    ├── index.spec.js
    └── route.js
...
    └─┬ services/
      └─┬ users/
        ├── factory.js
        └── factory.spec.js
...

Step3: Orders

Same as Style1, and you should know the answer.

Template Properties

1. lodash: reference to lodash
2. appname: the app name specified by bower.json or the project's directory name
3. scriptAppName: the angular app name, appname + 'App'
4. cameledName: the cameled name argument that is passed to the (sub)generator
5. classedName: the classed name argument that is passed to the (sub)generator
6. dashedName: the dashed name argument that is passed to the (sub)generator
7. underscoredName: the underscored name argument that is passed to the (sub)generator

License

MIT