索鸟网

  1. 首页
  2. ng-zorro-antd 初体验

ng-zorro-antd 初体验


Angular版本的 Ant Design 总算发布了,其名曰:ng-zorro-antd

这人要是越期待,心就越着急。早在8月上旬我就开发好了 ng-zorro-vscode;一个在vscode下的snippets。因此,虽然那时未能探到源代码,但从官网的SDK中,就已经对 ng-zorro-antd 有一定全面性了解。

下面将基于我的理解,从宏观角度解析一下,或许能帮助你更好的去使用 ng-zorro-antd。

再次说一下,ng-zorro-antd 真的是非常有良心的作品。

一、安装

ng-zorro-antd 本身只是一个antd组件Angular实现的合集,因此,如果你希望基于 ng-zorro-antd 开发依然需要先安装 Angular Cli。

1、创建项目

# 安装全局,这样允许直接在CMD命令行中使用 `ng` 命令。
npm install -g @angular/cli@latest

# 创建项目
ng new demo

# 安装包
npm install --save ng-zorro-antd

2、导入模块

我建议在 SharedModuel 中导入模块。

@NgModule({
    imports: [
        NgZorroAntdModule.forRoot()
    ],
    exports: [
        NgZorroAntdModule
    ]
});

3、根组件

务必要引入 nz-root 根组件;有且只需引用一次。部分组件需要依赖 nz-root 所以最佳位置放在根组件内,比如 ./src/app.component.html

<nz-root>
    <router-outlet></router-outlet>
</nz-root>

至此,你可以放心在任何页面中使用 ng-zorro-antd 组件。

二、最佳实践

已经实现了绝大多数的 React 版本的组件;虽然今天刚发布,但是已经在阿里内部已经在使用了。

1、命名

ng-zorro-antd 在命名方面还是很讲究的,而且有几个特点:

  • 所有组件、指令都是以 nz- 开头(例:ng-button)。
  • 所有组件、指令属性都是 nz 开头,紧跟大驼峰式命名法(例:[nzSize])。

2、栅格

antd 是以 24 等分的栅格来划分区域,这一点可能跟经常使用 bootstrap 的人会有一点不习惯。

<div nz-row>
    <div nz-col [nzSpan]="12"></div>
    <div nz-col [nzSpan]="12"></div>
</div>

一个 nz-row 内的 nz-col 总格数([nzSpan] 总和)为24表示一行,如果超过会自动换行。

当然,也支持类似 bootstrap 的响应式设计,内置了几种不同的响应。

Size  ng-zorro-antd bootstrap
auto  [nzXs] .col-xs-
540px  [nzSm] .col-sm-
720px  [nzMd] .col-md-
960px  [nzLg] .col-lg-
1140px  [nzXl] .col-xl-

如果你喜欢 flex 布局,需要手动开启:

<div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'top'">
    <div nz-col [nzSpan]="12"></div>
    <div nz-col [nzSpan]="12"></div>
</div>

3、样式

无须再额外的引用外部任何 antd 的样式,因为 ng-zorro-antd 是以 encapsulation: ViewEncapsulation.None 不隔离的方式封装样式,可以直接在任何地方运用到这些样式。

比如:

<div class="ant-row">
    <div class="ant-col-12">col-12</div>
    <div class="ant-col-12">col-12</div>
</div>

4、时间处理

Angular 默认的时间处理简直就是一个痛,而 ng-zorro-antd 依赖了 moment,因此在处理时间格式上,正确的姿势应该是:

_value | nzDate: 'YYYY-MM-DD ddd'
Outpu: 2017-08-15 周二

5、货币

也是Angular痛点,ng-zorro-antd 并无提供相应Pipe,应该后续会有!

三、工欲善其事,必先利其器

如果你在 vscode 中编写Angular,那么安装 ng-zorro-vscode 代码片断,对开发效率很有帮助。

四、结论

ng-zorro-antd 对Angular应该会有一个非常大的推动。

当前组件与React组件还有几个比较重要的组件未完成,比如:autocomplateCascader 一些很常用的组件。希望有更多大牛加入贡献行列,让 ng-zorro-antd 社区环境更丰富。

Happy Coding!

angular4 ng-zorro typescript antd antdesign

来源地址:https://segmentfault.com/a/1190000010681069 版权归作者所有!

相关教程

  • DATAV初体验

    最近试了练习了阿里的DataV,觉得这个东西挺好的,就试着画了几张图,先留个坑,回头把坑补上。上图! 嘿嘿,自我感觉还挺有意思的,回头再详述。
  • 2017-08-16 前端日报

    2017-08-16 前端日报 精选 理解 JavaScript 的 async/awaitJavaScript专题之偏函数[译]理解 Node.js 事件驱动机制PokemonGo:LBS游戏开发前端面试中的常见的算法问题Canary DevTools Update: top-level await is now supportednodejs 8.4
  • Webhooks初体验

    Rancher 1.4已于上周全面发布!新版本带来了Dashboard和Helm的集成,更细致的网络策略控制,直接构建进平台中的保密管理,当然还有今天要重点介绍的主角,Webhooks!Rancher 1.4版本为webhooks添加了一个新特性,赋予其一个能够处理弹性伸缩的初始驱动程序。实现webhooks的一个关键概念就是“Receiver(接收器)”,它可以让你注册一个we
  • 正则初体验

    正则 正则是什么? 正则表达式,又称规则表达式。(英语:Regular Expression,在代码中常简写为regex、regexp或RE),计算机科学的一个概念。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。 在学习正则前,我们先复习一下字符串 indexOf() 从左到右索引substring(x,y) 从第x个到第y个查找substr
  • rollup 初体验

    本文同步自我的博客 JoeRay61 简介 rollup 是 JavaScript 模块打包工具,能够将多个具有引用依赖关系的脚本文件打包成一个文件,并且能够做到只引入使用到的代码,如果使用 ES6 的模块系统的话。举个简单的栗子: // foo.js export let a = "hello world!"; export let b = "hell
  • Spring Boot初体验

    Spring Boot初体验 目的 本文Spring Boot基础项目的构建,并且实现一个简单的Http请求处理,通过这个例子对Spring Boot有一个初步的了解,并体验其结构简单、开发快速的特性。 (一)利用 IntelliJ IDEA 快速构建Spring boot项目 1、新建项目,选中Spring Initializr 选项 2、填写项目需要的信息 3
  • JavaScript:正则表达式初体验

    挥动正则表达式之剑,斩尽各种复杂的匹配问题。 @mystylecat 资源 书籍 正则表达式是编程语言中的一大利器,它能够大幅提高开发效率。这正是我们需要学习正则表达式的原因。首先,提供两本参考书 1.《精通正则表达式》 2.《正则表达式经典实例》 学习视频 如果觉得看书太难,没关系,先来个入门级的课程,尝尝鲜儿吧--慕课网JavaScri
  • Xposed开发初体验

    本篇文章具体是Xposed开发,如何安装Xposed需自行上网查找,本文同步更新于旺仔的个人博客,访问可能有点慢,多刷新几次。 Xposed 什么是Xposed呢? “Xposed是一个适用于Android的框架。基于这个框架开发的模块可以改变系统和app应用的行为,而不需要修改APK。这是一个很棒的特性,意味着Xposed模块可以不经过任何修