HTML5打造原生應用——Ionic框架簡介與Ionic Hello World

試了試用Ionic框架打造了兩個應用，然後在Google Play上架了。

• 程式語言答人
• 教你設計物聯網

更有意思的是這是在一週的業餘時間內完成的三個應用中的兩個，接著讓我們看看這個框架如何實現高效地開發。

Ionic 框架

Ionic是一個新的、可以使用HTML5構建混合移動應用的使用者介面框架，它自稱為是“本地與HTML5的結合”。該框架提供了很多基本的移動使用者介面範例，例如像列表（lists）、標籤頁欄（tab bars）和觸發開關（toggle switches）這樣的簡單條目。它還提供了更加複雜的視覺化佈局示例，例如在下面顯示內容的滑出式選單。

官網地簡介上說了下面的一些優點：

• Performance obsessed
• Angular & Ionic
• Native focused
• Beautifully designed
• A powerful CLI
• Fun to learn
• Built by nerds (like you)

簡單地來說就是:

• 效能比用jQuery構建好
• 基於Angluar JS
• 更加原生化
• 設計精美
• 更大地CLI
• 學習樂趣
• 為極客而構建

Ionic Hello World

安裝Ionic

1.安裝Node.js

2.安裝Cordova和Ionic

$ npm install -g cordova ionic

3.建立專案，官方給了三個不同型別的基礎專案:

• 空白應用
• Tabs應用
• 滑動選單應用

對應的建立方式有:

1) 空白應用

$ ionic start myApp blank

2) Tabs應用

$ionic start myApp tabs

3)滑動選單應用

 $ ionic start myApp sidemenu

4.執行

$ cd myApp
$ ionic platform add android
$ ionic run android

接著我們就可以看到一個應用就生成了。