ionic插件基础（四）——ngCordova配置安装及ngCordova相机插件的使用

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进行插件的使用，当然是那些已经封装好的。自定义插件是另外一回事。