Angular 4入门教程系列：15：NG-ZORRO的使用方式

最新推荐文章于 2024-08-12 09:02:03 发布

淼叔

最新推荐文章于 2024-08-12 09:02:03 发布

阅读量3.3w

点赞数 4

分类专栏： # 前端 # Angular快速入门文章标签： angular ng-zorro ant-design

本文链接：https://blog.csdn.net/liumiaocn/article/details/78526421

版权

本文详述了Angular UI组件库NG-ZORRO的起源、优势及如何将其集成到项目中。从事前准备，如安装Node、Angular CLI和Typescript，到创建CLI项目骨架，然后逐步指导如何安装并配置NG-ZORRO，修改HTML模板，最后确认集成效果。NG-ZORRO以其丰富的组件、与ant design的结合、快速迭代和美观界面等特性，成为开发者友好的选择。

摘要由CSDN通过智能技术生成

这篇文章介绍一下Angular的优秀国内UI组件库NG-ZORRO，并演示一下如何使引入NG-ZORRO到项目之中。

Why NG-ZORRO

NG-ZORRO由阿里计算平台事业部、阿里云等不同部门的开发人员在原业务组件的基础上构建而成，于2017/8/15在github上发布了第一个对外的版本0.5.0-rc.0，版本更新很快，三个月已经接近有12次更新之多，基本周发布的快速迭代，目前最新版本为0.6.0-rc.3。使用NG-ZORRO有很多原因，比如

组件类型丰富
生态可以结合ant-design
结合阿里在自己项目中的经验
版本更新迭代很快
界面漂亮一些
E文不好的开发者的福音
……

NG-ZORRO网址

详细信息：https://ng.ant.design/#/docs/angular/introduce
github地址：https://github.com/NG-ZORRO/ng-zorro-antd
ant desgin: https://ant.design/index-cn

事前准备

安装node

详细可以参照：http://blog.csdn.net/liumiaocn/article/details/78510679

[root@angular ~]# npm -v
5.5.1
[root@angular ~]# 
[root@angular ~]# node -v
v9.1.0
[root@angular ~]#

安装angular-cli

安装命令：npm install -g @angular/cli –unsafe-perm

[root@angular ~]# npm install -g @angular/cli --unsafe-perm
/usr/local/npm/node/bin/ng -> /usr/local/npm/node/lib/node_modules/@angular/cli/bin/ng

> node-sass@4.6.1 install /usr/local/npm/node/lib/node_modules/@angular/cli/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.6.1/linux-x64-59_binding.node
Download complete  ] - :
Binary saved to /usr/local/npm/node/lib/node_modules/@angular/cli/node_modules/node-sass/vendor/linux-x64-59/binding.node
Caching binary to /root/.npm/node-sass/4.6.1/linux-x64-59_binding.node

> node-sass@4.6.1 postinstall /usr/local/npm/node/lib/node_modules/@angular/cli/node_modules/node-sass
> node scripts/build.js

Binary found at /usr/local/npm/node/lib/node_modules/@angular/cli/node_modules/node-sass/vendor/linux-x64-59/binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/@angular/cli/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {
  "os":"darwin","arch":"any"} (current: {
  "os":"linux","arch":"x64"})

+