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.
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:
When running an app via ng serve
, a complete Angular startup process would look like this:
Trigger APP_INITIALIZER
(the scaffolding implementation is implemented in StartupService.load
) to get the application information.
Trigger service routing (src/app/routes/routes-routing.module.ts` for scaffolding)
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:
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
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.