Ionic系列——使用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安裝與使用

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/