上一篇已經介紹 Ionic 搭配 Angular 2 是甚麼了，接下來就來介紹如何建構一個 App。

安裝

首先要確定 Node.js 有安裝

接者安裝 Cordova，Cordova 是跨平台底層的架構

npm install -g cordova

如果是 Linux 記得加上 sudo

安裝 Ionic CLI

npm install -g ionic

如果之前有失敗或是有安裝過之前的版本，可以 npm uninstall -g ionic 然後再重裝一次。安裝到最新版之後，如果以前有用 Ionic V1 仍然可以正常運作喔！兩個版本兼容的概念。

接著可以檢查一下安裝結果

ionic info

因為 Angular 2 是用 TypeScipt 來開發，所以也要安裝 TypeScript

npm install -g typescript

Hello Ionic

Ionic 2 提供一個快速建立專案的範本，當然也可以上網找其他人的範本的來使用。

ionic start myIonic2App tutorial --v2
  • start：建立新專案
  • myIonic2App：專案名稱，可自訂
  • tutorial：開始用的範本，可以在這邊參考其他模板
  • --v2：代表用 V2 開發，如果你想用 Angular 1 開發就不用加。
    這樣 App 的基礎建置就完成囉，當然之後還要再加入很多東西才算是完整的 App。

接著先進入資料夾，然後啟動虛擬伺服器，來執行看看我們的 App，我們會先用瀏覽器模擬 App 畫面，比起手機模擬器來說快多了，不用像開發 Native App 一樣，每改動一次都要編譯等好久。

cd myIonic2App
ionic serve

你會被問如何 serve，選 localhost:8100，然後應該會自動起動瀏覽器到 https://localhost:8100，如果沒有就手動輸入。

如果是用 Chrome，按 F12 開啟開發者工具，可以切換成手機瀏覽模式，還可以選擇機款模擬，像這邊就選 iPhone6

Chrome 開發模式下看到的樣子會長這樣

如果想一次看所有平台上的 App 模樣，可以輸入

ionic serve -l

就會長這樣

好囉，所以預備動作都完成啦！這樣就可以來開發了 :)

Ionic 2 專案架構

先來看看 Ionic 2 的專案架構

├── config.xml
├── hooks
├── ionic.config.json
├── node_modules
├── package.json
├── platforms
├── plugins
├── resources
├── src
├── tsconfig.json
├── tslint.json
  • config.xml: App 名稱、App 版本、一些設定值等等
  • hooks: 加入自己寫的 Native Code
  • platforms: 建立 Android、IOS 輸出平台
  • plugins: Cordova 可以加入 Native Code 的 Plugin
  • resources: 包含一些資源，像是 App 圖示、啟動圖片之類的
  • src: 我們寫的所有 code 幾乎都會在這裡，概念跟 Angular CLI 很像，之後會被輸出到 WWW 資料夾

Ionic App 建構的部分就到這邊啦！
明天要討論如何開始用 Angular 2 來做開發囉！