ngCordova簡介

ngCordova是基於Cordova封裝的Angularjs的呼叫本地裝置介面的模組，可以呼叫70+個常用裝置接外掛，諸如訪問檔案，攝像頭，GPS，二維碼，感測器等等,這些外掛只需要簡單配置就可以在ionic中使用。ngCordova是在Cordova Api基礎上封裝的一系列開源的AngularJs服務和擴充套件，讓開發者可以方便的在HybridApp開發中呼叫裝置能力，即可以在AngularJs程式碼中訪問裝置能力Api。

也就是說ngCordova更適合ionic專案使用，因為ngCordova在Cordova Api基礎上進行封裝，可以在AngularJs程式碼中訪問裝置能力Api，對於基於AngularJs的ionic來說使用更加方便。

在cordova外掛的sucess和error js回撥方法中，是無法使用 angularjs的$scope物件和注入的方法的，只能訪問全域性的方法和變數，這樣會導致很多麻煩，必須使用傳統的js方法寫很多難看的程式碼。使用 ngCordova應該可以解決這個問題。

ngCordova的安裝配置

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

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

bower簡介：

Bower是一個客戶端技術的軟體包管理器，它可用於搜尋、安裝和解除安裝如JavaScript、HTML、CSS之類的網路資源。

準備工作：

• 安裝node環境:node.js
• 安裝Git，bower從遠端git倉庫獲取程式碼包:git簡易指南

安裝bower：

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

npm install -g bower

其中-g命令表示全域性安裝

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

安裝ngCordova

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

bower install ngCordova

稍作等待，我們的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進行外掛的使用，當然是那些已經封裝好的。自定義外掛是另外一回事。