zoukankan html css js c++ java

【移动端】icon中ng-cordova使用

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之间的)唯一区别是下载的包的名字，这会持续一段时间。

ng-cordova介绍

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

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

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之间的)唯一区别是下载的包的名字，这会持续一段时间(加重语气)。”

ng-cordova安装与使用

下载ng-cordova
bower install ngCordova

引入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>

引入ng-cordova的依赖

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

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

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

cordova plugin add ...

使用

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

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

解析：

终端：ios端
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
意思为：隐藏键盘附件栏
cordova.plugins.Keyboard.disableScroll(true);

iOS平台注意事项

如果在input获取焦点时，你app的内容（包含header）被挤到上面或视图以外，就需要尝试设置cordova.plugins.Keyboard.disableScroll(true)。这并不会在Ionic滚动视图中禁用滚动，相反，它会禁用原生的滚动溢出，当自动发生input获取焦点在键盘之后时。