ng-alain 發佈正式版！

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 中間件等
• 重構及優化代碼