文章出處

系列文章

在本文中，將繼續介紹在 WebStorm 中開發，去實現App的功能需求。就像蓋房子一樣，第一步需要把整個工程的頁面結構先勾勒出來，先讓各個頁面流轉起來，然后再去細化每個頁面。
所有工程代碼放在了 https://github.com/zhangsichu/DeliveryApp 同時上篇文章中創建的初始化工程，也Tag了 TheInitialProject，您可以使用 Git checkout 這個Tag, 也可以直接到：https://github.com/zhangsichu/DeliveryApp/releases/tag/TheInitialProject 去下載初始化的工程代碼，得到最初的 ionic 創建好的工程。

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 文件引用

到這一步您可以執行以下 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

到這一步您可以執行以下 ionic serve

ionic serve

在瀏覽器里訪問 http://localhost:8100/#/login 或者 http://localhost:8100/#/login 看看效果。

3. 讓頁面動起來

功能頁面都創建好了，現在就要在頁面里寫功能了，讓頁面動起來了。
給每個頁面添加按鈕，在對應的 Controller 里添加功能代碼。如在 Login頁面里添加 login 按鈕，給它添加功能。

<h1>Login</h1>
<button ng-click="doLogin();">登陸</button>

在Controller 里添加頁面跳轉的功能。

頁面最后完成的樣子。

到這一步完成的代碼在：https://github.com/zhangsichu/DeliveryApp/releases/tag/AllPages 可以下載到。你也可以執行 git checkout AllPages