<a href="http://www.cnblogs.com/powertoolsteam/p/4775028.html">實戰使用Axure設計App,使用WebStorm開發(4) – 實作頁面UI</a>
<a href="http://www.cnblogs.com/powertoolsteam/p/4775052.html">實戰使用Axure設計App,使用WebStorm開發(5) – 實作頁面功能</a>
<a href="http://www.cnblogs.com/powertoolsteam/p/4775059.html">實戰使用Axure設計App,使用WebStorm開發(6) – 邁向後端</a>
接上一篇系列文章，在本文中，将在WebStorm中繼續開發，實作頁面的功能。這需要一個頁面一個頁面的開發，來完成功能。本文将側重把所有頁面的UI都實作出來，先把前端的工作都完成了，然後再去連結後端的 RESTful Service。
登陸頁面
給頁面添加 login.html 添加頁面Html代碼。
為了實作，輸入框的驗證功能，需要給AngularJS加入兩個自定義的标簽: on-valid-submit, validated 由于這是一個全局的驗證功能就把它添加到app.js ddApp module下，如果隻針對某個頁面，可以隻添加到這個頁面的 controller 下。
到這裡登陸頁面的UI就完成了。
清單頁面
首先建構派送清單頁的Html内容:
為了展示資料，這裡在Service裡做了一個MockDB使用這個MockDB為App提供資料，這樣當請求使用後端資料的時候，隻要後端的RESTful Service 也傳回同樣規格的資料就可以了。
這裡代碼比較多，具體代碼在 services.js 中。
接下來處理 派送清單 的 controller 把頁面動作互動和資料連上：
到這裡派送清單頁，就處理完了:
詳細頁面
添加 詳細頁面 html 代碼:
添加頁面 controller :
到這一步 詳細頁面完成了:
接下來就是手動輸入頁面，和掃描頁面，這兩個頁面比較簡單，類似于前面的頁面，寫好頁面Html，配置好 controller 的内容，就可以了。
也可以使用 git checkout AllPageUI 取得
git checkout AllPageUI