angularjs ionic 如何使用Cordova 插件

来源：互联网发布：江门网络推广公司编辑：程序博客网时间：2024/05/21 10:10

Ionic只是个前端框架，与bootstrap差不多，不过他是专门为移动端设计的，在效果上接近原生的app,如果你的应用只涉及到前端的东西，那么你可能不会涉及到ngCordova插件，这是phoneGap的改名叫法。如果我们应用要用到一些底层的东西，如：拍照，文件，数据库，状态栏，设备等等这些原生的东西，那么你就得要好好的学习下ngCordova提供的想着插件。

1、安装ng-cordova

使用bower来安装，前提是你得安装了bower，而且相关权限要配置好了，然后一条命令解决，命令如下：bower install ngCordova，安装bower在此不再说明，自行查百度。
直接下载源文件，然后拷贝到相关目录下，简单直接，本人就喜欢这样的，下载地址官网也给出，在此再列出：下载，他是开源的，源文件放在github上，github就不要再说了吧，搞程序的都知道，地址：https://github.com/driftyco/ng-cordova。

2、ngCordova介绍：ngCordova is a collection of 70+ AngularJS extensions on top of the Cordova API that make it easy to build, test, and deploy Cordova mobile apps with AngularJS（copy from 官网）；说明ngCordova是cordova插件对应的angular Js格式的一种适配方式。

3、确认要使用插件是否在ngCordova（http://ngcordova.com/）中，如果在则项目中配置ngCordova，配置完ngCordova 后则可以直接在Controller中使用该插件。

4、项目引用公共的cordova.js、cordova-plugins.js、ng-cordova.js （注意先引用ng-cordova.js，再引用其他文件）。

4.1、ng-cordova.js 是由安装ngCordova.js后生成的，（原本生成路径：bower_components/ngCordova/dist/ng-Cordova.js）将其copy到项目根目录下。

4.2、cordova.js 和 cordova-plugins.js 都是cordova项目本身自带文件（项目名称\platforms\iOS\www\目录下），只需copy到根目录下即可（必须在根目录）。cordova-plugins.js 包含所有的cordova插件（每次更改时，会自动同步该文件）。

4.3、如果我们是在windows系统内下做开发，然后copy项目到mac的xcode项目的www目录下是；由cordova-plugins.js自动更新便会存在一个问题。copy到xcode中的项目的cordova-plugins.js 不是我们添加各种插件后最新版的文件。便可能需要我们来手动引用这些插件对应的JS文件。

4.4、引用代码：

<script src="ng-cordova.js"></script><script>    var ua = navigator.userAgent.toLowerCase();    if (ua.indexOf("chrome") == -1 && ua.indexOf("firefox") == -1) {        document.write("<script src='cordova.js'><\/script>");        document.write("<script src='cordova_plugins.js'><\/script>");    }</script>

5、cordova 安装插件：phonegap plugin add https://github.com/phonegap/phonegap-plugin-barcodescanner.git

6、anglular Js controller中可以使用该插件了

<script type="text/javascript" src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
然后注入到你的angular模块中，本人的在app.js中，如：
var app = angular.module('starter', ['ionic','ngCordova'])
到了这步，设置已经完成了，接下来是使用他，官网建议在使用是判断设备是否就绪，如：
document.addEventListener("deviceready", function () {
$cordovaPlugin.someFunction().then(success, error);
}, false); // OR with IONIC
$ionicPlatform.ready(function() {
$cordovaPlugin.someFunction().then(success, error);
});
我们一般使用是在controller中，在使用之前记得要添加相关的插件到我们工程中才能使用，比如本人的应用，在初始化时ionic已经添加了一定的插件，你可以查看你的plugin目录查看相关插件。
最后是怎么使用他，本人列出我自己使用的一个小demo,使用插件$cordovaDevice，获取平台信息，如：

module.controller('HomeCtrl', function($scope, $cordovaDevice) {
$scope.isIOS = function(){
//Returns String — eg: "iOS", "Android", "WinCE"
var platform = $cordovaDevice.getPlatform();
platform = platform.toLowerCase();
if(platform == "iOS"){
return true;
}
return false;
}
})

另外一个demo
app.controller('homeCaController', function ($scope, $rootScope,$timeout,$cordovaBarcodeScanner,$cordovaCamera){
$scope.brandScanner = function() {
$cordovaBarcodeScanner.scan().then(function(imageData) {
alert("We got a barcode\n" +
"Result: " + imageData.text + "\n" +
"Format: " + imageData.format + "\n" +
"Cancelled: " + imageData.cancelled);
}, function(err) {
console.log(3);
});
};
}

7、说明真机调试时，不会报错。但是web浏览时，调用插件功能函数时可能会报错。

0 0