首页 文章详情

信使 UI,一款非常适合入门学习进阶的Angular 前端开源框架

信使 | 28 2023-07-19 17:41 0 0 0
UniSMS (合一短信)
信使 UI

框架是基于 Material 的 Angular 前端框架, 丰富的组件库可提供优秀的数字创新体验,使用 Web Builder 可以通过拖拽快速构建响应式、多主题的 Web 页面。详见介绍:https://www.zhaobg.com

c1bdbc4e62df080c13c6251b4a452f2e.webp

奥陌陌是已知的第一颗经过太阳系的星际天体,意为"远方信使"。

开源

这个项目是在学习 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


good-icon 0
favorite-icon 0
收藏
回复数量: 0
    暂无评论~~
    Ctrl+Enter