---
order: 10
title:
  en-US: New Page
  zh-CN: 新增页面
type: Dev
---

Angular renders a page in a component tree, the actual development is to organize the code in a module tree to make it better to resuse code. For **module granularity** depends on the requirements, ohayojp is positioned in the middle of the front-end. Therefore, it is recommended to organize your code structure from a business perspective.

ohayojp provides a very rich set of Schematics templates to quickly create templates and pages that match ohayojp features, as well as a variety of pluggable [plugins](/cli/plugin).

> Additionally: ohayojp is a standard Angular CLI project, you can still use the default command line.

## First, the module

To create a page, you need to create a module first. If you need a system to set the relevant module, execute the command:

```bash
ng g ohayojp:module sys
```

The CLI will automatically create `sys.module.ts` and `sys-routing.module.ts` files under `src/app/routes/sys`, the former is the system setup module component definition file; the latter is the system setup module routing Configuration file. Of course, in order to make the module contact with the main module, you need to register the new business module in the `src/app/routes/routes-routing.module.ts` file:

```ts
{
  path: '',
  component: LayoutDefaultComponent,
  children: [
    { path: 'sys', loadChildren: () => import('./sys/sys.module').then(m => m.SysModule) }
  ]
}
```

This way, you can safely start developing business pages like menu management, logging, system configuration, etc. in the `sys` directory.

## Second, the page

Use the `ng generate` (abbreviated as: `ng g`) command to create a log list page in the `sys` directory:

```bash
ng g ohayojp:list log -m=sys
```

> See [Command Line Tools](/cli) for more information.

Finally, you can access the [Log](//localhost:4200/#/sys/log) page.

Of course, the log may be a very rich piece of information, you can add a view page opened in a modal box to display more details.

```bash
ng g ohayojp:view view -m=sys -t=log
```

`-t=log` indicates that you want to put the created file under `sys/log/view`.

## Third, IDE

In addition to the cli command line provided by ohayojp, it is recommended to use the [Visual Studio Code](https://code.visualstudio.com/) IDE, because ohayojp adds some extra features to VSCode to better help you. Development.

> Or use the [ohayojp Extension Pack](https://marketplace.visualstudio.com/items?itemName=cipchk.ohayojp-extension-pack) suite directly.

### Code fragment

- [ohayojp Snippets](https://marketplace.visualstudio.com/items?itemName=cipchk.ohayojp-vscode)

### Class style smart reminder

ohayojp has a lot of built-in toolkit styles ([API](/theme/tools)), and the following plugins can be installed directly into the HTML template.

- [ohayojp Snippets](https://marketplace.visualstudio.com/items?itemName=cipchk.ohayojp-vscode)