ng-alain是一個基於ng-zorro-antd的企業後臺腳手架，目標也非常簡單，希望在Angular上面開發企業後臺更簡單、更快速。github地址是：cipchk/ng-alain。
一直以來對Ant Desig的理念非常喜歡，而一直出於工作的需要能夠運用的機會本不多，直到 ng-zorro-antd 的出現，終於能夠在內部真正實踐。而 ng-alain 雖然時間很短，但在羣裏很多朋友的支持下，讓其儘可能有一個比較可靠的實施。據我所知包括我們公司自己在內，已經有好幾個企業開始轉移至該腳手架上面來。
你可以非常簡單的從 github 克隆一份最新代碼，然後立即進入業務開發。
git clone --depth 1 https://github.com/cipchk/ng-alain.git
結構
ng-alain 實際是一個標準的 Angular Cli 構建的項目，因此對她就像是你前女友一樣，一定不會感到陌生。
在此基礎上，我將公共業務組件放在 shared/components 下面，且目前已經包括圖表相關有幾十個組件服務於企業後臺常見業務服務型組件。
我們在處理時間、貨幣上面頻繁極高，而提供一種非常簡潔的這類數據渲染極重要。例如：{{ time | date }} 期望結果應該：2017-11-19 04:25；而 {{ price | currenty }} 期望的結果應該是：￥303,634.13 的時候，只需要這樣：{{ time | _date }}。沒錯在 Angular 內置的管道里，我增加了以下劃線開頭的新管道來處理這類渲染。
以上我儘量保持一種簡潔而又有效的方式，我想這也是 Ant Design 理念之一。
樣式風格
ng-alain 有自己的一套樣式風格定義，但這些定義都是基於 Ant Desig 設計理念；例如，兩個橫向按鈕之間以 Ant Desig 的一種標準應該有 8px 的間距，一般我們會這樣：
<button nz-button style="margin-right: 8px">A</button>
<button nz-button>B</button>
而對於 ng-alain 來說，應該是這樣：
<button nz-button class="mr-sm">A</button>
<button nz-button>B</button>
假如你是在一個表單裏出現時，你連 class 都可以省略。
而 ng-alain 默認設置了 preserveWhitespaces: false 因此你會發現倆倆之間真的只有 8px。
Ant Design PRO
它是 React 發佈不久的一個腳手架真的非常棒，沒幾天其 Star 就直接蓋了 ng-zorro-antd 有點心疼 ng-zorro-antd 哈。
當然 React 能做的，Angular 自然也能做，因此 ng-alain 也實現了一套 And Design Pro，原本我打算加一個完全一樣的 LayoutComponet。然，我發現 pro 的風格與ng-alain真的不謀而合，將 pro 內容區域在 ng-alain 中形成一種很好的契合，文章開頭的圖片就是來自 Pro 在 ng-alain 實現的分析頁。
Pro 頁面並不多，但涵蓋面很廣，ng-alain 除了用戶頁以外其他頁面都已經實現完畢。
ng-zorro-antd-extra 番外篇
維護 ng-zorro-antd 的阿里團隊的確有點小慢，特別是在 Ant Design 馬上要 3.0，而當前 ng-zorro-antd 還有很多值得優化以及一些部分核心組件還未上線，而別說 3.0 的計劃。因此ng-zorro-antd-extra是我自己維護一個基於 Ant Design 3.0 版本下實現部分非常急需的組件。
在組件接口上我保持 ng-zorro-antd 的風格，我會在未來提交 PR 至 ng-zorro-and。
千言萬語
我要表達的話還非常多，只是爲了一個記錄正式版文章中並不適合討論太多。或許你可以點開DEMO體驗一下。
其中一些我認爲值得注意的話已經整合在項目的 _document 下面。
未來
ng-alain 會作爲我一個非常重要的開源項目持續更新，當然這一切的來源都是基於 ng-zorro-antd 的基礎，但若你一樣喜歡 Angular 以及 Ant Design 的理念，那爲何不好好看一下 ng-alain，多多少少你能帶走點什麼。
未來我重點工作會在：
- 提供更豐富業務組件庫
- 跟進 angular、ng-zorro-antd、Ant Design Pro
- 工具上的支持，包括：vscode snippets、Angular Cli 中間件等
- 重構及優化代碼