Generator-ng-zhaimi NPM

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 git@github.com: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:
```




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

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

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