This article need re-translated, hope that your can PR to translated it. Help us!

Getting Started

Foreword

NG-ALAIN is a production-ready solution for admin interfaces. Built on the design principles developed by Ant Design, this project introduces higher level components; we have developed templates, components, and a corresponding design kit to improve the user and development experience for admin interfaces.

How to read document

This document uses the following conventions:

  • API

    • [] Input Property

    • () Output Event

    • [()] Two-way binding

    • ng-content Component content placeholders

    • #tpl Refers <ng-template #tpl>

Preparation

You will need node and git. The project is based on Typescript, Angular, g2, @delon and ng-zorro-antd. It would be helpful if you have pre-existing knowledge on those.

Installation

CLI (Recommend)

Please make sure global Angular Cli is latest version via ng version command, please refer to CLI Command Reference for how to upgrade.

yarn global add @angular/cli
ng new my-project --style less --routing --package-manager yarn
cd my-project
ng add ng-alain
yarn start
# Or use HMR mode by: yarn run hmr

Please refer to Schematics for more details.

Clone the Git Repository

git clone --depth=1 https://github.com/ng-alain/ng-alain.git my-project
cd my-project
yarn
yarn start
# Or use HMR mode by: yarn run hmr

Note: Installing with the CLI is a clean scaffolding; using clone the git repository include all example pages.

Scaffolding

NG-ALAIN is a standard Angular CLI project that includes common routes for admins and demonstrates our component library. The project layout is as follows:

├── _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

Development

yarn start

This will automatically open http://localhost:4200. If you see the following page then you have succeeded.

Environment Support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
Electron
Electron
Edgelast 2 versionslast 2 versionslast 2 versionslast 2 versionslast 2 versions

Contributing

Please read our CONTRIBUTING.md first.

If you'd like to help us improve NG-ZORRO, just create a Pull Request. Feel free to report bugs and issues here.

If you're new to posting issues, we ask that you read How To Ask Questions The Smart Way(This guide does not provide actual support services for this project!) and How to Ask a Question in Open Source Community and How to Report Bugs Effectively prior to posting. Well written bug reports help us help you!

Need Help?

For questions on how to use ng-alain, please post questions to Stack Overflowusing the ng-alain tag.

As always, we encourage experienced users to help those who are not familiar with ng-alain!

If you would like to Donateto NG-A