ng-cordova

ngCordova是AngularJS与Cordova API的桥梁,它提供了一组服务,使得开发者能方便地调用手机硬件功能。文章介绍了如何安装ngCordova,包括下载、引入JS文件以及在AngularJS应用中添加依赖。接着,详细讲解了如何使用camera插件,强调了在使用任何插件前需确保设备就绪,并展示了安装camera插件的命令。

概述

ngCordova是AngularJs在Cordova Api的基础上, 封装的服务,可以让开发者拥有用js调起手机硬件的功能.

在cordova插件的sucess和error js回调方法中,是无法使用 angularjs的$scope对象和注入的方法的,只能访问全局的方法和变量,这样会导致很多麻烦,必须使用传统的js方法写很多难看的代码。使用ngCordova应该可以解决这个问题。

安装

下载

$ bower install ngCordova

引入js

将ng-cordova.js 和 cordova.js添加到index.html中.

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

在angularjs中添加ngCordova依赖

var myApp = angular.module('myApp', ['**', '**', 'ngCordova']);

插件

参考官网
通过安装各种插件, 调用插件的方法, 可以访问手机设备, 比如摄像头, 手势, 音量, 亮度, 文件, 蓝牙, 短信等.

在使用每个插件之前,必须先检测设备是否就绪.

//1.可以通过cordova内置的原生事件'deviceready'来检测.
document.addEventListener("deviceready", function () {
    $cordovaCamera.getPicuture({})
        .then(
            function(){}, 
            function(){}
        );
}, 
false);

//2 可以使用Ionic带的
$ionicPlatform.ready(
    function() {
      $cordovaCamera.getPicuture({})
          .then(
            function(){}, 
            function(){}
        );
    }
);

通过下面的命令添加插件到项目中:
cd 到项目目录下执行,

cordova plugin add org.apache.cordova.camera

安装完毕后, 在项目目录下的plugins文件夹下, 会多出一个文件夹cordova-plugin-camera

camera

链接
这个插件只在真实环境中有效, 不在模拟环境中生效

var module = angular.module('shopstyle');
module.controller('', 
    ['$scope', '$cordovaCamera', 
    function($scope, $cordovaCamera){
        $scope.openCamera = 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
            };

            //返回一个图片数据的一个对象
            $cordovaCamera.getPicture(options)
                .then(
                    function(imageData) {
                      var image = document.getElementById('myImage');
                      image.src = "data:image/jpeg;base64," + imageData;
                    }, function(err) {
                      // error
                    }
                );
        }
}]);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值