2. 程式人生 > >ngCordova外掛(0)-ngCordova外掛的使用詳解_序

ngCordova外掛(0)-ngCordova外掛的使用詳解_序

阿新 • • 發佈：2019-01-31

當我們在開發基於Cordova+AngularJS的這種HybridAPP時，當我們遇到了前端框架不能解決的一些問題時，比如呼叫相機，相簿，瀏覽器等這些操作時，使用外掛就是我們的解決方法。
ngCordova是Cordova和AngularJS的結合，將Cordova外掛封裝成了一個個AngularJS式的服務。


無論使用的是OnsenUI還是Ionic框架開發專案，只要是基於Cordova+AngularJS的，都可以使用ngCordova外掛
下面我介紹一下使用ngCordova外掛需要主要的事項
1.安裝：
1-1：獲取原始檔：用'bower'命令來安裝ngCordova或下載Zip壓縮包
$ bower install ngCordova

1-2：將ng-cordova.js或ng-cordova.min.js包含到工程的index.html中，需要注意的是，引入的位置一定要在cordova.js之前，在angular.js之後，因為三者的依賴關係是cordova.js依賴ng-cordova.js依賴angular.js，雖然引入了cordova.js，但是事實上並沒有這個檔案，但是這行程式碼卻必須引入。

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

2.將ngCordova作為Angular依賴注入angular模組中：

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

3.用Cordova命令列將外掛加入到專案中：

示例：cordova plugin add https://github.com/EddyVerbruggen/cordova-plugin-actionsheet.git

cordova plugin add為cordova加入外掛的命令，後面的網址是外掛的地址，每種外掛的地址可以檢視官網每個外掛的文件

Cordova常見問題：（很重要）
Cordova外掛並不總是能夠正確安裝，未知外掛問題或其他問題通常都是很難去除錯和理解的，以下幾點是提供大家解決外掛不可用問題的提示。
1.一定要在手機上測試或除錯


Cordova外掛通常都不會在瀏覽器上工作，因為每個外掛都進入到一個特定的API（相機，話筒等）。同時有些外掛也是不支援模擬器的（所以經常懶得打包，用Phonegap去測試的各位要注意了！），所以測試外掛時，打包好安裝包，放在手機上去測試是很必要的
2.將外掛包在"diviceready"事件中，
在使用外掛之前，你要確定你的手機是否有相關的裝置（相機，陀螺儀，溫度感應這些硬體裝置），如果外掛可用，使用叫做"diviceready"的原生cordova事件，使用如下：

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

3.確保你在使用最新版本的Cordova命令列

$npm install -g cordova

4.重新整理ios.json/android.json檔案（在/plugin資料夾內）

$ cordova platform rm [ios/android]
$ cordova platform add [ios/android]

5.更新工程到最新版本Cordova
以下命令將cordova.js和依賴Cordova的其他檔案更新到最新版本

$ cordova platform update [ios/android]

以上就是安裝，除錯ngCordova外掛的步驟
下面列舉ngCordova中都有哪些外掛，供大家參考

1.ActionSheet（動作列表）這個有些框架封裝了不需使用(如ionic)但有些框架也沒有這個元件(如OnsenUI)

連結：http://ngcordova.com/docs/plugins/actionSheet/

2.AdMob（廣告外掛）從JavaScript中將廣告加入到APP中

連結：http://ngcordova.com/docs/plugins/adMob/

3.APP是否安裝（AppAvailability）檢查手機中是否安裝了某個App

連結：http://ngcordova.com/docs/plugins/appAvailability/

4.AppRate（App評分外掛）讓使用者可以選擇是"現在"/"以後"/還是"從不"去對你的APP進行打分到應用商店

連結:http://ngcordova.com/docs/plugins/appRate/

5.AppVersion（獲取App版本的外掛）

連結：http://ngcordova.com/docs/plugins/appVersion/

6.Badge（修改App圖示上的訊息提示數量外掛）包括IOS/Android/WindowPhone

連結：http://ngcordova.com/docs/plugins/badge/

7.Background Geoloc（後臺定位外掛）

連結：http://ngcordova.com/docs/plugins/backgroundGeolocation/

8.Battery Status（電量檢測）

連結：http://ngcordova.com/docs/plugins/batteryStatus/

9.Barcode Scanner（條形碼/二維碼掃描外掛）開啟相機並自動掃描條形碼/二維碼（華勤專案中使用過）

連結：http://ngcordova.com/docs/plugins/barcodeScanner/

10.Calendar（日曆外掛）日曆外掛允許在手機預設日曆App上操作時間

連結：http://ngcordova.com/docs/plugins/calendar/

11.Camera（相機外掛）開啟手機相機來拍照或錄影的外掛（多個專案使用過）

連結：http://ngcordova.com/docs/plugins/camera/

12.Capture（捕獲外掛）呼叫手機硬體來錄音頻，視訊，或照片的外掛

連結：http://ngcordova.com/docs/plugins/capture/

13.Clipboard（剪貼簿外掛）

連結：http://ngcordova.com/docs/plugins/clipboard/

14.Contacts（聯絡人外掛）可以建立，移除，查詢手機上聯絡人的外掛

連結：http://ngcordova.com/docs/plugins/contacts/

15.DatePicker（日期選擇器外掛）用來選擇日期的外掛

連結：http://ngcordova.com/docs/plugins/datePicker/

16.Device（裝置資訊捕獲外掛）抓取裝置相關資訊，例如系統平臺，裝置型號

連結：http://ngcordova.com/docs/plugins/device/

17.DeviceMotion（裝置加速器外掛）通過手機的加速器，檢測手機根據當前方位做出的運動改變

連結：http://ngcordova.com/docs/plugins/deviceMotion/

18.DeviceOrientation（手機方位外掛）通過手機的羅盤，檢測到手機指向的方向，從0度到359.9度

連結：http://ngcordova.com/docs/plugins/deviceOrientation/

19.Dialogs（對話方塊外掛）出發提示框或發出嘀嘀嘀的聲音

連結：http://ngcordova.com/docs/plugins/dialogs/

20.EmailComposer（Email外掛）通過標準介面可以編輯或傳送Email郵件的外掛

連結：http://ngcordova.com/docs/plugins/emailComposer/

21.Facebook（Facebook連線外掛）獲取進入FacebookAPP的許可權，外掛需要預安裝


連結：http://ngcordova.com/docs/plugins/facebook/

22.File（進入手機儲存中檔案/資料夾的外掛）

連結：http://ngcordova.com/docs/plugins/file/

23.FileTransfer（檔案傳輸外掛）用來上傳和下載檔案的外掛

連結：http://ngcordova.com/docs/plugins/fileTransfer/

24.FileOpener（檔案啟動器）用手機系統以檔案預設使用的APP開啟一個檔案

連結：http://ngcordova.com/docs/plugins/fileOpener2/

25.Flashlight（手電筒外掛）開啟手機相機的閃光燈作為手電筒的外掛

連結：http://ngcordova.com/docs/plugins/flashlight/

26.Geolocation（獲取當前使用者的位置或持續的位置變化的外掛）

連結：http://ngcordova.com/docs/plugins/geolocation/

27.Globalization（獲取使用者當前場所或時區的外掛）

連結：http://ngcordova.com/docs/plugins/globalization/

28.GoogleAnalytics（連線谷歌Universal Analytics SDK 3.0（谷歌的一套分析工具）的外掛）

連結：http://ngcordova.com/docs/plugins/googleAnalytics/

29.HealthKit（可以進入IOS手機中的HealthKit的外掛）僅限IOS系統

連結：http://ngcordova.com/docs/plugins/healthkit/

30.iBeacon（通過藍芽以及唯一的標示碼來檢測相匹配的app或手機系統，標識碼可以用來顯示手機的具體位置或執行基於位置的操作）

連結：http://ngcordova.com/docs/plugins/beacon/

31.ImagePicker（圖片選擇器外掛）

連結：http://ngcordova.com/docs/plugins/imagePicker/

32.InAppBrowser（在APP中介面開啟網頁的外掛）

連結：http://ngcordova.com/docs/plugins/inAppBrowser/

33.Instagram（開啟InstagramAPP中圖片的外掛）

連結：http://ngcordova.com/docs/plugins/instagram/

34.Keyboard（用Cordova進入IOS系統鍵盤的外掛）僅限IOS系統

連結：http://ngcordova.com/docs/plugins/keyboard/

35.Keychain（用Cordova進去IOS手機Keychain的外掛(Keychain是IOS用來儲存密碼證書一類的東西)）僅限IOS系統

連結：http://ngcordova.com/docs/plugins/keychain/

36.Launch Navigator（進入手機導航工具的外掛）從起始地到終點

連結：http://ngcordova.com/docs/plugins/launchNavigator/

37.LocalNotification（本地提示外掛）當某個程式沒有執行卻又收到的通知時，這個外掛就起作用了

連結：http://ngcordova.com/docs/plugins/localNotification/

38.Meida（在手機上記錄和回播音訊檔案的外掛）

連結：http://ngcordova.com/docs/plugins/media/

39.NativeAudio（Cordova3.5以上針對HTML5遊戲和音訊APP類的處理外掛）

連結：http://ngcordova.com/docs/plugins/nativeAudio/

40.Network（檢測手機網路連線狀況的外掛，wifi/手機網路）

連結：http://ngcordova.com/docs/plugins/network/

41. OAuth（當APP和多個平臺做關聯時，用來管理瀏覽器流程的外掛）

連結：http://ngcordova.com/docs/plugins/oauth/

42.Pin Dialog（數字密碼對話方塊外掛）

連結：http://ngcordova.com/docs/plugins/pinDialog/

43.Preference（獲得手機APP偏好設定的外掛）

連結：http://ngcordova.com/docs/plugins/preferences/

44.Printer（連結印表機的外掛）

連結：http://ngcordova.com/docs/plugins/printer/

45.ProgressIndicator（多種供使用者選擇進度條來下載或載入時使用的外掛）

連結：http://ngcordova.com/docs/plugins/progressIndicator/

46.Push Notifications（允許你的程式接收推送訊息的外掛）

連結：http://ngcordova.com/docs/plugins/pushNotifications/

47.SMS（呼叫IOS或Android預設傳送簡訊APP的外掛）

連結：http://ngcordova.com/docs/plugins/sms/

48.Social Sharing（呼叫Facebook，Twitter等社交APP分享的外掛）

連結：http://ngcordova.com/docs/plugins/socialSharing/

49.SpinnerDialog（帶有下拉框的對話方塊的外掛）

連結：http://ngcordova.com/docs/plugins/spinnerDialog/

50.SplashScreen（顯示或隱藏SplashScreen的外掛）

連結：http://ngcordova.com/docs/plugins/splashscreen/

51.SQLite（用Cordova本地呼叫SQLite的外掛）

連結：http://ngcordova.com/docs/plugins/sqlite/

52.StatusBar（設定狀態列顏色和樣式的外掛）

連結：http://ngcordova.com/docs/plugins/statusbar/

53.Toast（在手機上顯示本地提示框的外掛）

連結：http://ngcordova.com/docs/plugins/toast/

54.TouchID（允許在APP中使用IOS系統TouchID的外掛）僅限IOS系統

連結：http://ngcordova.com/docs/plugins/touchID/

55.Vibration（讓手機震動的外掛）

連結：http://ngcordova.com/docs/plugins/vibration/

56.ZIP（解壓zip格式的壓縮包）

連結：http://ngcordova.com/docs/plugins/zip/

相關推薦

ngCordova外掛(0)-ngCordova外掛的使用詳解_序

當我們在開發基於Cordova+AngularJS的這種HybridAPP時，當我們遇到了前端框架不能解決的一些問題時，比如呼叫相機，相簿，瀏覽器等這些操作時，使用外掛就是我們的解決方法。 ngCordova是Cordova和AngularJS的結合，將Cordova外

SOFATracer 外掛埋點機制詳解

SOFATracer 是一個用於分散式系統呼叫跟蹤的元件，通過統一的 traceId 將呼叫鏈路中的各種網路呼叫情況以日誌的方式記錄下來，以達到透視化網路呼叫的目的。這些日誌可用於故障的快速發現，服務治理等。 從 RoadMap 和 PR 來看，目前 SOFATracer 已經支援了豐富的元件外掛

圖片佔位符外掛holder.js用法詳解

holder.js 可以幫我們快速生成佔位圖片，而且還能定義佔點陣圖片的一些基本樣式。 用法簡單，可以直接去官網下載，或直接引用Bootcss的CDN : <script src="https://cdn.bootcss.com/holder/2.9.4/holder.j

在Eclipse上安裝外掛springsource-tool-suite詳解，完美不報錯！以及yml無自動提示？

在Eclipse上操作springboot過程中，開啟yml檔案時，為何沒有提示訊息？ 答：提示訊息是需要eclipse的一個叫sts的外掛支援的。 為何在eclipse上線上安裝springsource-tool-suite外掛時，總報錯，安裝不成功？ 那麼我們需要離

在Eclipse上安裝外掛springsource-tool-suite詳解，完美不報錯！&&yml為何沒有提示訊息？

在Eclipse上操作springboot過程中，開啟yml檔案時，為何沒有提示訊息？ 答：提示訊息是需要eclipse的一個叫sts的外掛支援的。 為何在eclipse上線上安裝springsour

關於bootstrap-datetimepicker 外掛的配置引數詳解

所有需要"Date" 的選項都可以處理Date 物件; a String formatted according to the given format; or a timedelta relative to today, eg '-1d', '+6m +1y', etc, where valid uni

全網最詳細的如何在谷歌瀏覽器里正確下載並安裝Postman【一款功能強大的網頁除錯與傳送網頁HTTP請求的Chrome外掛】（圖文詳解）

 　　　　不多說，直接上乾貨！ 　　　　想必，玩過Java Web的你，肯定是對於http post和get等請求測試的過程記憶猶新吧。 　　　　Postman的安裝方法分好幾種，主要分為兩種安裝模式介紹： 　　　　　　（1）chrome瀏覽器postman 外掛安裝  【本

【筆記】webpack4.0教程_配置詳解_圖文_新手入門_快速上手

前言 這篇筆記會從node安裝開始，到搭建基礎的webpack環境為止。中間每一步的配置和遇到的術語、名詞，我都會做簡單的解釋。 同時，這篇博文是一篇記錄我學習webpack的過程筆記，因為我也在學習過程，如果有記述錯誤之處，歡迎指正。 【注：全程系統環境

select2外掛的disabled功能詳解

最近做專案用到了select2外掛，需求中需要給下拉框設定預設值之後，禁用下拉框，我開始的寫法是這樣的： <select class="js-example"></select> <script type="text/java

Unity Steam_VR VRTK開發外掛自帶案例詳解（一）

原文地址：http://www.52vr.com/article-665-1.html  DEMO 1  查詢硬體手柄頭顯 在VRTK外掛 的第一個demo   001_CameraRig_VR_PlayArea 案例 這個demo 顯示的功能:  按下任一手柄上

Maven學習總結（27）——Maven自定義打包外掛maven-assembly-plugin詳解

Assembly外掛會生成 “assemblies”， 此特性等同於的Maven 1 distribution plug-in.。該外掛不僅支援建立二進位制歸檔檔案，也支援建立原始碼歸檔檔案。這些as

【eclipse外掛開發實戰】 Eclipse外掛開發6——eclipse線上翻譯外掛Translator開發例項詳解

Eclipse外掛開發6——eclipse線上翻譯外掛Translator開發例項詳解         在上一篇文章中講到了一個簡單的eclipse外掛開發例項，主要是對外掛工程的基本建立步驟進行了講解，這篇文章當中給出一個翻譯小外掛的例項，呼叫有道翻譯API實現實時取

Cordova外掛開發（2）-Android外掛安裝包製作詳解

本篇文章講述的是如何製作自己的Cordova外掛安裝包（Android），具體內容包括以下三個方面： 1，安裝和使用plugman； 2，開發自己的Cordova外掛安裝包； 3，外掛安裝包的安裝與解除安裝； 本篇文章以自定義加密壓縮檔案外掛的實踐過程為例，本人不會IOS，

AngularJS4.0環境搭建詳解--windows系統環境

class images 開發 安裝 hub 詳解 ans win 總結 第一步：安裝NodeJS 　　下載最新版的NodeJS並安裝，安裝完成後打開CMD命令行，輸入以下命令： 　　node -v 　　若返回類似版本號則代表NodeJS安裝成功，如下： 　　 第二部

UML類圖詳解_關聯關系_多對多

col c++代碼 一個 image 技術 pub 每一個 push_back cnblogs 在關聯關系中，很多情況下我們的多重性並不是多對一或者一對多的，而是多對多的。 不過因為我們要考慮裏面的導航性，如果直接搞的話就是需要去維護兩群對象之間多對多的互指鏈接，這就

UML類圖詳解_聚合關系

聚合 分享 產生 .com 特殊 begin blank .html 表達 結合UML關系，以看臺和基金來介紹聚合關系 aggregation，是一種特殊的關聯關系，既有關聯關系的特質，還獨有“整體 —— 部分（whole &md

CentOS下安裝配置MySQL8.0的步驟詳解

下載yum源的安裝包  yum localinstall https://repo.mysql.com//mysql80-community-release-el7-1.noarch.rpm 安裝 yum install mysql-community-server 啟動

Servlet 3 0 新特性詳解

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

Spring Security 5.0的DelegatingPasswordEncoder詳解

地理 The 不同的 fault wpa 存在 版本 直接 tex 本文參考自Spring Security 5.0.4.RELEASE 的官方文檔，結合源碼介紹了 DelegatingPasswordEncoder，對其工作過程進行分析並解決其中遇到的問題。包括 Ther

Tiniux 3.0 Memory.c 詳解 -- OSMemFree

--------------------------------------------- -- 時間：2018-11-14 -- 建立人：Ruo_Xiao -- 郵箱：[email protected] ----------------------------------------