ng-cordova

使用ngCordova轻松访问Cordova硬件API

最新推荐文章于 2024-11-08 11:39:10 发布

tyust512

最新推荐文章于 2024-11-08 11:39:10 发布

阅读量569

点赞数

CC 4.0 BY-SA版权

分类专栏： Ionic Cordova

本文链接：https://blog.youkuaiyun.com/tyust512/article/details/50396480

Ionic 同时被 2 个专栏收录

7 篇文章

订阅专栏

Cordova

2 篇文章

订阅专栏

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
                    }
                );
        }
}]);