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

                       

这篇文章介绍一下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 -v5.5.1[root@angular ~]# [root@angular ~]# node -vv9.1.0[root@angular ~]#
  
  
  

   
1
   
2
   
3
   
4
   
5
   
6
  

安装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.jsDownloading binary from https://github.com/sass/node-sass/releases/download/v4.6.1/linux-x64-59_binding.nodeDownload complete  ] - :Binary saved to /usr/local/npm/node/lib/node_modules/@angular/cli/node_modules/node-sass/vendor/linux-x64-59/binding.nodeCaching 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.jsBinary found at /usr/local/npm/node/lib/node_modules/@angular/cli/node_modules/node-sass/vendor/linux-x64-59/binding.nodeTesting binaryBinary is finenpm 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"})+