SmartAdmin 支持十幾種語言風(fēng)格，我這里選中的是 AngularJS 。

    我們選擇的 SmartAdmin 是1.8.4 版本，他用到的 angular 版本是 1.4.9。

    這里不考慮最新的 SmartAdmin 1.8.7 版本，因為他用的 angular 版本是 4.0.1。

    angular 1.x 叫做 AngularJS，用到的是更加通用的 js，而 2.x 至 4.x 是在 js 的基礎(chǔ)上，封裝了一套自己的語法(AtScript)，沒有通用性，不適合開源。

    開發(fā)工具：WebStorm

模版展示

用 WebStorm 打開 AngularJS_Full_Version 項目，在 index.html 打開頁面

頁面效果如下：

用 WebStorm 打開 AngularJS_seedProject 項目，在 index.html 打開頁面

頁面效果如下：

我們可以看到，AngularJS_Full_Version 頁面提供了豐富的模版，我們想用他的圖、表格等，只需將模版代碼稍作修改即可

看完 SmartAdmin 的模版后，現(xiàn)在準(zhǔn)備著手通過 AngularJS_seedProject 項目進(jìn)行 OpenWAF 的 UI 界面開發(fā)

接下來的問題就是，OpenWAF 的配置頁面要做成什么樣的？

頁面設(shè)計

動手

OpenWAF-UI Title

如上圖，在 index.html 中將 "SmartAdmin AngularJS" 改為 "OpenWAF-UI"，效果如下：

菜單欄

頁面已經(jīng)有了 Home 菜單項，想要添加 “Server” 和 “Policy” 兩項

1. 創(chuàng)建 Server APP

模仿 Home App，創(chuàng)建了 Server App，三個文件的內(nèi)容分別如圖：

2. 加載 Server App

修改 app/app.js，如圖：

3. 菜單欄引用

4. build

改動了 js 文件，需要重新 build 才會生效

如上圖，右鍵點(diǎn)擊 gulpfile.js 文件，再點(diǎn)擊 "Show Gulp Tasks"

"build" 表示單次編譯，"default" 一旦檢測到變更，會自動編譯。我這里選擇的是 "default" （雙擊）

OK，我們可以看到它在本地的 8888 端口起了一個服務(wù)

按照上面的順序，再次添加 Policy App，最終結(jié)果如下：