NG-ALAIN scaffold is a front-end solution to support middleware and back-end application. It is based on Angular and ng-zorro-antd(Angular implementation of Ant Design). The scaffold includes a set of common functionalities and business component libraries. It reduces lots of infrastructure development overwhelmingly and let you focus on business logic development.

Architecture Diagram

@delon/theme

Theme library of scaffold, we publish the theme library to NPM, which extremely simplifies upgrade effort.

Theme library includes not only essential styles(CSS tool like bootstrap) required by NG-ALAIN, but also a set of common data rendering(Pipe) and service tools(page title, scroll bar, etc..), which are needed during daily development.

@delon/abc

Scaffold provides a default set of business components, which abstract commonly used block/area in console service. We will continue to maintain and iterate the components. Provide more advanced abstract components than Ant Design base components to middleware and back-end business.

@delon/chart

@delon/chart chart library is customised based on G2. Providing commonly used chart suite in business development. It can be used alone or composed together to achieve more complex and fancy display effect.

@delon/form

@delon/form follows standard of JSON Schema to build dynamic forms.

@delon/auth

User Authentication module is used for resolving steps to obtain, save and use authentication.

@delon/acl

ACL Access Control List is a very simple role based permission control. It can even reach the granularity of controlling the visibility of a button.

@delon/cache

Reduce the Http request by storing cache of the dictionary, city data, etc. into memory or persistence storage.

@delon/mock

Mock will intercept Angular HTTP request and return testing data.

@delon/util

Daily Utilities。

@delon/testing

Commonly used testing suite.

CLI Schematics

CLI Tool

Directory Structure

Schematic diagram of directory structure：

├── _mock                                       # Mock Data rule
├── src
│   ├── app
│   │   ├── core                                # Core module
│   │   │   ├── i18n
│   │   │   ├── net
│   │   │   │   └── default.interceptor.ts      # Default HTTP interceptor
│   │   │   ├── services
│   │   │   │   └── startup.service.ts          # Initialize project configuration
│   │   │   └── core.module.ts                  # Core module file
│   │   ├── layout                              # Core layout
│   │   ├── routes
│   │   │   ├── **                              # Business directory
│   │   │   ├── routes.module.ts                # Service routing module
│   │   │   └── routes-routing.module.ts        # Service routes registration
│   │   ├── shared                              # Shared module
│   │   │   ├── shared-delon.module.ts          # @Delon/* import of secondary shared modules
│   │   │   ├── shared-zorro.module.ts          # NG-ZORRO import of secondary shared modules
│   │   │   └── shared.module.ts                # Shared module file
│   │   ├── app.component.ts                    # Root component
│   │   └── app.module.ts                       # Root module
│   │   └── global-config.module.ts             # @delon & ng-zorro global config
│   ├── assets                                  # Local static resource
│   ├── environments                            # Environment variable configuration
│   ├── styles                                  # Style directory
└── └── style.less                              # Style guide entry

The following is a description and use of each directory and file.

_mock

The Mock data rules directory, if you create a project via Command Line Tools, you can specify the --mock parameter to determine if the Mock function is required.

src/app/core/core.module.ts

The core module will only be imported once. Therefore, core service classes (eg, messages, data access, etc.) that are required for the entire ** business module should exist here.

src/app/core/i18n

Internationalization data loading and processing related classes. If you create a project via Command Line Tool, you can specify the -di parameter to determine whether internationalization support is required.

src/app/core/net

The default interceptor, where you can handle request parameters, request exceptions, business exceptions, and so on.

src/app/core/services/startup.service.ts

Useful when you need to execute some remote data (eg application information, user information, etc.) before Angular launches.

It is a simple method and returns a Promise object, unless Angular will abort the launch unless resolve(null) is explicitly executed.

src/app/layout

Layout file code, refer to the page structure section.

src/app/routes

Business module, all your business code will be here.

src/app/shared/shared.module.ts

The shared module means that some third-party modules, custom components, and custom instructions that you need to use for the entire business module should exist here. In addition, for @delon & NG-ZORRO, two shared secondary module imports, shared-delon.module.ts andshared-zorro.module.ts.

src/app/global-config.module.ts

Global configuration for @delon & NG-ZORRO.

src/environments

The application environment variable contains the following values:

• SERVER_URL All HTTP request prefixes

• production Whether the production environment

• useHash Whether the route is useHash mode

  <