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

一、cordova介绍

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

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

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

二、ng-cordova介绍

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

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

三、Phonegapcordova的关系

     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的一些谜团。ionic

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

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

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

四、ng-cordova安装与使用

4.一、下载ng-cordova

bower install ngCordova

4.二、引入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.四、引入ng-cordova的依赖

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

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

4.五、添加插件到你的Cordova CLI环境中

cordova plugin add ...

4.六、使用

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

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.七、官网

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