Ionic 添加ngCordova插件

Ionic只是個前端框架，與bootstrap差不多，不過他是專門爲移動端設計的， 在效果上接近原生的app,如果你的應用只涉及到前端的東西，那麼你可能不會涉及到ngCordova插件，這是phoneGap的改名叫法。如果我們應用要用到一些底層的東西，如：拍照，文件，數據庫，狀態欄，設備等等這些原生的東西，那麼你就得要好好的學習下ngCordova提供的想着插件。

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。

在這裏給出ngCordova的官網安裝地址，接下來會用中文簡介下步驟，方便天朝不想看英文的同仁，地址：http://ngcordova.com/docs/install/。 
在官網上提供了兩種方法安裝：

1. 使用bower來安裝，前提是你得安裝了bower，而且相關權限要配置好了，然後一條命令解決，命令如下：bower install ngCordova，安裝bower在此不再說明，自行查百度。
2. 直接下載源文件，然後拷貝到相關目錄下，簡單直接，本人就喜歡這樣的，下載地址官網也給出，在此再列出：下載，他是開源的，源文件放在github上，github就不要再說了吧，搞程序的都知道，地址：https://github.com/driftyco/ng-cordova。

如果你是下載源文件的方法，記得把文件目錄中的dist目錄拷貝到你的應用目錄中，比如： 

直接拷貝dist目錄到你的應用www/lib/ngCordova/dist下，目錄隨便了，在引入的時候路徑對就行了。 
拷貝完成後，就要在index.html文件中的cordova.js文件前引入，如：

<!-- cordova script (this will be a 404 during development) -->
    <script type="text/javascript" src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>

• 1
• 2
• 3

然後注入到你的angular模塊中，本人的在app.js中，如：

var app = angular.module('starter', ['ionic','ngCordova']);

• 1

到了這步，設置已經完成了，接下來是使用他，官網建議在使用是判斷設備是否就緒，如：

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

// OR with IONIC

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

我們一般使用是在controller中，在使用之前記得要添加相關的插件到我們工程中才能使用，比如本人的應用，在初始化時ionic已經添加了一定的插件，你可以查看你的plugin目錄查看相關插件。 

最後是怎麼使用他，本人列出我自己使用的一個小demo,使用插件$cordovaDevice，獲取平臺信息，如：

module.controller('HomeCtrl', function($scope, $cordovaDevice) {
    $scope.isIOS = function(){
        //Returns String — eg: "iOS", "Android", "WinCE"
        var platform = $cordovaDevice.getPlatform();
        platform = platform.toLowerCase();
        if(platform == "iOS"){
            return true;
        }
        return false;
    }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

瞭解更多想着插件的使用方法，請訪問官網，官網插件地址http://ngcordova.com/docs/plugins/

原網址：

http://blog.csdn.net/shenshucong520/article/details/48317065

https://www.cnblogs.com/Jeely/p/6685914.html