信使 UI,一款非常适合入门学习进阶的Angular 前端开源框架
信使
共 2189字，需浏览 5分钟
·
2023-07-19 17:41
信使 UI
框架是基于 Material 的 Angular 前端框架， 丰富的组件库可提供优秀的数字创新体验，使用 Web Builder 可以通过拖拽快速构建响应式、多主题的 Web 页面。详见介绍：https://www.zhaobg.com
奥陌陌是已知的第一颗经过太阳系的星际天体，意为"远方信使"。
开源
这个项目是在学习 Angular 过程中不断积累、思考完善的成果，从最初的 Angular 9 到目前的 Angular 11，从一开始的一个组件到丰富的组件库，从臃肿的页面组件遍历方式到动态组件，经历了很多次推倒和重构、升级。这个开源项目非常适合初学者学习或者进阶，它涵盖了绝大部分 Angular 技术知识点，但并不仅限于以下内容:
- 服务端渲染（SSR）
- 懒加载，Inject 依赖注入
- 路由守卫
- 请求拦截缓存
- 动态组件
- 动态表单
- 动态表格
- 多主题
- 自定义指令
- 自定义管道 pipe
- 自定义 icon
- Chart 数据图表
- Rxjs, Observable
- flex layout
- Storybook（查看之前发布关于storybook应用的文章）
- Typescript
- Provider
- 地图应用
技术选型
- 前端：Angular + Material + FlexLayout
- 动态表单：ngx-formly
- web 动画：gsap
- 图表：Echarts
- 视频：Video.js
- 文件生成：jspdf 生成 pdf，html2canvas 生成图像
- 编辑器：quill, ang-jsoneditor
- 幻灯片：swiper
- 字体图标：material design icons + 自定义 svg icon
- 加密：crypto-js
- 工具函数：lodash-es
- 测试预览：storybook
Web Builder
| 功能点 | 说明 |
|---|---|
| 边栏可拖拽 | 直接从边栏选择组件放入内容区 |
| 选择示例页加载 | 加载示例页面到内容区 |
| 切换全宽 | 方便大屏编辑，减少干扰 |
| 内容区组件导航 | 边栏可通过导航查看组件，可上下拖动排序 |
| 智能生成页面 | 根据一定的规则从组件库中生成页面 |
| 多主题切换预览 | 预览在多主题下的组件显示情况 |
| 页面预览 | 调转到新窗口查看真实的页面 |
| 复制整个页面的JSON | 可直接复制json，部署到后台发布 |
| 下载设计的页面 | 可保存当前页面截图到本地 |
| 组件编辑 | 删除、复制JSON、编辑组件数据、拖动上下排列 |
应用场景
框架除了可以构建静态组件之外，像列表页、搜索页、Dashboard页面也是可以配置API获取数据。在银行业或者频繁需要发布营销着陆页的公司集团，可以快速发布营销活动，适应市场的变化。我们使用 Web Builder 创建了十多个Home示例页面，可以查看：https://www.zhaobg.com/builder
使用人群：Angular 群：1176468251
- 前端开发：在 Storybook 中开发测试组件；
- 产品经理：快速构建和预览页面；
- 运维人员：构建页面和测试 UI
- 市场营销：给客户演示数字创新能力
开源地址：https://github.com/biaogebusy/xinshi-ui
评论