Angular JS 如何使用Cordova 插件

最新推荐文章于 2024-08-13 08:17:05 发布

ACoderForever

最新推荐文章于 2024-08-13 08:17:05 发布

阅读量4k

点赞数

文章标签： angular cordova 插件

本文链接：https://blog.youkuaiyun.com/u011363662/article/details/49095207

版权

本文详细介绍了如何使用ngCordova将AngularJS与Cordova结合，包括配置ngCordova、引用相关JS文件、安装并使用插件等步骤。特别关注了真机调试与Web浏览器调试之间的差异，提供了在Windows系统与Mac系统下处理cordova-plugins.js文件的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、cordova js 如何调用原生应用原理（下次调研）

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中可以使用该插件了

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

}