ng-alain是一個(gè)基于ng-zorro-antd的企業(yè)后臺(tái)腳手架，目標(biāo)也非常簡(jiǎn)單，希望在Angular上面開發(fā)企業(yè)后臺(tái)更簡(jiǎn)單、更快速。github地址是：cipchk/ng-alain。

一直以來對(duì)Ant Desig的理念非常喜歡，而一直出于工作的需要能夠運(yùn)用的機(jī)會(huì)本不多，直到 ng-zorro-antd 的出現(xiàn)，終于能夠在內(nèi)部真正實(shí)踐。而 ng-alain 雖然時(shí)間很短，但在群里很多朋友的支持下，讓其盡可能有一個(gè)比較可靠的實(shí)施。據(jù)我所知包括我們公司自己在內(nèi)，已經(jīng)有好幾個(gè)企業(yè)開始轉(zhuǎn)移至該腳手架上面來。

你可以非常簡(jiǎn)單的從 github 克隆一份最新代碼，然后立即進(jìn)入業(yè)務(wù)開發(fā)。

git clone --depth 1 https://github.com/cipchk/ng-alain.git

結(jié)構(gòu)

ng-alain 實(shí)際是一個(gè)標(biāo)準(zhǔn)的 Angular Cli 構(gòu)建的項(xiàng)目，因此對(duì)她就像是你前女友一樣，一定不會(huì)感到陌生。

在此基礎(chǔ)上，我將公共業(yè)務(wù)組件放在 shared/components 下面，且目前已經(jīng)包括圖表相關(guān)有幾十個(gè)組件服務(wù)于企業(yè)后臺(tái)常見業(yè)務(wù)服務(wù)型組件。

我們?cè)谔幚頃r(shí)間、貨幣上面頻繁極高，而提供一種非常簡(jiǎn)潔的這類數(shù)據(jù)渲染極重要。例如：{{ time | date }} 期望結(jié)果應(yīng)該：2017-11-19 04:25；而 {{ price | currenty }} 期望的結(jié)果應(yīng)該是：￥303,634.13 的時(shí)候，只需要這樣：{{ time | _date }}。沒錯(cuò)在 Angular 內(nèi)置的管道里，我增加了以下劃線開頭的新管道來處理這類渲染。

以上我盡量保持一種簡(jiǎn)潔而又有效的方式，我想這也是 Ant Design 理念之一。

樣式風(fēng)格

ng-alain 有自己的一套樣式風(fēng)格定義，但這些定義都是基于 Ant Desig 設(shè)計(jì)理念；例如，兩個(gè)橫向按鈕之間以 Ant Desig 的一種標(biāo)準(zhǔn)應(yīng)該有 8px 的間距，一般我們會(huì)這樣：

<button nz-button style="margin-right: 8px">A</button>
<button nz-button>B</button>

而對(duì)于 ng-alain 來說，應(yīng)該是這樣：

<button nz-button class="mr-sm">A</button>
<button nz-button>B</button>

假如你是在一個(gè)表單里出現(xiàn)時(shí)，你連 class 都可以省略。

而 ng-alain 默認(rèn)設(shè)置了 preserveWhitespaces: false 因此你會(huì)發(fā)現(xiàn)倆倆之間真的只有 8px。

Ant Design PRO

它是 React 發(fā)布不久的一個(gè)腳手架真的非常棒，沒幾天其 Star 就直接蓋了 ng-zorro-antd 有點(diǎn)心疼 ng-zorro-antd 哈。

當(dāng)然 React 能做的，Angular 自然也能做，因此 ng-alain 也實(shí)現(xiàn)了一套 And Design Pro，原本我打算加一個(gè)完全一樣的 LayoutComponet。然，我發(fā)現(xiàn) pro 的風(fēng)格與ng-alain真的不謀而合，將 pro 內(nèi)容區(qū)域在 ng-alain 中形成一種很好的契合，文章開頭的圖片就是來自 Pro 在 ng-alain 實(shí)現(xiàn)的分析頁。

Pro 頁面并不多，但涵蓋面很廣，ng-alain 除了用戶頁以外其他頁面都已經(jīng)實(shí)現(xiàn)完畢。

ng-zorro-antd-extra 番外篇

維護(hù) ng-zorro-antd 的阿里團(tuán)隊(duì)的確有點(diǎn)小慢，特別是在 Ant Design 馬上要 3.0，而當(dāng)前 ng-zorro-antd 還有很多值得優(yōu)化以及一些部分核心組件還未上線，而別說 3.0 的計(jì)劃。因此ng-zorro-antd-extra是我自己維護(hù)一個(gè)基于 Ant Design 3.0 版本下實(shí)現(xiàn)部分非常急需的組件。

在組件接口上我保持 ng-zorro-antd 的風(fēng)格，我會(huì)在未來提交 PR 至 ng-zorro-and。

千言萬語

我要表達(dá)的話還非常多，只是為了一個(gè)記錄正式版文章中并不適合討論太多?；蛟S你可以點(diǎn)開DEMO體驗(yàn)一下。

其中一些我認(rèn)為值得注意的話已經(jīng)整合在項(xiàng)目的 _document 下面。

未來

ng-alain 會(huì)作為我一個(gè)非常重要的開源項(xiàng)目持續(xù)更新，當(dāng)然這一切的來源都是基于 ng-zorro-antd 的基礎(chǔ)，但若你一樣喜歡 Angular 以及 Ant Design 的理念，那為何不好好看一下 ng-alain，多多少少你能帶走點(diǎn)什么。

未來我重點(diǎn)工作會(huì)在：

• 提供更豐富業(yè)務(wù)組件庫(kù)
• 跟進(jìn) angular、ng-zorro-antd、Ant Design Pro
• 工具上的支持，包括：vscode snippets、Angular Cli 中間件等
• 重構(gòu)及優(yōu)化代碼