getting-started.en-US.md

order	title	type	i18n
10	Getting Started	Basic	need-update

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></ng-template>

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.

npm install -g @angular/cli
ng new my-project --style less --routing
cd my-project
ng add ng-alain
npm start
# Or use HMR mode by: npm 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
npm install
npm start
# Or use HMR mode by: npm 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

npm start

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


Environment Support

• Limited by Angular, no longer supports IE
• Modern browsers, Browser support
• Server-side Rendering
• Electron

IE / Edge	Firefox	Chrome	Safari	Opera	Electron
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 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  using the ng-alain tag.

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

DONATE

If you would like to to NG-ALAIN.