Ionic系列——使用ng-cordova插件

1、cordova介绍

Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。

Cordova支持如下7种移动操作系统:iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

Cordova是贡献给Apache后的开源项目,是从PhoneGap中抽出的核心代码,目前(PhoneGap和Apache Cordova之间的)唯一区别是下载的包的名字,这会持续一段时间。

2、ng-cordova介绍

ngCordova是在Cordova Api基础上封装的一系列开源的AngularJs服务和扩展,让开发者可以方便的在HybridApp开发中调用设备能力,即可以在AngularJs代码中访问设备能力Api。

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

3、Phonegap和cordova的关系

Adobe将会继续以Cordova加上PhoneGap Build和Adobe Shadow的组合提供PhoneGap。 早在2011年10月,Adobe收购了Nitobi Software和它的PhoneGap产品,然后宣布这个移动开发框架将会继续开源,并把它提交到Apache Incubator,以便完全接受ASF的管治。我们想知道为什么Adobe会收购Nitobi并开源PhoneGap,尤其是为什么PhoneGap还会继续,如果另一个项目应该完成它的工作?

最近Adobe出现了一系列的沟通问题,包括处理Flash、Flex、AIR和PhoneGap的过渡问题。几个月之后,Adobe终于搞清楚他们对Flash和Flex的规划了,现在发帖澄清围绕着PhoneGap的一些谜团。

PhoneGap的项目主管Brian LeRoux指出开源PhoneGap的决定在Adobe收购Nitobi之前就做出了,由于Adobe现在拥有PhoneGap商标,他们不得不换个名 字。第一个选中的名字是Callback,毫无创意,因此再改一次,产品现在叫Apache Cordova。

虽然很多人认为PhoneGap这个名字不会再用,因为代码已在一个不同的名字下面,但现实的情况是,Adobe想 继续在PhoneGap品牌下提供Cordova。在不久的将来,Adobe会把Cordova、PhoneGap Build(一个在线应用程序构建服务)和Adobe Shadow(一个检查和预览工具)打包起来,将来很可能还会向PhoneGap包添加更多移动开发工具。

目前还不清楚Adobe是否会巩固PhoneGap品牌,虽然开发者对它已经耳熟能详,或者是否换成另一个名字。此 外,也不清楚他们是否会在Cordova代码之上构建私有代码,但LeRoux的帖子留下了线索:“目前(PhoneGap和Apache Cordova之间的)唯一区别是下载的包的名字,这会持续一段时间(加重语气)。”

4、ng-cordova安装与使用

4.1、下载ng-cordova

bower install ngCordova

4.2、引入ng-cordova.js文件

ng-cordova.js 或者 ng-cordova.min.js引入index.html中并放在cordova.js之前, AngularJS Ionic 文件之后 (因为ngCordova d依赖AngularJS).

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

4.4、引入ng-cordova的依赖

在主程序的app.js中引入ng-cordova的依赖

angular.module(‘myApp‘, [‘ngCordova‘])

4.5、添加插件到你的Cordova CLI环境中

cordova plugin add ...

4.6、使用

要在检查设备准备完毕之后使用

document.addEventListener("deviceready", function () {   
    $cordovaPlugin.someFunction().then(success, error); 
}, false);

 // OR with IONIC 
 
$ionicPlatform.ready(function() {  
      $cordovaPlugin.someFunction().then(success, error); 
});

不过我测试过,因为已经run过了,你的各种功能肯定在这之后,所以之后在哪用都可以。不过要是有些功能是启动应用就要有,还是要写在这里面的。

angular.module(‘starter‘, [‘ionic‘, ‘route‘,‘config‘,‘global‘,‘commonJs‘,‘ngCordova‘])

.run([‘$ionicPlatform‘,‘$rootScope‘, ‘$location‘, ‘$timeout‘, ‘$ionicHistory‘,‘CommonJs‘,‘$cordovaToast‘,function($ionicPlatform,$rootScope, $location, $timeout, $ionicHistory,CommonJs,$cordovaToast) {
  $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
  });
  
}]);

4.7、官网

ng-cordova插件集合:http://ngcordova.com/docs/plugins/

时间: 2024-10-10 17:32:46

Ionic系列——使用ng-cordova插件的相关文章

ionic项目中使用cordova插件支付宝支付

第一步安装:cordova plugin add (github的地址,你也可下载下来,就变成了你的目录地址). 第二步打开插件目录,修改plugin.xml参数,如下: 插件名字 安卓平台支付宝参数配置 ios平台参数配置,有两个地方,注意第二个方框,如果是ios9记得加上,否则访问不了http协议 另一个配置地方: 以上就是配置参数,接下来是调用方法,如: 到此支付宝集成也完成,针对新版本修改过的文件地址如下:支付宝插件地址

Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App

安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneGap.ionic.AngularJS这些框架或库的关系,我个人理解是这样,PhoneGap是一个商业项目,用来实现HTML5式的跨平台开发,后来Adobe公司将其中的核心代码开源,就是Cordova,Cordova只负责实现JavaScript调用原生代码的功能,是一个壳,而壳里具体用什么样式,在H

【No.4 Ionic】修改 cordova 插件

在使用 cordova 过程 使用的插件 有可能不能满足个人需求,就需要修改,下面就直接说说步骤 插件结构 我用 cordova-plugin-inappbrowser 插件 讲解 在目录中有个 src目录,然后 有android  和 ios 目录,直接按需修改就行了 . |-- CONTRIBUTING.md |-- LICENSE |-- NOTICE |-- package.json |-- plugin.xml |-- README.md |-- RELEASENOTES.md |--

如何给Ionic写一个cordova插件

写一个cordova插件 之前由javaWeb转html5开发,由于面临新技术,遂在适应的过程中极为挣扎,不过还好~,这个过程也极为短暂:现如今面临一些较为复杂的需求还会有一丝丝头痛,却没有一开始那么强烈了... 在正式写下文之前,我先感谢公司大boss:王总,感谢他让我进入了一个有挑战性的技术公司 并在这个过程中一直鼓励我不断汲取新技术,同时也指正了我在开发中的一些不太好的习惯,十分感谢! 再~,感谢在开发中给予我太多帮助的杜勇以及孙金~,不论是需求讨论还是具体开发阶段都会给予一些十分有用的思

1.ionic系列之初识ionic

ionic官方这样解释ionic"ionic: Advanced HTML5 Hybrid Mobile App Framework",其意为:"ionic:先进的HTMl5混合移动App框架".意思已经很明显了,ionic是为移动端的APP开发而生的,无论是运行在手机浏览器上的webApp,还是说运行在手机App上的混合App,ionic都能出色完成.ionic混合应用的开发中至今为止只支持了android和IOS,缺点是尚未支持Windows Phones.并且

Ionic2使用第三方cordova插件(非Ionic2官方支持的native cordova插件)

Ionic2官方提供了丰富的native cordova插件,比如:Camera.Device等等,使用方式也很简单: 1.添加插件支持:ionic plugin add cordova-plugin-device; 2.在页面ts文件中声明: import { Device } from 'ionic-native'; 3.在相关方法中调用: getDeviceInfo(){ console.log('Device UUID is: ' + Device.uuid); } Ionic2nati

Ionic系列——支付

1.为什么用Ping++ 简单的说就是更方便,他和支付平台做了一下对接,申请不用那么复杂了,但是本身是免费的,收费的是各个平台. 其实你也可以自己去看支付宝啊,微信啊,银联的接口文档,直接对接平台,但那样很费劲,会有认证费,认证材料,接口等一系列的东西要准备.而Ping++的认证会更简单一点. 支付宝服务市场  https://app.alipay.com/market/productIndex.htm 微信支付  https://pay.weixin.qq.com/wiki/doc/api/a

cordova插件使用集合

1.获取当前应用的版本号 cordova plugin add cordova-plugin-app-version 2.获取网络连接信息 cordova plugin add cordova-plugin-network-information 3.获取GPS数据 cordova plugin add cordova-plugin-geolocation 4.Visual Notification(可视化消息提醒) cordova plugin add cordova-plugin-dialo

理清cordova插件的调用流程

从调用的角度看流程  前端调用(clobbers)-->cordova_plugins.js(clobbers对应插件id和插件文件所在的路径)-–>js部分(配置着插件的名字,已经插件里面都有的方法)-->config.xml(根据插件的名字找到对应的插件原生文件的包名)-->原生(根据匹配到的方法名,来调用原生方法,另外也可以获取到js传递下来的参数) 简单说:前端调用-->桥梁:(cordova_plugin.js clobbers)-->js文件-->桥梁