First, pre-order preparation

As you begin your business development on NG-ALAIN, i recommend that you first review the following documents, which is very helpful for everyone on the team.

• Ant Design Guide article

• Ant Design for Angular

• Antv chart - G2

• NG-ZORRO Community recommendation

NG-ALAIN's base component library comes from NG-ZORRO, so you can get a very detailed API documentation for its use on the official website. For ng components provided by -alain are obtained through the component page.

Second, the startup process

NG-ALAIN is a scaffold that can be used directly in production environments. The prerequisite for understanding these details is that you have a certain knowledge of Angular. The following documents may be helpful to you before you start:

• NG-ALAIN Getting started video (YouTube、Tencent video、Station B）

• Know the column

When running an app via ng serve, a complete Angular startup process would look like this:

1. Trigger APP_INITIALIZER (the scaffolding implementation is implemented in StartupService.load) to get the application information.

2. Trigger service routing (src/app/routes/routes-routing.module.ts` for scaffolding)

3. Rendering components

1) APP_INITIALIZER

From a mid and back-office perspective, NG-ALAIN always believes that a network request is required to get some application information (eg menu data, user data, etc.) before Angular starts.startup.service.ts；It returns a Promise object, which always needs to be called: resolve() to ensure that Angular starts normally.

Network requests may encounter a 403 error because the scaffolding uses the user authentication module by default and always assumes that all requests must be a valid user authorization. For more documentation see:

• Interact with server

• Auth User Authentication

After obtaining the application information, you need to assign some values ​​to the built-in services of the scaffolding, including:

Application Information

Including: application name, description, year, information can be directly injected into the SettingsService (API) and directly in the HTML template.

this.settingService.setApp(res.app);

User Info

Including: name, avatar, email address, etc., information can be directly injected into the SettingsService (API) and directly in the HTML template.

this.settingService.setUser(res.user);

Layout information

Including: name, avatar, email, address, etc., information can be directly injected into the SettingsService (API) and directly in the HTML template.

// Whether to fix the top menu
this.settingService.setLayout(`fixed`, false);
// Whether to collapse the right menu
this.settingService.setLayout(`collapsed`, false);

Menu data

NG-ALAIN takes menu from the remote and can also inject MenuService (API) to change the menu data. Of course, it is more reasonable to perform menu assignment before Angular starts.

Menu data Make sure ensure Menu format, menu data throughout Applications, for example: page header auto navigation page-header, page title text TitleService Wait.

this.menuService.add(res.menu);

Page title

If the page title always wants to add the application name as a suffix, you can re-adjust the suffix attribute value by injecting TitleService(API).

// Set the suffix of the page title
this.titleService.suffix = res.app.name;

ACL

this.aclService.setFull(true);

It is recommended to load the ACL access control permission data before starting. For more details, please refer to Access Control List.

Globalization

It is recommended to load the internationalization package first before starting, which will ensure that the page is rendered as the target language after the project is started. See Internationalization for more details.

2) Business routing

Scaffolding top-level routing begins with routes-routing.module.ts Its structure is as follows:

const routes: Routes = [
  {
    path: '',
    component: LayoutDefaultComponent,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', component: DashboardComponent, data: { title: 'Dashboard' } },
      // business submodule
      // { path: 'trade', loadChildren: './trade/trade.module#TradeModule' }
    ]
  },
  // Blank layout
  {
    path: 'blank',
    component: LayoutBlankComponent,
    children: [
    ]
  },
  // passport
  {
    path: 'passport',
    component: LayoutPassportComponent,
    children: [
      { path: 'login', component: UserLoginComponent },
      { path: 'register', component: UserRegisterComponent },
      { path: 'register-result', component: UserRegisterResultComponent }
    ]
  },
  // Single page does not wrap Layout
  { path: 'callback/:type', component: CallbackComponent },
  { path: '403', component: Exception403Component },
  { path: '404', component: Exception404Component },
  { path: '500', component: Exception500Component },
  { path: '**', redirectTo: 'dashboard' }
];

Above we used the LayoutDefaultComponent base layout in the business module. User authorization uses LayoutPassportComponent user authorization layout and the full screen layout.

It is recommended that all submodules be loaded using a lazy module, such as the TradeModule order module, which organizes the code structure more efficiently.

Under what circumstances do you not use lazy loading?

Angular startup from the top-level component. When a lazy module is encountered, it will initiate a script request. At this time, the dashboard or login page will be blank due to network requests, which is not good for the experience.

Routing permission control

The routing URL may be affected by the browser's own historical memory, so that users may access the unprivileged route. If you want a better experience, you need to configure the canActivate option on the route. When the user has no permission, it will utomatically jump to the relevant page. see the ACL Routing Guard section for details.

IDE

A developer must first sharpen his tools if he is to do his work well, NG-ALAIN recommended to use the Visual Studio Code IDE, because ng-alain adds some extra features to VSCode to better help you. Development.

Or use the NG-ALAIN Extension Pack suite directly.

Code fragment

• NG-ALAIN Snippets

Class style smart reminder

ng-alain has a lot of built-in toolkit styles (API), and the following plugins can be installed directly into the HTML template.

• NG-ALAIN Snippets

  <