Ionic App 程式結構之一：Views、Controllers、Configuration

如前文Hybrid Apps開發系列之2：第一個專案所說，Ionic專案建立之後，有app.js, index.html等重要檔案。事實上，Ionic apps有其運作機制，其中每一個app都會包括: views、controllers、與app設定（configuration）等部分，而視情況，還會建立services/factories，作為app資料服務串接之用。底下先就views、controllers、與app整體設定進行說明。

Ionic views、controllers與組態設定

Ionic apps有關views, controllers,組態設定(configuration)等基本運作機制，及其與index.html、app.js等檔案的關聯如下圖所示：

圖1. Ionic app的view(如home.html及page2.html)與controller(app.js)。index.html則做為app的模板(template)

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

Hybrid Apps開發系列之4.1：多頁面App製作與頁籤(Tabs)簡介

前一篇文章介紹使用<ion-header-bar>，<ion-content>製作單一頁面的apps (Hybrid Apps開發系列之3.4：單頁面App製作(貨幣轉換器))；不過如果要製作多頁面 (multiple views) apps，則必須套用AngularUI-Router框架。Ionic已包含angular-ui-router套件，將多頁面apps的介面瀏覽過程，轉為許多"states"；因此，只需使用適當的Ionic指令，以及angular-ur-router services，建立各個"states"的細節，便可完成多頁面apps。

顯示頁面內容指令：<ion-nav-view>

最簡單的多頁面apps是以<ion-nav-view>做為頁面的樣板，而各頁的內容再以<ion-view>標示。至於瀏覽過程中該顯示哪一頁？則由UI-Router決定.，程式中必須告知UI-Router，有幾個states，每一個頁面可能就是一個state，如下圖所示：

圖1. 定義好樣板與內容後，UI-Router會根據瀏覽歷程決定顯示內容