ng alain 是一個企業級中後臺前端/設計解決方案腳手架，我們秉承 Ant Design 的設計價值觀，目標也非常簡單，希望在Angular上面開發企業後臺更簡單、更快速。隨著『設計者』的不斷反饋，將持續迭代，逐步沉澱和總結出更多設計模式和相應的代碼實現，闡述中後臺產品模板/組件/業務場景的最佳 ...
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
