<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 中開發，去實作App的功能需求。 就像蓋房子一樣，第一步需要把整個工程的頁面結構先勾勒出來，先讓各個頁面流轉起來，然後再去細化每個頁面。
git checkout TheInitialProject
在本App中，咱們采用了 Ionic 作為基礎的工程架構，Ionic 是基于 AngularJS 來建構的，是以第一步就是先把頁面路由和URL設定好。建立工程的 service 和 controller，并在 app.js 添加路由設定。 咱們在 AngularJS 中 ng-app 的名字取名為 ddApp.
1. 在 js 目錄下添加 services.js 和 controllers.js 并在 index.html中添加引用。
a) 在 service.js 下聲明 ddApp.services Module
angular.module(ddApp.services, []);
b)在controller.js下聲明ddApp.controllers Module
angular.module(ddApp.controllers, [ddApp.services])
c)在app.js 添加Module依賴
angular.module(ddApp, [ionic, ddApp.services, ddApp.controllers])
d)在 index.html中添加 Javascript 檔案引用
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
到這一步您可以執行以下 ionic serve
ionic serve
在浏覽器裡看看現在的頁面情況
2. 添加路由和功能頁面
a) 在 app.js 裡添加app的路由。
代碼很簡單，設定App中Url對應的狀态，和對應要通路的頁面，同時也需在 www 目錄下建立 templates 檔案夾和對應的頁面檔案。
b) 修改 controller.js 添加空的 Controller
當 templates 下對應的 html 建立完成後，需要在 controllers.js 下為每個頁面先寫一個空的 controller，稍後我們會去實作實際的業務功能。
c) 修改 index.html
修改 App 為 navigate view
3. 讓頁面動起來
功能頁面都建立好了，現在就要在頁面裡寫功能了，讓頁面動起來了。
給每個頁面添加按鈕，在對應的 Controller 裡添加功能代碼。如在 Login頁面裡 添加 login 按鈕，給它添加功能。
<h1>Login</h1>
<button ng-click="doLogin();">登陸</button>
在Controller 裡添加頁面跳轉的功能。
頁面最後完成的樣子。
git checkout AllPages