当前位置:   article > 正文

AngularJS Cordova插件介绍_ng-cordova.js 作用

ng-cordova.js 作用

http://blog.csdn.net/offbye/article/details/38398181

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

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

       目前ngCordova提供了二维码扫描,摄像头,联系人,设备信息,网络信息等插件的支持。    

下面是ngCordova示例和文档的简单介绍。

PS:这个ngCordova简直是太好用了。本来还在痛苦的debug为什么Phonegap.camera不work,以及怎么把barcode scanner整合到angularjs里面,无意中就发现了这个转载的api,就那么两句话,所有问题迎刃而解。

注意,使用这个插件之前一定不要忽略执行cordova plugin add + 相应url这个命令下载相应的代码,否则插件跑不起来。我的barcode scanner开始不起作用就是这个原因。

这个插件的git和网站:

https://github.com/driftyco/ng-cordova

http://ngcordova.com/docs/

Examples and Docs

To use any of the plugin wrappers below, all you need to do is link to the ng-cordova.js file in your app. Then, include ngCordova as a dependency in your angular module:

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

NOTE: Include ng-cordova.js in your index.html file before cordova.js:

  1. <script src="lib/ngCordova/dist/ng-cordova.js"></script>
  2. <script src="cordova.js"></script>

$cordovaBarcodeScanner

The Barcode Scanner Plugin opens a camera view and automagically scans a barcode, returning the data back to you. View Official Docs

cordova plugin add https://github.com/wildabeast/BarcodeScanner.git
  1. module.controller('BarcodeScannerCtrl', function($scope, $cordovaBarcodeScanner) {
  2. $scope.scanBarcode = function() {
  3. $cordovaBarcodeScanner.scan().then(function(imageData) {
  4. // Success! Barcode data is here
  5. }, function(err) {
  6. // An error occured. Show a message to the user
  7. });
  8. };
  9. // NOTE: encoding not functioning yet
  10. $scope.encodeData = function() {
  11. $cordovaBarcodeScanner.encode(BarcodeScanner.Encode.TEXT_TYPE, "http://www.nytimes.com").then(function(success) {
  12. // Success!
  13. }, function(err) {
  14. // An error occured. Show a message to the user
  15. });
  16. }
  17. });

$cordovaCamera

This service makes it easy to use the org.apache.cordova.camera plugin to take pictures and video from a device. View Official Docs

cordova plugin add org.apache.cordova.camera
  1. module.controller('PictureCtrl', function($scope, $cordovaCamera) {
  2. $scope.takePicture = function() {
  3. var options = {
  4. quality : 75,
  5. destinationType : Camera.DestinationType.DATA_URL,
  6. sourceType : Camera.PictureSourceType.CAMERA,
  7. allowEdit : true,
  8. encodingType: Camera.EncodingType.JPEG,
  9. targetWidth: 100,
  10. targetHeight: 100,
  11. popoverOptions: CameraPopoverOptions,
  12. saveToPhotoAlbum: false
  13. };
  14. $cordovaCamera.getPicture(options).then(function(imageData) {
  15. // Success! Image data is here
  16. }, function(err) {
  17. // An error occured. Show a message to the user
  18. });
  19. }
  20. });

View Camera Options

$cordovaContacts

A powerful way to create, remove, and search through contacts on the device.

cordova plugin add org.apache.cordova.contacts
  1. module.controller('MyCtrl', function($scope, $cordovaContacts) {
  2. $scope.addContact = function() {
  3. $cordovaContacts.save($scope.contactForm).then(function(result) {
  4. // Contact saved
  5. }, function(err) {
  6. // Contact error
  7. });
  8. };
  9. // Many more features will be added shortly
  10. });

$cordovaDevice

Grab device related information, such as platform, and device model.

cordova plugin add org.apache.cordova.device
  1. module.controller('MyCtrl', function($scope, $cordovaDevice) {
  2. var device = $cordovaDevice.getDevice();
  3. var cordova = $cordovaDevice.getCordova();
  4. var model = $cordovaDevice.getModel();
  5. var platform = $cordovaDevice.getPlatform();
  6. var uuid = $cordovaDevice.getUUID();
  7. var version = $cordovaDevice.getVersion();
  8. });

$cordovaDeviceMotion

Get access to the device's accelerometer. View Official Docs

cordova plugin add org.apache.cordova.device-motion
  1. module.controller('DeviceMotionCtrl', function($scope, $cordovaDeviceMotion) {
  2. var watch;
  3. $scope.getAcceleration = function () {
  4. $cordovaDeviceMotion.getCurrentAcceleration().then(function(result) {
  5. // Success!
  6. }, function(err) {
  7. // An error occured. Show a message to the user
  8. });
  9. };
  10. $scope.watchAcceleration = function () {
  11. var options = { frequency: 1000 }; // Update every 1 second
  12. watch = $cordovaDeviceMotion.watchAcceleration(options);
  13. watch.promise.then(
  14. function() {/* unused */},
  15. function(err) {},
  16. function(acceleration) {
  17. $cordovaDialogs.alert('Acceleration X: ' + acceleration.x + '\n' +
  18. 'Acceleration Y: ' + acceleration.y + '\n' +
  19. 'Acceleration Z: ' + acceleration.z + '\n' +
  20. 'Timestamp: ' + acceleration.timestamp + '\n');
  21. });
  22. };
  23. $scope.clearWatch = function() {
  24. // use watchID from watchAccelaration()
  25. if(!watch) { return; }
  26. $cordovaDeviceMotion.clearWatch(watch.watchId).then(function(result) {
  27. // Success!
  28. }, function(err) {
  29. // An error occured. Show a message to the user
  30. });
  31. }
  32. });

$cordovaDeviceOrientation

Get access to the device's compass. View Official Docs

cordova plugin add org.apache.cordova.device-orientation
  1. module.controller('DeviceOrientationCtrl', function($scope, $cordovaDeviceOrientation) {
  2. $cordovaDeviceOrientation.getCurrentHeading().then(function(result) {
  3. // Success!
  4. }, function(err) {
  5. // An error occured. Show a message to the user
  6. });
  7. var options = { frequency: 1000 }; // Update every 1 second
  8. var watch = $cordovaDeviceOrientation.watchHeading(options);
  9. watch.promise.then(function(result) { /* unused */ },
  10. function(err) {
  11. // An error occured. Show a message to the user
  12. }, function(position) {
  13. // Heading comes back in
  14. // position.magneticHeading
  15. });
  16. $cordovaDeviceOrientation.clearWatch(watch.watchId).then(function(result) {
  17. // Success!
  18. }, function(err) {
  19. // An error occured. Show a message to the user
  20. });
  21. });

$cordovaDialogs

Trigger alert, confirm, and prompt windows, or send beeps (beep, beep!)

cordova plugin add org.apache.cordova.dialogs
  1. module.controller('MyCtrl', function($scope, $cordovaDialogs) {
  2. $cordovaDialogs.alert('Wow!');
  3. $cordovaDialogs.confirm('Are you sure?');
  4. $cordovaDialogs.prompt('Please Login');
  5. // beep 3 times
  6. $cordovaDialogs.beep(3);
  7. });

$cordovaFile

A Plugin to get access to the device's files and directories. View Official Docs

cordova plugin add org.apache.cordova.file
  1. module.controller('MyCtrl', function($scope, $cordovaFile) {
  2. $cordovaFile.checkDir(directory).then(function(result) {
  3. // Success!
  4. }, function(err) {
  5. // An error occured. Show a message to the user
  6. });
  7. // parameters: directory, replace (boolean)
  8. $cordovaFile.createDir(directory, false).then(function(result) {
  9. // Success!
  10. }, function(err) {
  11. // An error occured. Show a message to the user
  12. });
  13. $cordovaFile.checkFile(directory, file).then(function(result) {
  14. // Success!
  15. }, function(err) {
  16. // An error occured. Show a message to the user
  17. });
  18. // parameters: directory, file, replace (boolean)
  19. $cordovaFile.createFile(directory, file, true).then(function(result) {
  20. // Success!
  21. }, function(err) {
  22. // An error occured. Show a message to the user
  23. });
  24. $cordovaFile.removeFile(directory, file).then(function(result) {
  25. // Success!
  26. }, function(err) {
  27. // An error occured. Show a message to the user
  28. });
  29. // doesn't function at the moment
  30. $cordovaFile.writeFile(directory, file).then(function(result) {
  31. // Success!
  32. }, function(err) {
  33. // An error occured. Show a message to the user
  34. });
  35. // Reads a file as TEXT
  36. $cordovaFile.readFile(directory, file).then(function(result) {
  37. // Success!
  38. }, function(err) {
  39. // An error occured. Show a message to the user
  40. });
  41. // parameters: source, filePath, trust all hosts (boolean), options
  42. $cordovaFile.downloadFile(source, filePath, true, options).then(function(result) {
  43. // Success!
  44. }, function(err) {
  45. // An error occured. Show a message to the user
  46. });
  47. // parameters: source, filePath, options
  48. $cordovaFile.uploadFile(server, filePath, options).then(function(result) {
  49. // Success!
  50. }, function(err) {
  51. // An error occured. Show a message to the user
  52. });
  53. });

$cordovaGeolocation

Grab the current location of the user, or grab continuous location changes: View Official Docs

cordova plugin add org.apache.cordova.geolocation
  1. module.controller('MyCtrl', function($scope, $cordovaGeolocation) {
  2. $cordovaGeolocation.getCurrentPosition().then(function(position) {
  3. // Position here: position.coords.latitude, position.coords.longitude
  4. }, function(err) {
  5. // error
  6. });
  7. var watch = $cordovaGeolocation.watchPosition({
  8. frequency: 1000
  9. });
  10. watch.promise.then(function() {
  11. // Not currently used
  12. }, function(err) {
  13. // An error occured. Show a message to the user
  14. }, function(position) {
  15. // Active updates of the position here
  16. // position.coords.latitude/longitude
  17. });
  18. });

$cordovaGlobalization

Obtains information and performs operations specific to the user's locale and timezone. View Official Docs

cordova plugin add org.apache.cordova.globalization
  1. module.controller('MyCtrl', function($scope, $cordovaGlobalization) {
  2. $cordovaGlobalization.getPreferredLanguage().then(
  3. function(result) {
  4. // result
  5. },
  6. function(error) {
  7. // error
  8. });
  9. $cordovaGlobalization.getLocaleName().then(
  10. function(result) {
  11. // result
  12. },
  13. function(error) {
  14. // error
  15. });
  16. $cordovaGlobalization.getFirstDayOfWeek().then(
  17. function(result) {
  18. // result
  19. },
  20. function(error) {
  21. // error
  22. });
  23. // Soon implemented:
  24. // dateToString
  25. // stringToDate
  26. // getDatePattern
  27. // getDateNames
  28. // isDayLightSavingsTime
  29. // numberToString
  30. // stringToNumber
  31. // getNumberPattern
  32. // getCurrencyPattern
  33. });

$cordovaNetwork

Check network connection types, and track offline and online status. View Official Docs

cordova plugin add org.apache.cordova.network-information
  1. module.controller('MyCtrl', function($scope, $cordovaNetwork) {
  2. var type = $cordovaNetwork.getNetwork();
  3. var isOnline = $cordovaNetwork.isOnline();
  4. var isOffline = $cordovaNetwork.isOffline();
  5. });

View Network Types

$cordovaPinDialog

Numeric password dialog.

cordova plugin add https://github.com/Paldom/PinDialog.git
  1. module.controller('MyCtrl', function($scope, $cordovaPush) {
  2. $cordovaPinDialog.prompt('Some message here').then(
  3. function(result) {
  4. // result
  5. },
  6. function (error) {
  7. // error
  8. })
  9. });

$cordovaPush

Allows your application to receive push notifications View Official Docs

cordova plugin add https://github.com/phonegap-build/PushPlugin.git
  1. module.controller('MyCtrl', function($scope, $cordovaPush) {
  2. var androidConfig = {
  3. "senderID":"replace_with_sender_id",
  4. "ecb":"onNotification"
  5. };
  6. var iosConfig = {
  7. "badge":"true",
  8. "sound":"true",
  9. "alert":"true",
  10. "ecb":"onNotificationAPN"
  11. };
  12. $cordovaPush.register(config).then(function(result) {
  13. // Success!
  14. }, function(err) {
  15. // An error occured. Show a message to the user
  16. });
  17. $cordovaPush.unregister(options).then(function(result) {
  18. // Success!
  19. }, function(err) {
  20. // An error occured. Show a message to the user
  21. });
  22. // iOS only
  23. $cordovaPush.setBadgeNumber(2).then(function(result) {
  24. // Success!
  25. }, function(err) {
  26. // An error occured. Show a message to the user
  27. });
  28. });

$cordovaSocialSharing

Social Sharing plugin.

cordova plugin add https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git
  1. module.controller('MyCtrl', function($scope, $cordovaSocialSharing) {
  2. $cordovaSocialSharing.shareViaTwitter(message, image, link).then(function(result) {
  3. // Success!
  4. }, function(err) {
  5. // An error occured. Show a message to the user
  6. });
  7. $cordovaSocialSharing.shareViaWhatsApp(message, image, link).then(function(result) {
  8. // Success!
  9. }, function(err) {
  10. // An error occured. Show a message to the user
  11. });
  12. $cordovaSocialSharing.shareViaFacebook(message, image, link).then(function(result) {
  13. // Success!
  14. }, function(err) {
  15. // An error occured. Show a message to the user
  16. });
  17. // access multiple numbers in a string like: '0612345678,0687654321'
  18. $cordovaSocialSharing.shareViaSMS(message, number).then(function(result) {
  19. // Success!
  20. }, function(err) {
  21. // An error occured. Show a message to the user
  22. });
  23. // TO, CC, BCC must be an array, Files can be either null, string or array
  24. $cordovaSocialSharing.shareViaEmail(message, subject, toArr, bccArr, file).then(
  25. function(result) {
  26. // Success!
  27. }, function(err) {
  28. // An error occured. Show a message to the user
  29. });
  30. $cordovaSocialSharing.canShareVia(socialType, message, image, link).then(
  31. function(result) {
  32. // Success!
  33. }, function(err) {
  34. // An error occured. Show a message to the user
  35. });
  36. });

$cordovaSpinnerDialog

A dialog with a spinner wheel. View Official Docs

cordova plugin add https://github.com/Paldom/SpinnerDialog.git
  1. module.controller('MyCtrl', function($scope, $cordovaSpinnerDialog) {
  2. // Show spinner dialog with message
  3. // Title and message only works on Android
  4. $cordovaSpinnerDialog.show("title","message");
  5. // Hide spinner dialog
  6. $cordovaSpinnerDialog.hide();
  7. });

$cordovaSplashscreen

Show or hide the Splash Screen.

cordova plugin add org.apache.cordova.splashscreen
  1. module.controller('MyCtrl', function($scope, $cordovaSplashscreen) {
  2. $cordovaSplashscreen.show();
  3. });

$cordovaStatusbar

Configure the device's StatusBar with colors and styles.

cordova plugin add org.apache.cordova.statusbar
  1. module.controller('MyCtrl', function($scope, $cordovaStatusbar) {
  2. $cordovaStatusbar.overlaysWebView(true);
  3. // styles: Default : 0, LightContent: 1, BlackTranslucent: 2, BlackOpaque: 3
  4. $cordovaStatusbar.style(1);
  5. // supported names: black, darkGray, lightGray, white, gray, red, green,
  6. // blue, cyan, yellow, magenta, orange, purple, brown
  7. $cordovaStatusbar.styleColor('black');
  8. $cordovaStatusbar.styleHex('#000');
  9. $cordovaStatusbar.hide();
  10. $cordovaStatusbar.show();
  11. var isVisible = $cordovaStatusbar.isVisible();
  12. });

$cordovaToast

This plugin allows you to show a native Toast (a little text popup) on iOS, Android and WP8. It's great for showing a non intrusive native notification which is guaranteed always in the viewport of the browser.View Official Docs

cordova plugin add https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git

You have two choices to make when showing a Toast: where to show it and for how long.

  • show(message, duration, position)
    • duration: 'short', 'long'
    • position: 'top', 'center', 'bottom'

You can also use any of these convenience methods:

  • showShortTop(message)
  • showShortCenter(message)
  • showShortBottom(message)
  • showLongTop(message)
  • showLongCenter(message)
  • showLongBottom(message)
  1. module.controller('MyCtrl', function($scope, $cordovaVibration) {
  2. $cordovaToast.show('Here is a message', 'long', 'center').then(function(success) {
  3. // success
  4. }, function (error) {
  5. // error
  6. });
  7. $cordovaToast.showShortTop('Here is a message').then(function(success) {
  8. // success
  9. }, function (error) {
  10. // error
  11. });
  12. $cordovaToast.showLongBotton('Here is a message').then(function(success) {
  13. // success
  14. }, function (error) {
  15. // error
  16. });
  17. });

$cordovaVibration

Vibrate the device programatically. View Official Docs

cordova plugin add org.apache.cordova.vibration
  1. module.controller('MyCtrl', function($scope, $cordovaVibration) {
  2. // Vibrate 100ms
  3. $cordovaVibration.vibrate(100);
  4. });

$cordovaCapture

This plugin allows you to record sound, video and images throught the native capabilities of the deviceView Official Docs

cordova plugin add org.apache.cordova.media-capture
  1. module.controller('MyCtrl', function($scope, $cordovaCapture) {
  2. $scope.captureAudio = function() {
  3. var options = { limit: 3, duration: 10 };
  4. $cordovaCapture.captureAudio(options).then(function(audioData) {
  5. // Success! Audio data is here
  6. }, function(err) {
  7. // An error occured. Show a message to the user
  8. });
  9. }
  10. $scope.captureImage = function() {
  11. var options = { limit: 3 };
  12. $cordovaCapture.captureImage(options).then(function(imageData) {
  13. // Success! Image data is here
  14. }, function(err) {
  15. // An error occured. Show a message to the user
  16. });
  17. }
  18. $scope.captureVideo = function() {
  19. var options = { limit: 3, duration: 15 };
  20. $cordovaCapture.captureVideo(options).then(function(videoData) {
  21. // Success! Video data is here
  22. }, function(err) {
  23. // An error occured. Show a message to the user
  24. });
  25. }
  26. });

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/喵喵爱编程/article/detail/749023
推荐阅读
相关标签
  

闽ICP备14008679号