MAC OSX環境下cordova+Ionic的安裝配置

1、簡介

1.Ionic是什麼

IONIC 是目前最有潛力的一款 HTML5 手機應用開發框架。經過 SASS 構建應用程序，它提供了不少 UI 組件來幫助開發者開發強大的應用。 它使用 JavaScript MVVM 框架和 AngularJS 來加強應用。提供數據的雙向綁定，使用它成爲 Web 和移動開發者的共同選擇。Ionic是一個專一於用WEB開發技術，基於HTML5建立相似於手機平臺原生應用的一個開發框架。Ionic框架的目的是從web的角度開發手機應用，基於PhoneGap的編譯平臺，能夠實現編譯成各個平臺的應用程序。

在html5移動app開發中,速度是很重要的。Ionic在最新的移動設備中表現很是卓越，運行很是流暢。 操做最少的 DOM，非 jQuery，和硬件加速過渡，讓您感受到用html5開發的app也能夠飛起來。

2.cordova是什麼

cordova前身是phonegap,主要用它的插件。用於將html、css和javascript打包成app

3.ngCordova是什麼

ngCordova是在Cordova Api基礎上封裝的一系列開源的AngularJs服務和擴展，讓開發者能夠方便的在HybridApp開發中調用設備能力，便可以在AngularJs代碼中訪問設備能力Api，諸如訪問文件，攝像頭，GPS等等，這些插件只須要簡單配置就能夠在ionic中使用。



2、安裝cordova和ionic

1.安裝ionic前確保你的Mac已安裝Xcode，請參考：Xcode集成開發環境的安裝

2.安裝cordova以前要安裝nodejs，請參考：Mac下安裝Node.js

3.git不用安裝，osx和linux都自帶git，能夠在命令行輸入 git --version檢查一下



4.安裝cordova:
1>.因爲cordova安裝包的鏡像在國外，國內網絡不行，常常出現安裝失敗的狀況。這就要使用代理，在命令行輸入一下命令：「npm config set registry http://registry.cnpmjs.org」



2>.用root權限全局安裝cordova:「sudo npm install -g cordova」，執行後提示輸入密碼，輸入你的Mac開機密碼便可：



3>.輸入「cordova -v」驗證cordova版本：



5.安裝ionic:
1>.使用「sudo npm install -g ionic」指令安裝ionic:



2>.輸入「ionic -v」驗證版本：



3>.輸入「sudo npm install -g ios-sim」安裝ios模擬器：

除上外，還要安裝 npm install -g ios-deploy,報 下面的錯誤

當使用Cordova或ionic命令行時，

npm install -g iOS-deploy 

或sudo npm install -g ios-deploy 都報錯，

如：

npm WARN lifecycle ios-deploy@1.8.5~preinstall: cannot run in wd %s %s (wd=%s) ios-deploy@1.8.5 ./src/scripts/check_reqs.js && xcodebuild /usr/local/lib/node_modules/.staging/ios-deploy-298c9491
npm ERR! Darwin 15.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "ios-deploy"
npm ERR! node v5.8.0
npm ERR! npm  v3.7.3
npm ERR! path /usr/local/lib/node_modules/ios-deploy/build/Release/ios-deploy
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall chmod

npm ERR! enoent ENOENT: no such file or directory, chmod '/usr/local/lib/node_modules/ios-deploy/build/Release/ios-deploy'
npm ERR! enoent ENOENT: no such file or directory, chmod '/usr/local/lib/node_modules/ios-deploy/build/Release/ios-deploy'
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent 

 

解決問題方法在 https://github.com/phonegap/ios-deploy/issues/188 能夠找到，其實就是：

sudo npm install -g ios-deploy --unsafe-perm=true

 

此次倒給出了提示：

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!! WARNING: You are on OS X 10.11 El Capitan, you may need to add the
!!!! WARNING:   `--unsafe-perm=true` flag when running `npm install`
!!!! WARNING:   or else it will fail.
!!!! WARNING: link:
!!!! WARNING:   https://github.com/phonegap/ios-deploy#os-x-1011-el-capitan
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

 

3.1 項目生成

終端運行

//進入桌面

cd ./Desktop

//生成demo_1文件項目

ionic start demo_1

 

若是建立`iOS`應用,`終端`運行:

cd demo_1

ionic platform add ios (可能會須要sudo)

ionic build ios

ionic emulate ios  //模擬器運行

生成的iOS應用會在`platforms`文件夾中顯示。

文／Springer（簡書做者） 原文連接：http://www.jianshu.com/p/7a7abfa9f435 著做權歸做者全部，轉載請聯繫做者得到受權，並標註「簡書做者」。