Ionic 需要Node.js 環境，官網下載：http://nodejs.org/，node 命令預設將安裝到 /usr/bin https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distri ...
Ionic 需要Node.js 環境，官網下載：http://nodejs.org/，node 命令預設將安裝到 /usr/bin
https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions
$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - $ sudo apt-get install -y nodejs
一. 安裝Ionic
Mac OS X：
1. 安裝Cordova 和 ionic命令行工具：
sudo npm install -g cordova ionic
2. 如果要使用Ionic客戶端ios模擬器需要安裝ios-sim npm包，命令：
sudo npm -g install ios-sim
#模塊與命令的對應關係：
/usr/local/bin/ionic -> /usr/local/lib/node_modules/ionic/bin/ionic
/usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova
二. 新建項目
使用現有的app模板或空白頁在命令行創建新項目：
ionic start app_name blank #新建空白頁
ionic start app_name tabs #使用自帶tab模板
ionic start app_name sidemenu #使用自帶側邊菜單模板
<({
註意：如果在家目錄下創建項目，也許會遇到一個問題，提示 mkdir:/home/myIonic: Operation not supported
命令前加上sudo 也不能解決問題，此時需要做一些文件的改動，如下：
weichendeMacBook-Pro:home weichen$ sudo vim /etc/auto_master
# # Automounter master map # +auto_master # Use directory service /net -hosts -nobrowse,hidefromfinder,nosuid #/home auto_home -nobrowse,hidefromfinder /Network/Servers -fstab /- -static
weichendeMacBook-Pro:home weichen$ sudo automount # 不重啟的情況下使設置生效
上面只是將此行註釋掉： /home auto_home -nobrowse,hidefromfinder
})>
三. 配置平臺，運行
Ionic的應用基於Cordova，所以可以使用Cordova的功能來創建、測試和部署應用，但是Ionic功能提供了做同樣事情的簡單方法。
cd app_name/ && ls # 進入項目目錄並顯示文件
(ionic platform add ios) # 使 ionic支持 iOS
ionic platform add android # 使 ionic支持 Android
(ionic build ios) # 創建ios應用
ionic build android # 創建android應用
(ionic emulate ios) # 模擬運行, 預設就帶一套可運行的模板程式
運行 ionic build android 報下麵錯的解決方法：
[Error: Please install Android target: "android-21". Hint: Open the SDK manager by running: /Users/weichen/Library/Android/sdk/tools/android You will require: 1. "SDK Platform" for android-21 2. "Android SDK Platform-tools (latest) 3. "Android SDK Build-tools" (latest)]
1. ant 下載： http://ant.apache.org/bindownload.cgi 放入 /usr/local
2. android sdk 下載： http://developer.android.com/sdk/index.html 放入 /usr/local
如果打不開，可以去其它地方下載： http://my.oschina.net/58685474/blog/303825
3. vim ~/.bash_profile 配置環境變數：
export ANT_HOME=/usr/local/apache-ant-1.9.6 export PATH=${PATH}:${ANT_HOME}/bin export PATH=${PATH}:/usr/local/android-sdk-macosx/tools export PATH=${PATH}:/usr/local/android-sdk-macosx/SDK
使立即生效，source ~/.bash_profile
4. 命令行中運行：/usr/local/android-sdk-macosx/tools/android 自動進入跳出管理界面，把提示中的東西勾選裝上。
① Android SDK Platform-tools (最新版本)
② Android SDK Build-tools (最新版本)
③ Android5.1.1(API 21)
5. ionic platform add android, ionic build android 完成。
Note：安裝什麼樣的android系統環境，是由 platforms/android/project.properties 和
platforms/android/CordovaLib/project.properties 裡面決定的，不過還是以預設的為準安裝環境，否則新建一個項目，又要重新裝一遍sdk環境。
四. 創建自己的App
首頁模板index.html
<!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="js/app.js"></script> <script src="cordova.js"></script> </head> <body ng-app="todo"> </body> </html>
ionic.bundle.js 是 ionic 的 AngularJS 擴展文件，綁定了 ngAnimate 和 ngSanitize，但如果需要其它Angular模塊，需要從 lib/js/angular 中引入。 cordova.js 必須是最後一個script文件，在開發文件中看不到，只在運行和模擬app時才自動引入。
菜單案例，在body中加入：
<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，在我們自己的 js/app.js 中加入：
angular.module('todo', ['ionic'])
這是用Angular創建應用的方式，它引入用來處理上面標簽的ionic模塊，現在運行還是沒有內容，完整的內容是：
<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>
現在可以運行看到內容了。
五. 測試你的App
在桌面瀏覽器上測試：
$ ionic build ios
$ ionic serve
模擬器測試：
$ ionic build ios
$ ionic emulate ios
作為原生應用運行：
$ ionic run android
六. 構建
https://ionicframework.com/docs
本篇寫於 2014-12-26，正是 Angular 國內興起時，但直到今天才發佈出來。
現在看一下開發混合App 對於前端庫的選擇，如果現在用的是 Angular，那麼選擇 Ionic 就非常容易上手；
如果現在用的是 Vue 或者 React，那麼選擇 quasar framework、Framework7 等也不失為一種好的選擇。
Link：https://www.cnblogs.com/farwish/p/4186601.html
