ng-alain 是一個企業級中後臺前端/設計解決方案腳手架，我們秉承 Ant Design 的設計價值觀，目標也非常簡單，希望在Angular上面開發企業後臺更簡單、更快速。隨著『設計者』的不斷反饋，將持續迭代，逐步沉澱和總結出更多設計模式和相應的程式碼實現，闡述中後臺產品模板/元件/業務場景的最佳實踐，也十分期待你的參與和共建。
如何閱讀文件
在開始之前有一些文件描述約定說明，這有助於更好的閱讀：
API相關
[] 表示屬性
() 表示事件
[()] 表示雙向繫結
ng-content 表示元件內容佔位符
tpl 開頭表示 〈ng-template #tpl〉
前序準備#
你的本地環境需要安裝 node 和 git。我們的技術棧基於 Typescript、Angular、g2、@delon 和 ng-zorro-antd，提前瞭解和學習這些知識會非常有幫助。
安裝#
ng new demo –style less
cd demo
ng add ng-alain@next
ng serve
請參考命令列工具瞭解更多細節。
目錄結構#
ng-alain 是一個標準的 Angular CLI 構建的專案，並提供了涵蓋中後臺開發的各類功能和坑位，下面是整個專案的目錄結構。
├── _mock # Mock 資料規則
├── src
│ ├── app
│ │ ├── core # 核心模組
│ │ │ ├── i18n
│ │ │ ├── net
│ │ │ │ └── default.interceptor.ts # 預設HTTP攔截器
│ │ │ ├── services
│ │ │ │ └── startup.service.ts # 初始化專案配置
│ │ │ └── core.module.ts # 核心模組檔案
│ │ ├── layout # 通用佈局
│ │ ├── routes
│ │ │ ├── ** # 業務目錄
│ │ │ ├── routes.module.ts # 業務路由模組
│ │ │ └── routes-routing.module.ts # 業務路由註冊口
│ │ ├── shared # 共享模組
│ │ │ └── shared.module.ts # 共享模組檔案
│ │ ├── app.component.ts # 根元件
│ │ └── app.module.ts # 根模組
│ │ └── delon.module.ts # @delon模組匯入
│ ├── assets # 本地靜態資源
│ ├── environments # 環境變數配置
│ ├── styles # 樣式目錄
└── └── style.less # 樣式引匯入口
本地開發#
安裝依賴。
$ yarn
遇到問題請閱讀 常見問題
$ ng serve
啟動完成後會開啟瀏覽器訪問 //localhost:4200，若你看到如下頁面則代表成功了。
專案地址：https://github.com/ng-alain/ng-alain
原文地址：https://www.f2ecoder.net/848.html