ionic ngCordova插件安裝

ngCordova的安裝配置

官網提供了兩種安裝的方法： 
1. 使用bower來安裝 
2. 下載zip文件

推薦使用bower安裝，在使用bower之前，我們電腦中需要先配置bower。bower的配置非常簡單：

bower簡介：

Bower是一個客戶端技術的軟件包管理器，它可用於搜索、安裝和卸載如JavaScript、HTML、CSS之類的網絡資源。

准備工作：

• 安裝node環境:node.js
• 安裝Git，bower從遠程git倉庫獲取代碼包:g

安裝bower：

使用npm，打開終端，輸入：

npm install -g bower

其中-g命令表示全局安裝

這時候我們就可以使用bower來安裝我們的ngCordova。

安裝ngCordova

進入到工程目錄，使用bower工具安裝：

bower install ngCordova

bower ECMDERR Failed to execute git ls-remote --tags,
如果git報錯的話，需要配置下GIT如下:

git config --global url."https://".insteadOf git://

稍作等待，我們的ngCordova就安裝好了。

我們查看一下我們的項目，發現ngCordova已經在“項目路徑\www\lib”下面：

接着，將ng-cordova.js 或者 ng-cordova.min.js文件include到我們的index.html。

<script src="lib/ngCordova/dist/ng-cordova.js"></script> <script src="cordova.js"></script>

注意：ng-cordova.js文件必須在cordova.js之前並且在 AngularJS / Ionic文件之后（因為ngCordova depends on AngularJS）

在angular中添加ngCordova依賴

angular.module('myApp', ['ngCordova'])

通過deviceready event包裝每個插件的調用

（不知道有沒有翻譯錯。。）

在使用每個插件之前，必須先檢測設備是否就緒，通過cordova內置的原生事件deviceready來檢測，如下：

document.addEventListener("deviceready", function () { $cordovaPlugin.someFunction().then(success, error); }, false); // OR with IONIC $ionicPlatform.ready(function() { $cordovaPlugin.someFunction().then(success, error); });

 

---

ngCordova相機插件的使用

現在我們根據官網的文檔來自己寫一個小demo。

為了於cordova插件進行對比，我們還是使用上一講的項目（即創建ionic項目時默認的那個）。

首先我們還是要安裝插件的：

cordova plugin add cordova-plugin-camera

templates/tab-dash.html中的代碼跟上一講一樣：

<ion-view view-title="Dashboard"> <ion-content class="padding"> <h2> Camera Test </h2> <img id="imageFile" src="./img/ionic.png" width="100px" height="100px"/> <button ng-click="openCamera()">openCamera</button> </ion-content> </ion-view>

在controllers.js中修改“DashCtrl”這個controller：

angular.module('starter.controllers', []) .controller('DashCtrl', function($scope, $cordovaCamera) { document.addEventListener("deviceready", function () { var options = { quality: 50, destinationType: Camera.DestinationType.DATA_URL, sourceType: Camera.PictureSourceType.CAMERA, allowEdit: true, encodingType: Camera.EncodingType.JPEG, targetWidth: 100, targetHeight: 100, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: false, correctOrientation:true }; $scope.openCamera= function(){ $cordovaCamera.getPicture(options).then(function(imageData) { var image = document.getElementById('imageFile'); image.src = "data:image/jpeg;base64," + imageData; }, function(err) { // error }); }, false; }) })

注意，在app.js記得注入’ngCordova’：

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services','ngCordova'])

實際演示效果跟上一講中使用cordova插件沒有太大的區別，就不貼圖了。

在上面的代碼中，我們關於插件的使用都是在

document.addEventListener("deviceready", function () {}）

中進行的，這也即我們在上面講的通過deviceready event包裝每個插件的調用。

通過對比可以發現，我們的controller中的代碼比上一講中直接使用cordova簡單了許多而且更符合我們AngularJs的代碼的編寫。

所以我還是建議使用ngCordova進行插件的使用，當然是那些已經封裝好的。自定義插件是另外一回事。