从计划2.0开始足足进行近四个月,其中发布过八个版本。当初给2.0做的愿景基本上达到要求,当然一切都还是那句话:【让开发者更加专注于业务】。
ng-zorro-antd 提供的大量的基础组件,当你熟悉这些组件以后,开发 Angular 会是一种“爽”体验,然而对于中后台而言部分高频繁组件在大多数场景下显得有点臃肿。
所以 2.0 变更主要从两个方面:
- 使 CURD 操作更“自然”开发体验
- 更友好响应式开发
CURD
提供一组 Simple 系列组件:
- sv:查看
- se:编辑
- st:数据表格(原
simple-table
重新重构)
以及基于 JSON Schema 的动态表单 sf
,这四个 Simple 系列组件相比较 ng-zorro-antd 的原始写法,更易编写、阅读,基本上可以满足大多数场景;但它们并非用来替代原始的写法,特别是 st
与 sf
它们并不适合复杂交互,此时,依然应该优先使用原始方式。
除此之外,2.0 对部分输入属性及接口的多态性、内聚性做一些变更。
属性多态性
当构建一个数据表格时,表格的数据源可能来自远程数据或本地静态数据,但我们不应该过度的将数据源做成两个不同属性加以区分,他们只是不同的数据来源而已,但对于表格而言是统一:
<table [data]="url"></table>
<table [data]="list"></table>
属性内聚性
同一个功能的属性应该更内聚,例如我们表述一个HTTP请求时,包含:请求方法、请求域、参数等,这些属性应该统一在一个对象值体现,HttpClient
请求就是一个非常好的例子。
<st [reqMethod]="'GET'" [reqParams]="{ a: 1 }"></st>
<st [req]="{ method: 'get', params: { a: 1 } }"></st>
响应式开发
意指开发过程中如何使用最小的方式构建符合移动端的中后台,ng-alain 默认提供一套 响应式服务 规则,它服务于最基础的CURD组件:se
、sv
等。例如:当你希望构建一行两列的表单,并且若屏幕小于 <576px
将自动转化成一列,则只需要这样:
<div se-container="2">
<se label="Field1"></se>
<se label="Field2"></se>
</div>
当然这一切只是简化 nz-row
、nz-col
的运用而已,如果你希望布局也延续这种方式可以使用 sg 组件。
除此之外,ng-alain 也将 CSS 做为开发语言非常重要的组成部分,并且将这些语言特征转化成独立的单元类,如果你是采用 VSCODE 可借由 ng-alain snippets 提供的智能提醒,减少理解它们的成本。
升级
Angular Cli 提供的 ng update
命令让我们可以大胆重构、改进你的组件,并且用户升级只需要简单的一行命令就可以完全升级。
从 1.x 升级至 2.x 虽然无法改变 ts 代码方面的动作,但基本上可以完成 HTML 方面的升级,主要还是 ts 代码的解析无法像 HTML 那样预期。
而 ng-alain 的 1.x 升至 2.0 也只需要一行命令而已,有关更多细节,请参考升级指引。
未来
直到 ng-zorro-antd 下一大版本更新之前,2.0 保持一段时间的休息期,不再会有新功能。之后,会根据 ng-zorro-antd 的进度,对 ng-alain 做一次大的性能重构。
新尝试
ng-alain 正在尝试提供商业主题服务,有兴趣可以参阅。
(完)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。