Angular实战之使用NG-ZORRO创建一个企业级中后台框架

时间:2024-02-01 14:14:29

前言:

  在之前的一篇文章已经介绍过了,公司正在使用NG-ZORRO组件库开发后台应用,并且详细的介绍了Angular开发环境的搭建和项目的创建。这篇文章就是为了让大家熟悉了解我们该如何在Angular项目中使用到NG-ZORRO UI组件库搭建后台管理框架。

NG-ZORRO介绍:

官网地址:https://ng.ant.design/docs/introduce/zh

ng-zorro-antd 是遵循 Ant Design 设计规范的 Angular UI 组件库,主要用于研发企业级中后台产品。全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。

NG-ZORRO特性:

  • 提炼自企业级中后台产品的交互语言和视觉风格。
  • 开箱即用的高质量 Angular 组件库,与 Angular 保持同步升级。
  • 使用 TypeScript 构建,提供完整的类型定义文件。
  • 支持 OnPush 模式,性能卓越。
  • 数十个国际化语言支持。
  • 深入每个细节的主题定制能力。

创建一个Angular项目:

angular环境配置参考:https://www.cnblogs.com/Can-daydayup/p/14166192.html

在创建项目之前,请确保 @angular/cli 已被成功安装。

执行以下命令,@angular/cli 会在当前目录下新建一个名称为 YyFlight-NG-ZORRO的文件夹,并自动安装好相应依赖。

ng new YyFlight-NG-ZORRO

自动完成 ng-zorro-antd 的初始化配置(推荐,简单快速):

进入新建的Angular项目目录(YyFlight-NG-ZORRO)中:

cd YyFlight-NG-ZORRO

初始化ng-zorro-antd配置:

注意:执行以下命令后将自动完成 ng-zorro-antd 的初始化配置,包括引入国际化文件,导入模块,引入样式文件等工作。

ng add ng-zorro-antd

【重要】设置项目的相关配置,并选择模板创建项目: 

Skipping installation: Package already installed? Enable icon dynamic loading(正在跳过安装:包已安装?启用图标动态加载):y

set up custom theme file(设置自定义主题文件):y

choose your locale code(选择区域设置代码):ZH-CN

choose template to create project(选择模板创建项目):sidemenu (页面菜单)

启动调试查看页面效果:

ng serve --port 0 --open

手动安装ng-zorro-antd:

安装组件:

npm install ng-zorro-antd --save

如果上面命令安装失败,可以试试下面的cnpm安装:

cnpm install ng-zorro-antd --save

引入样式:

在 angular.json 中引入:

{
  "styles": [
    "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
  ]
}

在 style.css 中引入css样式文件:

@import "~ng-zorro-antd/ng-zorro-antd.min.css";

在 style.less 中引入 less 样式文件:

@import "~ng-zorro-antd/ng-zorro-antd.less";

引入组件模块:

以下面的 NzButtonModule 模块为例,先引入组件模块:

import { NgModule } from '@angular/core';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { AppComponent } from './app.component';

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

然后在模板中使用:

<button nz-button nzType="primary">Primary</button>