信使 UI,一款非常适合入门学习进阶的Angular 前端开源框架
信使 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
评论