ohayolibs
Version:
Ohayo is a set of essential modules for ohayojp.
203 lines (147 loc) • 7.24 kB
Markdown
---
order: 20
title: ng g
subtitle: Business page
type: Documents
---
## Foreword
`ng generate` (shorthand: `ng g`) is used to generate business pages. The default Angular Cli template is different from the ohayojp specification. For example, we want to include a `SharedModule` when generating a module.
ohayojp adds cool operations based on this.
## Command format
```bash
ng g ohayojp:[command name] [name] [options]
```
> ohayojp has own file structure specification, which can cause exceptions when you break this file structure.
## Module
Generate a `trade` module:
```bash
ng g ohayojp:module trade
```
Will be generated `trade.module.ts`, `trade-routing.module.ts` in the `routes/trade` directory.
The module imports `SharedModule` and some import and export specifications, and you can't destroy these variable names (like this: `COMPONENTS`, `COMPONENTS_NOROUNT`, `routes`).
## Business page
- `empty` Blank page
- `list` List page
- `edit` Edit page
- `view` View page
- `curd` List, edit, view pages
Generate a `list` list page in the `trade` directory:
```bash
ng g ohayojp:list list -m=trade
```
**Note:** `-m` must be specified because ohayojp thinks the page should be in a specific module, not a ghost.
### Cool
In general, a module might includes the same type of business page, and its file structure might like this:
```
sys
log
view
view.component.ts
edit
edit.component.ts
log.component.ts
sys.module.ts
```
So when you want to generate a view page that should be under the `log` directory (could be set like `log/list`):
```bash
ng g ohayojp:view view -m=sys -t=log
```
**Override the default template pages**
If the default pages generated by commands `list`, `edit`, `view`, and `empty` are not expected by the business, can be override.
For example, override the `list` command default template, create the directory name `_list` under the root directory `_cli-tpl`, and the directory structure must be equivalent to the [original list directory](https://github.com/ohayojp/ohayo/tree/master/packages/schematics/list/files).
### edit & view page
For `edit`, `view`, the default is modal render, you can use the page render:
```bash
ng g ohayojp:edit [page name] --modal=false
```
> If you receive `No provider for NzModalRef!` error, because of modal component must be opened with `nzModalService`, and does not need to register into route.
## Custom template page
In addition to the default, you can also customize the project-level business page.
For example, to create a custom edit page template, you only need to create the following directory structure in the project's root directory:
```
└── _cli-tpl
│ └── edit // Your template name
│ └── __path__ // (name fixed value)
│ └── __name@dasherize@if-flat__ // (name fixed value)
│ ├── __name@dasherize__.component.ts // Component class file (name fixed value)
│ ├── __name@dasherize__.component.html // Component html file (name fixed value)
│ └── __name@dasherize__.component.spec.ts // Component spec file (name fixed value)
└── src
```
After that, just run:
```bash
ng g ohayojp:tpl [your template name] [name] -m=trade
```
### How to write a template file
In the directory structure of the custom page, the file name begins with the `__` prefix is a variable placeholder, Cli passes some parameters and methods:
| Type | Name | Default | Description |
| -------- | --------------- | --------- | -------------------------------------------- |
| Variable | project | - | Project name |
| Variable | name | - | Name, equivalent command line `<name>` |
| Variable | path | - | Target path |
| Variable | flat | `false` | Whether file is flat |
| Variable | inlineTemplate | `false` | Whether inline template(Fixed value `false`) |
| Variable | selector | - | Component `selector` |
| Variable | componentName | - | Component name |
| Variable | changeDetection | `Default` | Component `changeDetection` value |
| Variable | modal | - | Whether to use Modal to render |
| Method | decamelize | - | Converts a camelized string into all lower case separated by underscores |
| Method | dasherize | - | Replaces underscores, spaces, or camelCase with dashes |
| Method | camelize | - | Returns the lowerCamelCase form of a string |
| Method | classify | - | Returns the UpperCamelCase form of a string |
| Method | underscore | - | More general than decamelize. Returns the lower_case_and_underscored
form of a string. |
| Method | capitalize | - | Returns the Capitalized form of a string |
These variables or methods can be used in templates, for example: `<%=componentName%>` for component names, `<% %>` for JavaScript code. You can refer to:
- [ohayo](https://github.com/ohayojp/ohayo/blob/master/packages/schematics/edit/files/__path__/__name%40dasherize%40if-flat__/__name%40dasherize__.component.html)
- [material2](https://github.com/angular/material2/blob/master/src/lib/schematics/dashboard/files/__path__/__name%40dasherize%40if-flat__/__name%40dasherize__.component.html)
### Custom Data
The `tpl` command allows you to process the data further before generating the file, The command will check the `_cli-tpl/_fix.js` file during execution and call the `fix` method, which must return a `Promise` object, for example:
> **Note: ** CLI is a Node JS program, so the syntax is based on Node JS.
```js
function fix(options) {
return new Promise((resolve) => {
resolve();
});
}
module.exports = {
fix
};
```
The `fix` method has only an `options` parameter, which contains the CLI used to generate all parameter data, even if it is undefined, for example:
```bash
ng g ohayojp:tpl list -m=setting --import-type=UserDto
```
`import-type` is not a defined parameter of the command itself, but `options` will convert these undefined parameters to an `extraArgs` object, so the `options` you receive will be:
```json
{
"tplName": "test",
"modal": true,
...
"extraArgs": {
"import-type": "UserDto"
}
}
```
The `options` object is passed to the template engine, so you can attach some processed data to `options` and use them in the template file, for example:
```json
{
"tplName": "test",
"modal": true,
...
"extraArgs": {
"import-type": "UserDto",
"newData": "asdf"
}
}
```
You can apply `newData` to the template, for example `__name@dasherize__.component.html`:
```html
<page-header></page-header>
<%= extraArgs.newData %>
```
The result is:
```html
<page-header></page-header>
asdf
```