Hybrid Apps開發系列之4.2：多頁面App程式重構

前一篇文章（Hybrid Apps開發系列之4.1：多頁面App製作與頁籤(Tabs)簡介）製作多頁面apps時，是以<script>將所有頁面全部寫在index.html檔裡。但當apps的頁面數量增加，此種管理頁面的方式便需要做改變。此外，由於Ionic/AngularJS使用MVC (Model-View-Controller，另一說是MVVM-Model View Viewmodel) 設計模式，因此最好也將Controller與app.js分開。圖1與圖2說明重構程式的七個步驟。

圖1.重構程式步驟1~3

前三個步驟重構頁面，將頁面從index.html獨立出來，放到適當資料夾。

1. 新增資料夾與HTML檔：在專案Site Root（也就是www）下新增"templates"資料夾，接著新增ng-template指定的兩個.html檔－home.html與order.html。接著在www/js下新增JavaScript檔－controllers.js。
2. 建立新HTML檔內容：將index.html檔原<script id="home.html...>的元素內容（不含<script></script>標籤）搬移到templates/home.html，原<script id="order.html...>的元素內容則搬移到templates/order.html。
3. 移除<script>元素：移除index.html檔內前述兩個<script>標籤（元素內容一併移除）。

圖2.重構程式步驟4~7

步驟4-6則是重構contoller，將controller獨立成一個檔案。步驟7則是修正.config()內關於頁面的路徑。

4. 參照新的controllers模組：Controller重構之後獨立為另一個檔案（js/controllers.js），且將所有controller變為一個新的模組。而在app.js原先建立模組的第二個參數處，就必須加入新的模組名稱，例如：
   

   angular.module('starter',['ionic','starter.controllers'])
   

   'starter.controllers'就是新的controller模組名稱。
5. 建立新的controllers模組：因此，controllers.js內就必須建立新的模組，並將原先在app.js內透過.controller()定義的全部controller程式碼—包括模組外以var關鍵字建立的變數，搬到controllers,js裡，例如：
   

   angular.module('starter.controllers',[])
       .controller('a',function(...){
          ... // 原先在app.js內的controller a
        })
       .controller('b', ...
          ... // 原先在app.js內的controller b
        })
   var array = [
       ... // 原先在app.js定義的變數
   ]
   

6. 加入controllers.js參照：在index.html裡參照app.js的下方，加入新的參照，指向js/controllers.js；如此執行時才會找得到新的controllers定義。
7. 修正頁面路徑：由於新的.html檔都放在templates資料夾，而非原先index,html所在的Site Root，因此必須修正app.js內所有templateUrl對應的屬性值。

經此七個步驟修正，新的程式碼結構，對撰寫越來越多頁面的專案會很有幫助。下一篇文章變會將4.1的專案範例修正為新的程式結構。