Ionic 需要Node.js 環境OA信用盤平臺， 命令默認將安裝到 /usr/local/bin
一. 安裝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
/- -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:
- "SDK Platform" for android-21
- "Android SDK Platform-tools (latest)
- "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
Ionic 需要Node.js 環境OA信用盤平臺， 命令默認將安裝到 /usr/local/bin