Ionic 2系列002：Ionic2專案細節初探

延續上篇（Ionic 2系列001：第一個Ionic 2專案）當空白專案建好之後，例如建了BlankApp:

ionic start BlankApp blank --v2

則在BlankApp/src下便有了Ionic 2的專案結構：

Ionic 2專案結構，程式碼位於src下。

其中index.html則是app的進入點；app、pages則是主要程式碼所在。app資料夾放的是root component相關程式碼，root component是index.html第一個載入的元件。而pages資料夾內，則為每一個頁面分別建立一個資料夾。

專案結構：功能分類 vs. 檔案類型分類

有別於Ionic 1以js, css等「檔案類型」，將檔案放置於不同資料夾，例如所有javascript檔都放在js資料夾內；Ionic 2則是以「功能」(features)放置檔案。因此，原本集中的javascript檔（Ionic 2為typescript檔）、css或html template檔案，在Ionic 2專案內，便依其功能分散到app或pages資料夾內。換句話說，app或是pages內的每一個資料夾，都有自己的typescript檔（將transpile成javascript）、scss檔（css定義）、以及html檔，如下圖便是pages/home資料夾內的檔案。

pages/home資料夾內有ts, scss, html三種類型的檔案

這種檔案放置方式，讓專案更易於管理。

index.html

index.html程式碼如下，看起來與Ionic 1專案的index.html大同小異。

index.html的重點如下：

• 第10行：href="assets/icon/favicon.ico"
  app安裝於手機時所用的icon。
• 第15行：cordova.js
  這是手機app的wrapper，將Ionic的頁面包裝起來，如此便能在手機上執行。
• 32行：<ion-app></ion-app>
  相較於Ionic 1用"ng-app=元件名稱"設定載入的root component，啟動app的執行，Ionic 2用ion-app做為root component。相關定義則放在src/app資料夾內。
• 35行：<script src="build/polyfills.js"></script>
  polyfills.js是用來處理瀏覽器css相容性的javascript函式庫。

app資料夾

app資料夾包含app.component.ts、app.module.ts兩個重要檔案。app.component.ts是root component程式碼，而app.module.ts則是整個app的定義檔，包括使用了哪些外部模組（angular、firebase等等）、app自訂哪些模組、以及root component為何等等。

app.component.ts的檔案內容如下：

其重點包括：

• 第1~5行：import
  Ionic 2用import指令設定該component所使用的模組。例如此處設定了Component, Platform, StatusBar三個ionic或angular提供的模組；另外還有自訂於pages/home/home.ts內的"HomePage"模組。
• 第8-10行：@Component
  這是TypeScript的decorator語法，用來定義class的類別描述（metadata），Ionic 2便設計了@Component decorator，提供定義元件屬性的管道，其作用有點類似Ionic 1的config.state()，可以設定url, templateUrl等屬性。因此，當app.component.ts定義名為MyApp的類別後（如第11行），此類別可加上如'template'的描述，設定頁面所使用的inline html碼。也可以加入如'templateUrl'的描述，如：

  templateUrl: 'app.html'

  設定頁面的html檔案。
• 第9行：<ion-nav [root]="rootPage"></ion-nav>
  <ion-nav>是Ionic 2用來建立頁面瀏覽（navigation）機制的基本指令。而[root]屬性則是設定此類別的「起始頁面」。此處用了Ionic 2內建的rootPage變數，換言之，就看class中如何設定rootPage變數值來決定「起始頁面」為何。
• 第12行：rootPage=HomePage
  如第9行定義起始頁面為rootPage變數，而此處便設定rootPage變數值為第5行所import進來的'HomePage'模組頁面，換句話，app.component.ts會載入pages/home/裡面的home.html做為頁面內容，執行pages/home/home.ts裡HomePage的contructor，並套用home.scss內相關的css設定。

app.module.ts的檔案內容如下：

如前所述，app.module.ts是整個app的定義。因此，當我們加入新的頁面或服務（services），且希望app能用到這些頁面或服務，便必須將之加入app.modules.ts的設定當中。新增的頁面必須加到@NgModule的declarations（第7-10行）與entryComponents（第15-18行）裡面，也必須將class import進來（如第1~4行）。

了解了空白專案的一些重要細節，接下來便可開始建立Ionic 2 apps。