这个开源项目非常适合初学者学习或者进阶，它涵盖了绝大部分 Angular 技术知识点，但并不仅限于以下内容。
- 服务端渲染（SSR）
- 懒加载，Inject 依赖注入
- 路由守卫
- 请求拦截缓存
- 动态组件
- 动态表单
- 动态表格
- Material 多主题
- 自定义指令
- 自定义管道 pipe
- 自定义 icon
- 数据图表
- Rxjs
- Flex Layout 布局
- Storybook
- Typescript
- Provider
- 地图应用
作为建站者你可以体验到
**，时长01:37
CMS 只是一个数据管理中心的低代码平台，PC 端或者小程序端可以通过 API 访问后台数据。
- Drupal 是如何真正的实践前后端分离的
- JSONAPI 的应用
- View REST full 的应用
技术选型
- 前端：Angular + Material + FlexLayout
- 动态表单：ngx-formly
- web 动画：gsap
- 图表：Echarts
- 视频：Video.js
- 文件生成：jspdf 生成 pdf，html2canvas 生成图像，file-saver 下载文件，jszip 压缩文件
- 编辑器：quill, ang-jsoneditor
- 幻灯片：swiper
- 字体图标：material design icons + 自定义 svg icon
- 加密：crypto-js
- 工具函数：lodash-es
- 测试预览：storybook
- web 服务：Nginx
- 后端：Drupal (推荐)，通过 Drupal 的 views 视图可灵活配置动态组件、动态 api；
Web Builder 功能说明
1、Layout builder 动态布局：可以自定义栏数，栏数可增加多个，响应式配置
2、边栏可拖拽：直接从边栏选择组件放入内容区
3、选择示例页加载：加载示例页面到内容区
4、切换全宽：方便大屏编辑，减少干扰
5、内容区组件导航：边栏可通过导航查看组件，可上下拖动排序
6、智能生成页面：根据一定的规则从组件库中生成页面
7、多主题切换预览：预览在多主题下的组件显示情况
8、页面预览：调转到新窗口查看真实的页面
9、复制整个页面的 JSON：可直接复制 json，部署到后台发布
10、下载设计的页面：可保存当前页面截图到本地
11、组件编辑：文字图片即时更新、删除、复制 JSON、拖动上下排列
12、Builder：暗黑风格 支持切换浅色风格和暗黑风格，专注内容创作
13、响应式预览：可切换不同设备尺寸查看页面响应式排版
14、媒体库浏览：查看后台上传的媒体资源文件
15、页面历史版本：当提交、清空、加载示例等覆盖操作时新增历史版本
Layout Builder
动态构建 Flex 布局，可配置每栏的响应式配置，还有通用的样式配置，比如背景色、背景图。通过 Layout builder 可以构建无数种形态的复合组件。
弹窗的方式选择插入基组件
基组件也做了可视化的配置，比如 swiper 幻灯片
也可以 inline 的方式快速编辑文本
组件选择
鼠标经过组件会显示预览，可拖拽到编辑区
可以使用应用中静态媒体库或者切换到后台媒体库
响应式预览
历史版本
当提交、清空或者加载示例页等覆盖操作时生成历史版本，选择具体的版本再进行编辑提交。
其他组件
应用场景
框架除了可以构建静态组件之外，像列表页、搜索页、Dashboard 页面也是可以配置 API 获取数据。通过 Web builder 可以快速构建页面发布营销活动，适应市场的变化。示例站点使用 Web Builder 创建了十多个首页示例页面，可直接使用或者当做模板进行二次更新修改。
文档
项目使用 Storybook 来做组件的开发测试和文档更新，可查看：ui.zhaobg.com/
项目架构
大部分的逻辑都会往适应不同项目的方向考虑，很多使用了注入的方式，这样你可以根据自己的项目需要覆写业务的逻辑。
使用人群
- 前端开发：在 Storybook 中开发测试维护组件；
- 产品经理：快速构建和预览页面；
- 运维人员：构建页面和测试 UI
- 市场营销：给客户演示数字创新能力
