NG-ZORRO(Ant Design + Angular) 1.0 版本发布

10个月之前我们发布了 NG-ZORRO 的第一个版本,在这 10个月的时间里,我们接收了超过 35 个 contributor386 次 Commit

在经过了 35 个版本 的迭代之后,1.0 版本在今天正式发布 🎉

1.0 版本基于最新的 Angular ^6.0.0 与 RxJS ^6.0.0 构建,与 @angular/cli 进行了深度整合,完善了文档系统,降低了上手难度,同步了最新的设计规范。除此之外,我们完成了与 Ant Design 所有组件(共51个)的完全同步工作,并对之前的部分组件进行了重构。

最重要的是,这些工作相对于上一个版本(0.7.1)没有引入任何破坏性更新,这意味着所有你需要做的只是要升级目前项目的 Angular 版本到 6.0。

注:升级到最新的 Angular 6 版本只需要很少的工作就可以完成,具体的步骤可以参考官方的 升级指南,也可以参考卡色的 ng-zorro-antd 升级 Angular6 指引

快速上手

NG-ZORRO 在 1.0 版本上完整支持了 Schematics,现在只需要在新建的 angular 项目中执行以下命令就可以快速完成全部配置。

ng add ng-zorro-antd

自定义主题和设定国际化语言也可以通过在初始化时增加 --theme--i18n 的选项来完成。

除了初始化项目以外,1.0 版本还支持代码快速生成,在项目中执行以下命令就可以快速生成一个登录框组件。

ng g ng-zorro-antd:form-normal-login -p app --styleext='less' --name=login


更多的配置信息可以在 文档 中进行查看。

我们准备了部分项目实战来帮助你入门 ng-zorro-antd 和 Angular,后续会在 知乎专栏 中逐步放出,欢迎关注。

设计体系

在 1.0 版本我们使用了 bot 与 Ant Design 设计体系进行版本同步,保证了 Ant Design 的海量设计物料的完全可用。

这意味着无论是使用 Ant Design Libraray 还是 Ant UX 设计的页面,都可以使用 ng-zorro-antd 完美的进行还原。

除此之外,我们在 1.0 版本中增加了css的样式文件的输出, 完善了自定义主题的方式,现在无论你想使用哪一种 css 预处理器,ng-zorro-antd 的样式自定义文件都可以与之兼容。


代码重构

1.0 版本在对代码重构的同时保证了对上个版本的完全兼容

Tooltip、Popover、PopConfirm等组件在1.0版本中推荐使用 Directive 方式,原有的方式虽然不推荐,但是仍然可以继续使用。另外,借助于 Angular 6.0的新特性,forRoot将不再必要,在任何 module 都可以直接引入 NgZorroAntdModule,当然原有的forRoot的方式也会继续兼容。

此外,ng-zorro-antd 的所有第三方依赖(除去 @angular 包之外只有 date-fns)都支持 Tree Shaking,这意味着用户只需放心导入 NgZorroAntdModule ,未使用的组件在打包后将会被自动裁剪。

引入 ng-zorro-antd 全部 module 后的 Hello World 程序 gzip之后整个项目仅有 131.18 KB

代码质量

我们在 1.0 版本中增强了对质量的把控ng-zorro-antd 的测试用例进一步增加到 1115 个,整体的测试覆盖率提高到了 95% 以上。

除了单元测试以外,目前运行在我们的持续集成上的还有 webpackrollup@angular/cli 三套环境,这意味着无论你自己构建环境还是使用官方的开发套件都可以得到更好的质量保障。

所有持续集成的运行结果都可以随时在 Travis CI 进行查看。

在线文档

在 1.0 版本的在线文档中,我们增加了每个组件的类型信息,并为全部的可用API更清晰的标明了属性。每个代码示例展开后都可以在 stackblitz 上直接快速编辑。另外目前的文档系统完全由markdown生成,大家可以通过点击文档中的编辑按钮快速提出对文档的修改建议。


写在最后

目前 ng-zorro-antd 已经有来自超过 50 个国家每月 2w 以上的活跃用户,感谢所有用户对我们的信任,我们一直致力于提供给 Angular 开发者提供愉悦的开发体验。


为了更好的支持使用 ng-zorro-antd 的用户,我们准备了用户自助服务群

qr.dingtalk.com/action/ (二维码自动识别)

在官网中开启 Chrome DevTools 可以看到钉钉群加入方式

最后感谢所有的 contributor,感谢大家。

链接

仓库地址:NG-ZORRO/ng-zorro-antd
官方网站:Ant Design Of Angular
国内镜像:Ant Design Of Angular
设计规范:Ant Design Design Language
基于 ng-zorro-antd 中后台前端解决方案:Ng Alain
vscode 拓展: ng-zorro-antd snippets
编辑于 2018-06-11

文章被以下专栏收录