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