[Ionic 初心者筆記] 官方教學 - Ch3 開始第一個 Ionic Mobile App

本文章參考 Ionic 官方教學，希望讓初學者對於如何用 Ionic Framework 開發跨平台的 HTML5 mobile apps 有初步的概念。

Chapter 1: All About Ionic
Chapter 2: Installation
Chapter 3: Starting your app
Chapter 4: Testing your app
Chapter 5: Building out your app
Chapter 6: Publishing your app

Chapter 3: Starting your app
一、建構基礎頁面
經過一番折騰，終於要來寫 App 啦！在這個系列範例我們將以完成一個 todolist App 為目標。首先我們必須先建立一個觀念，事實上 Ionic app 可以視為一個 Web page，所以會需要有個 index.html 的檔案，來定義第一個 load 進來的頁面。以下就是 index.html 需要的內容，其中最重要的是必須引入 Ionic CSS、包含 Ionic JS 和 Ionic AngularJS extensions 的 ionic.bundle.js。若需其他 Angular 模組，可從 lib/js/angular 引入。最後必須則引入 cordova.js 或 phonegap.js，作為操控底層硬體的中介。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Todo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
    <script src="cordova.js"></script>
  </head>
  <body>
  </body>
</html>

在開始一個專案時通常我們會先製作 wireframe 作討論（相對而言成本較低），在這個專案中我們會使用 ion-side-menus 來當作主頁面內容的容器，其中包含主頁內容 <ion-side-menu-content> 和在左側的側邊欄內容 <ion-side-menu side="left">，作為 todo 分類的欄位。

<body>
  <ion-side-menus>
    <ion-side-menu-content>
    </ion-side-menu-content>
    <ion-side-menu side="left">
    </ion-side-menu>
  </ion-side-menus>
</body>

二、初始化你的 App
雖然我們在上一個章節完成介面的規劃，但是我們現在還需要結合 Angular 才可以將其轉化成有內容可以運作的 App。
首先我們新增一個 www/js/app.js 檔案，內容放置 AngularJS 的module，並引入 ionic module，讓所有已建立的 ionic tag 可以發揮功能。

最後將以下程式碼加到 index.html 的 <script src="cordova.js"></script> 後面，引入 app.js 到程式主頁當中。

<script src="js/app.js"></script>

將 ng-app="todo" 加到 <body> 標籤中，告訴程式 Angular App的範圍，並於兩個 menu 內容頁面的內部加上 header。

<body ng-app="todo"> 
  <ion-side-menus>

    <!-- Center content -->
    <ion-side-menu-content>
      <ion-header-bar class="bar-dark">
        <h1 class="title">Todo</h1>
      </ion-header-bar>
      <ion-content>
      </ion-content>
    </ion-side-menu-content>

    <!-- Left menu -->
    <ion-side-menu side="left">
      <ion-header-bar class="bar-dark">
        <h1 class="title">Projects</h1>
      </ion-header-bar>
    </ion-side-menu>

  </ion-side-menus>
</body>

在完成了整個頁面的規劃後，接下來我們將測試到目前為止撰寫的成果囉！

參考文件：
1. The Ionic Book
2. ionic book 簡中