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, ng-alain is positioned in the middle of the front-end. Therefore, it is recommended to organize your code structure from a business perspective.

NG-ALAIN provides a very rich set of Schematics templates to quickly create templates and pages that match NG-ALAIN features, as well as a variety of pluggable plugins.

Additionally: NG-ALAIN 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:

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

// sys.module.ts
import { NgModule, Type } from '@angular/core';
import { SharedModule } from '@shared';
import { SysRoutingModule } from './sys-routing.module';

const COMPONENTS: Type[] = [];

@NgModule({
  imports: [SharedModule, SysRoutingModule],
  declarations: COMPONENTS,
})
export class SysModule {}

The function of the module is to import the modules we need. All NG-ZORRO, @delon/abc, @delon/chart, etc. are loaded on demand. The external components are imported wherever the current business page needs. In order to reduce these import actions, NG -ALAIN has refined two files shared-delon.module.ts and shared-zorro.module.ts to merge some modules frequently used throughout the project into a module called SharedModule, which is why it is necessary Import it in the business module for the first time. Note: It is not recommended to put all the components in SharedModule, as far as possible, put the modules that need to be used two or three times or more.

And the routing configuration module:

// sys-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class SysRoutingModule {}

By now, 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:

ng g ng-alain:list log -m=sys

See Command Line Tools for more information.

Finally, you can access the 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.

ng g ng-alain:view view -m=sys -t=log

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