Business page

Foreword

ng generate (shorthand: ng g) is used to generate business pages. The default Angular Cli template is different from the ng-alain specification. For example, we want to include a SharedModule when generating a module.

ng-alain adds cool operations based on this.

Command format

ng g ng-alain:[command name] [name] [options]

Examples:

# Generate a trade module
ng g ng-alain:module trade
# Generate a TradeListComponent List component under the trade module
ng g ng-alain:list list -m=trade
# Generate a TradeListComponent List component and TradeService class under the trade module
ng g ng-alain:list list -m=trade --service=root
# Generate a ListComponent List component under the trade module
ng g ng-alain:list list -m=trade --withoutModulePrefixInComponentName=true
# Generate a TradeEditComponent Edit component under the trade module
ng g ng-alain:edit edit -m=trade

ng-alain has own file structure specification, which can cause exceptions when you break this file structure.

OptionDescription
-m or --moduleAllows specification of the declaring module.
-t or --targetSpecifies relative path, could be set like bus/list
--modalSpecifies using modal mode
--withoutPrefixWithout prefix to selectors
--withoutModulePrefixInComponentNameWithout prefix to component name
--serviceSpecifies how to generate service classes, can be set: ignore, root, none

Module

Generate a trade module:

ng g ng-alain: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, routes).

By default, all the codes are stored under app/routes, which can be pointed to other folder through ng-alain.json, for example:

{
   "$schema": "./node_modules/ng-alain/schema.json",
   "projects": {
     // Indicates that ng-alain projects are stored under `app/pages`
     "ng-alain": {
       "routesRoot": "app/pages"
     }
   }
}

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:

ng g ng-alain:list list -m=trade

Note: -m must be specified because ng-alain 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):

ng g ng-alain: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.

edit & view page

For edit, view, the default is modal render, you can use the page render:

ng g ng-alain: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 (You can get it via Github):

└── _cli-tpl
│   └── edit                                                       // Your template name
│       └── __path__                                               // (name fixed value)
│           └── __name@dasherize@if-flat__                         // (name fixed value)
│               ├── __name@dasherize__.component.ts.template       // Component class file (name fixed value)
│               ├── __name@dasherize__.component.html.template     // Component html file (name fixed value)
│               └── __name@dasherize__.component.spec.ts.template  // Component spec file (name fixed value)
└── src

After that, just run:

ng g ng-alain: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:

TypeNameDefaultDescription
Variableproject-Project name
Variablename-Name, equivalent command line <name>
Variablepath-Target path
VariableflatfalseWhether file is flat
VariableinlineTemplatefalseWhether inline template(Fixed value false)
Variableselector-Component selector
VariablecomponentName-Component name
VariablechangeDetectionDefaultComponent changeDetection value
Variablemodal-Whether to use Modal to render
Methoddecamelize-Converts a camelized string into all lower case separated by underscores
Methoddasherize-Replaces underscores, spaces, or camelCase with dashes
Methodcamelize-Returns the lowerCamelCase form of a string
Methodclassify-Returns the UpperCamelCase form of a string
Methodunderscore-More general than decamelize. Returns the lower_case_and_underscored
form of a string.
Methodcapitalize-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:

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.

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:

ng g ng-alain: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:

{
  "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:

{
  "tplName": "test",
  "modal": true,
  ...
  "extraArgs": {
    "import-type": "UserDto",
    "newData": "asdf"
  }
}

You can apply newData to the template, for example __name@dasherize__.component.html:

<page-header></page-header>
<%= extraArgs.newData %>

The result is:

<page-header></page-header>
asdf