Ionic 2系列001：第一個Ionic 2專案

JavaScript功能持續更新著，瀏覽器也不斷追著JavaScript新功能在跑。一些受歡迎的JavaScript framework當然也得因應這些改變，而推出更新的版本。最近，JavaScript最大的改變應該就是正式加入「物件」相關語法－也就是俗稱的ES6（ECMAScript 6 或稱為ECMAScript 2015）。

但這對以Ionic框架開發hybrid apps有何影響？簡言之，因應ES6的變革，Angular推出了Angular 2，Ionic也順勢推出Ionic 2（2016年10月已過beta版，來到Ionic 2.0RC1），Ionic apps的開發也完全物件化，整體改變相當巨大。因此，接下來的文章將會以Ionic 2的介紹為主。

Ionic 2與Ionic 1的差異

安裝部分仍可參考之前的舊文Hybrid Apps開發系列之1：Ionic/Cordova框架環境設定，但如果之前已經安裝過node.js，必須先更新npm，說明如下：

1. Node.js與npm：如果原本已經裝了node.js，則必須先更新npm
   

   npm install -g npm
   

2. Ionic 2/Angular 2：不論有無安裝過，都必須再以npm安裝。安裝之後，新的Ionic 2命令列工具（Ionic CLI）仍適用於先前Ionic 1專案。
   

   npm install -g ionic
   

3. Cordova：Cordova情形也與Ionic 2相同，必須安裝、或更新到最新版
   

   npm install -g cordova
   

目前（2016/10）安裝之cordova與ionic最新版本

儘管安裝程序與先前相同，但開發Ionic 2專案基本上是砍掉重練的概念。Angular 2/ Ionic 2採用了微軟的TypeScript（語法較ES6更多，可以看成是ES6標準的implementation），因此以Ionic 2 CLI產生之專案，從專案架構到程式碼都與Ionic 1完全不同。

第一個Ionic 2專案

Ionic 2 CLI成功安裝之後，建立專案的方式不變：

ionic start MyApp blank

依舊可建立名為"MyApp"的Ionic 1專案，如先前舊文Hybrid Apps開發系列之2：第一個專案所述。但若要建立TypeScript版本的Ionic 2專案，則必須加上--v2（註：網路部份文章介紹"-ts"參數，現已變為預設選項，不需再加），如：

ionic start MyApp01 blank --v2
ionic start MyApp02 --v2

前者指定blank將建立空白專案"MyApp01"，後者未指定模板，則建立Tabs式專案"MyApp02"。
當建好Ionic 2專案，切換至專案目錄，再執行

ionic serve

便會開啟瀏覽器，顯示app執行結果，如下圖是Tabs專案的執行畫面：

或是輸入

ionic serve --lab

則會看到不同平台上的模擬結果：

ionic serve --lab同時顯示iOS, Android與Windows三種平台的模擬畫面

Ionic 2專案結構

Ionic 2採用TypeScript為預設語言，專案結構也因應語言特性而做了大幅改變，空白專案結構如下圖：

Ionic 2專案結構做了大幅度更動

1. src資料夾為所有程式碼所在位置，www資料夾則為自動產生。當你使用ionic serve或其他build與執行指令時，Ionic便會將src的程式碼（TypeScript或ES6），轉譯（transpiling）為瀏覽器可執行的ES 5程式碼，放置於www資料夾中。換句話說，www資料夾的任何更動，在下次執行專案時，便會被覆蓋掉。
2. src資料夾內不再有JavaScript的.js檔，取而代之的是.ts檔（TypeScript）。資料夾內有：
• app資料夾：資料夾內app.component.ts便是Ionic 2 apps程式的進入點，app.module.ts則用來設定所使用的模組。
• pages：Ionic 2 apps每一個頁面都會對應到pages內的某個資料夾。例如上圖有pages/home，代表有一個home頁面。更進一步檢視home資料夾，內有home.ts（頁面程式元件）、home.html（頁面模板）、以及home.scss（頁面css定義）。Ionic 2 CLI也提供了在專案裡建立單一頁面的指令，下例便會建立pages/LoginPage資料夾：

  ionic g page LoginPage

• theme：放置apps的css設定檔（.scss檔）
• assets：放置圖片、檔案等apps會使用到的資源。
• index.html：apps的webview的進入點。

以上簡要說明Ionic 2與Ionic 1的差異。然而，打開上述資料夾中的.ts檔，其寫法與先前Ionic 1 JavaScript完全不同。因此，接下來的文章，將會進一步介紹如何用TypeScript撰寫Ionic 2 app。

最後，對開發人員最重要的問題是：我需要從Ionic 1換成Ionic 2嗎？Ionic 2加入物件導向語法後，變得更結構化，更容易reuse。長遠來看，加入Ionic 2的開發行列，應該是利大於弊。唯一要克服的便是TypeScript。

讀者若有興趣可自行閱讀下列文章，進一步了解ES5,ES6,TypeScript的差別：

1. ES5, ES6, ES2016, ES.Next: What's going on with JavaScript versioning?(這裡有簡體中文翻譯版)
2. 從ES6規範看JavaScript的現在和未來
3. 快速瞭解 TypeScript 是什麼東西