NG-ZORRO Angular UI 组件库使用教程

NG-ZORRO Angular UI 组件库使用教程

ng-zorro-antd Angular UI Component Library based on Ant Design 项目地址: https://gitcode.com/gh_mirrors/ng/ng-zorro-antd

1. 项目介绍

NG-ZORRO 是一个基于 Ant Design 的企业级 Angular UI 组件库。它提供了 60 多个高质量的 Angular 组件，适用于构建企业级应用。NG-ZORRO 使用 TypeScript 编写，支持 OnPush 模式，具有高性能和强大的主题定制功能。此外，它还支持国际化，适用于多种语言环境。

2. 项目快速启动

安装

我们推荐使用 @angular/cli 来安装 NG-ZORRO，它不仅使开发更简单，还能让你充分利用 Angular 的丰富生态系统和工具。

$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ ng add ng-zorro-antd

使用

在 app.module.ts 文件中导入你想要使用的组件模块：

import { NzButtonModule } from 'ng-zorro-antd/button';

@NgModule({
  imports: [
    NzButtonModule
  ]
})
export class AppModule { }

配置

在 angular.json 文件中添加样式和 SVG 图标资源文件链接：

{
  "assets": [
    {
      "glob": "**/*",
      "input": "node_modules/@ant-design/icons-angular/src/inline-svg/",
      "output": "/assets/"
    }
  ],
  "styles": [
    "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
  ]
}

3. 应用案例和最佳实践

企业级应用

NG-ZORRO 被广泛应用于各种企业级应用中，如阿里巴巴、阿里云、ThoughtWorks 等。它的高质量组件和强大的定制功能使其成为构建复杂企业应用的理想选择。

最佳实践

• 国际化支持：NG-ZORRO 支持多种语言，可以通过配置轻松实现国际化。
• 主题定制：通过修改主题变量，可以轻松定制应用的外观和风格。
• 性能优化：使用 OnPush 模式和 Angular 的 Change Detection 机制，可以显著提高应用的性能。

4. 典型生态项目

NG-ZORRO-MOBILE

NG-ZORRO-MOBILE 是一个基于 Ant Design Mobile 和 Angular 的可配置移动端 UI 组件库。它提供了适用于移动端的高质量组件，适用于构建移动应用。

NG-ALAIN

NG-ALAIN 是一个基于 NG-ZORRO 的后台管理系统脚手架，提供了丰富的后台管理功能和模板，适用于快速搭建企业级后台管理系统。

通过以上模块的介绍，你可以快速上手并深入使用 NG-ZORRO 组件库，构建高质量的 Angular 应用。

ng-zorro-antd Angular UI Component Library based on Ant Design 项目地址: https://gitcode.com/gh_mirrors/ng/ng-zorro-antd