信使 UI,一款非常適合入門學習進階的Angular 前端開源框架
信使 UI
框架是基于 Material 的 Angular 前端框架， 豐富的組件庫可提供優(yōu)秀的數(shù)字創(chuàng)新體驗，使用 Web Builder 可以通過拖拽快速構建響應式、多主題的 Web 頁面。詳見介紹：https://www.zhaobg.com
奧陌陌是已知的第一顆經過太陽系的星際天體，意為"遠方信使"。
開源
這個項目是在學習 Angular 過程中不斷積累、思考完善的成果，從最初的 Angular 9 到目前的 Angular 11，從一開始的一個組件到豐富的組件庫，從臃腫的頁面組件遍歷方式到動態(tài)組件，經歷了很多次推倒和重構、升級。這個開源項目非常適合初學者學習或者進階，它涵蓋了絕大部分 Angular 技術知識點，但并不僅限于以下內容:
- 服務端渲染（SSR）
- 懶加載，Inject 依賴注入
- 路由守衛(wèi)
- 請求攔截緩存
- 動態(tài)組件
- 動態(tài)表單
- 動態(tài)表格
- 多主題
- 自定義指令
- 自定義管道 pipe
- 自定義 icon
- Chart 數(shù)據(jù)圖表
- Rxjs, Observable
- flex layout
- Storybook（查看之前發(fā)布關于storybook應用的文章）
- Typescript
- Provider
- 地圖應用
技術選型
- 前端：Angular + Material + FlexLayout
- 動態(tài)表單：ngx-formly
- web 動畫：gsap
- 圖表：Echarts
- 視頻：Video.js
- 文件生成：jspdf 生成 pdf，html2canvas 生成圖像
- 編輯器：quill, ang-jsoneditor
- 幻燈片：swiper
- 字體圖標：material design icons + 自定義 svg icon
- 加密：crypto-js
- 工具函數(shù)：lodash-es
- 測試預覽：storybook
Web Builder
| 功能點 | 說明 |
|---|---|
| 邊欄可拖拽 | 直接從邊欄選擇組件放入內容區(qū) |
| 選擇示例頁加載 | 加載示例頁面到內容區(qū) |
| 切換全寬 | 方便大屏編輯，減少干擾 |
| 內容區(qū)組件導航 | 邊欄可通過導航查看組件，可上下拖動排序 |
| 智能生成頁面 | 根據(jù)一定的規(guī)則從組件庫中生成頁面 |
| 多主題切換預覽 | 預覽在多主題下的組件顯示情況 |
| 頁面預覽 | 調轉到新窗口查看真實的頁面 |
| 復制整個頁面的JSON | 可直接復制json，部署到后臺發(fā)布 |
| 下載設計的頁面 | 可保存當前頁面截圖到本地 |
| 組件編輯 | 刪除、復制JSON、編輯組件數(shù)據(jù)、拖動上下排列 |
應用場景
框架除了可以構建靜態(tài)組件之外，像列表頁、搜索頁、Dashboard頁面也是可以配置API獲取數(shù)據(jù)。在銀行業(yè)或者頻繁需要發(fā)布營銷著陸頁的公司集團，可以快速發(fā)布營銷活動，適應市場的變化。我們使用 Web Builder 創(chuàng)建了十多個Home示例頁面，可以查看：https://www.zhaobg.com/builder
使用人群：Angular?群：1176468251
-?前端開發(fā)：在 Storybook 中開發(fā)測試組件；
-?產品經理：快速構建和預覽頁面；
-?運維人員：構建頁面和測試 UI
-?市場營銷：給客戶演示數(shù)字創(chuàng)新能力
開源地址：https://github.com/biaogebusy/xinshi-ui
評論
圖片
表情