ionic框架配置

ionic簡介

ionic是一個專一於用WEB開發技術，基於HTML5建立相似於手機平臺原生應用的一個開發框架。目前綁定的與angularJS和SASS。這個框架的目的是從web的角度開發手機應用，基於PhoneGap的編譯平臺，能夠實現編譯成各個平臺的應用程序。

ionic安裝

首先須要安裝cordova和android環境。這個參考個人另外一篇文章：phoneGap之Android環境搭建，上面寫的很詳細，還有常見的錯誤及解決辦法。
而後安裝ionic:

1	npm install -g ionic

若是由於網絡緣由安裝不上有兩種辦法：
1.修改npm源爲淘寶npm源，可使用下面三種方法中的任意一種

A.經過config命令

1 2	npm config set registry https://registry.npm.taobao.org npm info underscore （若是上面配置正確這個命令會有字符串response）

B.命令行指定

1	npm --registry https://registry.npm.taobao.org info underscore

C.編輯 ~/.npmrc 加入下面內容

1	registry = https://registry.npm.taobao.org

2.拷貝安裝過的ionic目錄，配置環境變量或者創建軟鏈接。

安裝完成以後，就可使用ionic建立項目了。

1 2 3

ionic start myApp tabs //建立帶有top欄和bottom欄的示例項目 ionic start myApp sidemenu //建立帶有左側帶有menu欄的示例項目 ionic start myApp blank //建立空白項目

具體效果，能夠查看官網： http://ionicframework.com/getting-started/
而後可使用：

1	ionic serve

該命令會自動啓動流瀏覽器，查看當前效果。

Ionic Lab

Ionic Lab 是桌面版的開發環境，若是你不喜歡使用命令行操做，Ionic Lab 將會知足你的需求。
Ionic Lab 爲開發者提供了一個更簡單的方法來開始，編譯，運行，和模擬運行Ionic的應用程序。
Ionic Lab 支持的平臺有：Window、Mac OS X、Linux，下載地址爲：http://lab.ionic.io/ ，下載後直接安裝便可。整個操做界面以下所示：
Ionic Lab
經過以上界面你能夠完成如下操做：
建立應用
預覽應用
編譯應用
運行應用
上傳應用
運行日誌查看

添加Android平臺

執行下面的命令,

1 2 3 4

cd myApp ionic platform add android //這行可能會報錯 ionic build android ionic emulate android

其實上面的使用方法和cordova差很少，添加android的時候可能會報錯，以下：

1 2 3 4 5 6 7 8

The error is: ======================================= events.js:72 throw er; // Unhandled 'error' event ^ Error: spawn ENOENT at errnoException (child_process.js:1000:11) at Process.ChildProcess._handle.onexit (child_process.js:791:34)

解決的方法很簡單，將ionic換成cordova便可，經測試works fine。

1 2 3 4

cd myApp cordova platform add android //這行可能會報錯 cordova build android cordova emulate android

其餘常見錯誤

1. 生成項目(ionic start myApp tabs)時可能會報錯，以下：

   1	Error: command failed:fatal:could not create work tree dir:'C:\Users/ADMINI~1\AppData\Local\Temp\plugman\git\1402853493773'.:No such file or directory

解決辦法：進入上面對應的目錄，創建對應的文件。好比在temp目錄下創建plugman目錄，在plugman目錄下創建git目錄，而後再git下創建1402853493773目錄。便可，經測試有效。

2.sh: 1: node-gyp: Permission denied 安裝軟件包報錯
這個通常是centos等系統，在root用戶下安裝會報錯。主要是權限問題，報錯詳情：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

> node-gyp rebuild sh: 1: node-gyp: Permission denied \ > ws@0.4.32 install /root/.nvm/versions/node/v0.12.4/lib/node_modules/log.io/node_modules/socket.io-client/node_modules/ws > (node​​-gyp rebuild 2> builderror.log) || (exit 0) > ws@0.4.32 install /root/.nvm/versions/node/v0.12.4/lib/node_modules/log.io/node_modules/socket.io/node_modules/socket.io-client/node_modules/ws > (node​​-gyp rebuild 2> builderror.log) || (exit 0) npm ERR! Linux 3.13.0-48-generic npm ERR! argv "/root/.nvm/versions/node/v0.12.4/bin/node" "/root/.nvm/versions/node/v0.12.4/bin/npm" "install" "-g" " log.io" npm ERR! node v0.12.4 npm ERR! npm v2.10.1 npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! errno ENOENT npm ERR! syscall spawn npm ERR! contextify@0.1.14 install: `node-gyp rebuild` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the contextify@0.1.14 install script 'node-gyp rebuild'. npm ERR! This is most likely a problem with the contextify package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! node-gyp rebuild npm ERR! You can get their info via: npm ERR! npm owner ls contextify npm ERR! There is likely additional logging output above. npm ERR! Please include the following file with any support request: npm ERR! /root/npm-debug.log

能夠清楚看到訊息中提示咱們在執行node-gyp 的時候權限不足。

查詢一下Google ，找到別人blog寫得簡單解決方法：

1	npm config set unsafe-perm true

接下來安裝就正常了。 至於npm config的使用方法， 請參考 此處 .
咱們能夠從npm config set unsafe-perm的解說中看到，咱們剛剛修改的意思。

1 2 3

Default: false if running as root, true otherwise Type: Boolean Set to true to suppress the UID/GID switching when running