AngularJS Cordova插件介绍

素颜马尾好姑娘i 2022-08-10 16:53 221阅读 0赞

##  ##

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

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

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

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

## 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`:

### `$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

module.controller('BarcodeScannerCtrl', function($scope, $cordovaBarcodeScanner) { 
    
      $scope.scanBarcode = function() { 
        $cordovaBarcodeScanner.scan().then(function(imageData) { 
          // Success! Barcode data is here
    
        }, function(err) { 
          // An error occured. Show a message to the user
    
        });
      };
    
      // NOTE: encoding not functioning yet
      $scope.encodeData = function() { 
        $cordovaBarcodeScanner.encode(BarcodeScanner.Encode.TEXT_TYPE, "http://www.nytimes.com").then(function(success) { 
          // Success! 
        }, function(err) { 
          // An error occured. Show a message to the user
    
        });      
      }
    });

### `$cordovaCamera` ###

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

cordova plugin add org.apache.cordova.camera

module.controller('PictureCtrl', function($scope, $cordovaCamera) { 
    
      $scope.takePicture = function() { 
        var options = {  
            quality : 75, 
            destinationType : Camera.DestinationType.DATA_URL, 
            sourceType : Camera.PictureSourceType.CAMERA, 
            allowEdit : true,
            encodingType: Camera.EncodingType.JPEG,
            targetWidth: 100,
            targetHeight: 100,
            popoverOptions: CameraPopoverOptions,
            saveToPhotoAlbum: false
        };
    
        $cordovaCamera.getPicture(options).then(function(imageData) { 
          // Success! Image data is here
        }, function(err) { 
          // An error occured. Show a message to the user
        });
      }
    });

[View Camera Options][]

### `$cordovaContacts` ###

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

cordova plugin add org.apache.cordova.contacts

module.controller('MyCtrl', function($scope, $cordovaContacts) { 
      $scope.addContact = function() { 
        $cordovaContacts.save($scope.contactForm).then(function(result) { 
          // Contact saved
        }, function(err) { 
          // Contact error
        });
      };
    
      // Many more features will be added shortly
    });

### `$cordovaDevice` ###

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

cordova plugin add org.apache.cordova.device

module.controller('MyCtrl', function($scope, $cordovaDevice) { 
      var device = $cordovaDevice.getDevice();
      var cordova = $cordovaDevice.getCordova();
      var model = $cordovaDevice.getModel();
      var platform = $cordovaDevice.getPlatform();
      var uuid = $cordovaDevice.getUUID();
      var version = $cordovaDevice.getVersion();
    });

### `$cordovaDeviceMotion` ###

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

cordova plugin add org.apache.cordova.device-motion

module.controller('DeviceMotionCtrl', function($scope, $cordovaDeviceMotion) { 
      var watch;
    
      $scope.getAcceleration = function () { 
        $cordovaDeviceMotion.getCurrentAcceleration().then(function(result) { 
          // Success! 
        }, function(err) { 
          // An error occured. Show a message to the user
        });
      };
    
      $scope.watchAcceleration = function () { 
        var options = {  frequency: 1000 };  // Update every 1 second
    
        watch = $cordovaDeviceMotion.watchAcceleration(options);
    
        watch.promise.then(
          function() { /* unused */},  
          function(err) {},
          function(acceleration) { 
            $cordovaDialogs.alert('Acceleration X: ' + acceleration.x + '\n' +
               'Acceleration Y: ' + acceleration.y + '\n' +
               'Acceleration Z: ' + acceleration.z + '\n' +
               'Timestamp: '      + acceleration.timestamp + '\n');
        });
      };
    
      $scope.clearWatch = function() { 
      // use watchID from watchAccelaration()
    
        if(!watch) {  return; }
    
        $cordovaDeviceMotion.clearWatch(watch.watchId).then(function(result) { 
          // Success! 
        }, function(err) { 
          // An error occured. Show a message to the user
    
        });
      }
    });

### `$cordovaDeviceOrientation` ###

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

cordova plugin add org.apache.cordova.device-orientation

module.controller('DeviceOrientationCtrl', function($scope, $cordovaDeviceOrientation) { 
    
        $cordovaDeviceOrientation.getCurrentHeading().then(function(result) { 
          // Success! 
        }, function(err) { 
          // An error occured. Show a message to the user
        });
    
        var options = {  frequency: 1000 }; // Update every 1 second
        var watch = $cordovaDeviceOrientation.watchHeading(options);
    
        watch.promise.then(function(result) {  /* unused */ },
          function(err) { 
            // An error occured. Show a message to the user
          }, function(position) { 
            // Heading comes back in
            // position.magneticHeading
          });
    
        $cordovaDeviceOrientation.clearWatch(watch.watchId).then(function(result) { 
          // Success! 
        }, function(err) { 
          // An error occured. Show a message to the user
        });
    });

### `$cordovaDialogs` ###

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

cordova plugin add org.apache.cordova.dialogs

module.controller('MyCtrl', function($scope, $cordovaDialogs) { 
    
      $cordovaDialogs.alert('Wow!');
    
      $cordovaDialogs.confirm('Are you sure?');
    
      $cordovaDialogs.prompt('Please Login');
    
      // beep 3 times
      $cordovaDialogs.beep(3);
    
    });

### `$cordovaFile` ###

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

cordova plugin add org.apache.cordova.file

module.controller('MyCtrl', function($scope, $cordovaFile) { 
    
      $cordovaFile.checkDir(directory).then(function(result) { 
          // Success! 
      }, function(err) { 
          // An error occured. Show a message to the user
      });
    
    
      // parameters: directory, replace (boolean)
      $cordovaFile.createDir(directory, false).then(function(result) { 
          // Success! 
      }, function(err) { 
          // An error occured. Show a message to the user
      });
    
    
      $cordovaFile.checkFile(directory, file).then(function(result) { 
          // Success! 
      }, function(err) { 
          // An error occured. Show a message to the user
      });
    
    
      // parameters: directory, file, replace (boolean)
      $cordovaFile.createFile(directory, file, true).then(function(result) { 
          // Success! 
      }, function(err) { 
          // An error occured. Show a message to the user
      });
    
    
      $cordovaFile.removeFile(directory, file).then(function(result) { 
          // Success! 
      }, function(err) { 
          // An error occured. Show a message to the user
      });
    
    
      // doesn't function at the moment
      $cordovaFile.writeFile(directory, file).then(function(result) { 
          // Success! 
      }, function(err) { 
          // An error occured. Show a message to the user
      });
    
      // Reads a file as TEXT
      $cordovaFile.readFile(directory, file).then(function(result) { 
          // Success! 
      }, function(err) { 
          // An error occured. Show a message to the user
      });
    
      // parameters: source, filePath, trust all hosts (boolean), options
      $cordovaFile.downloadFile(source, filePath, true, options).then(function(result) { 
          // Success! 
      }, function(err) { 
          // An error occured. Show a message to the user
      });
    
    
      // parameters: source, filePath, options
      $cordovaFile.uploadFile(server, filePath, options).then(function(result) { 
          // Success! 
      }, function(err) { 
          // An error occured. Show a message to the user
      });
    
    });

### `$cordovaGeolocation` ###

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

cordova plugin add org.apache.cordova.geolocation

module.controller('MyCtrl', function($scope, $cordovaGeolocation) { 
      $cordovaGeolocation.getCurrentPosition().then(function(position) { 
          // Position here: position.coords.latitude, position.coords.longitude
        }, function(err) { 
          // error
        });
    
      var watch = $cordovaGeolocation.watchPosition({ 
        frequency: 1000
      });
    
      watch.promise.then(function() { 
          // Not currently used
        }, function(err) { 
          // An error occured. Show a message to the user
        }, function(position) { 
          // Active updates of the position here
          // position.coords.latitude/longitude
      });
    });

### `$cordovaGlobalization` ###

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

cordova plugin add org.apache.cordova.globalization

module.controller('MyCtrl', function($scope, $cordovaGlobalization) { 
      $cordovaGlobalization.getPreferredLanguage().then(
        function(result) { 
          // result
        }, 
        function(error) { 
          // error
      });
    
      $cordovaGlobalization.getLocaleName().then(
        function(result) { 
          // result
        }, 
        function(error) { 
          // error
      });
    
      $cordovaGlobalization.getFirstDayOfWeek().then(
        function(result) { 
          // result
        }, 
        function(error) { 
          // error
      });
    
        // Soon implemented:
        // dateToString
        // stringToDate
        // getDatePattern
        // getDateNames
        // isDayLightSavingsTime
        // numberToString
        // stringToNumber
        // getNumberPattern
        // getCurrencyPattern
    
    });

### `$cordovaNetwork` ###

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

cordova plugin add org.apache.cordova.network-information

module.controller('MyCtrl', function($scope, $cordovaNetwork) { 
      var type = $cordovaNetwork.getNetwork();
    
      var isOnline = $cordovaNetwork.isOnline();
    
      var isOffline = $cordovaNetwork.isOffline();
    });

[View Network Types][]

### `$cordovaPinDialog` ###

Numeric password dialog.

cordova plugin add https://github.com/Paldom/PinDialog.git

module.controller('MyCtrl', function($scope, $cordovaPush) { 
    
      $cordovaPinDialog.prompt('Some message here').then(
        function(result) { 
          // result
        },
        function (error) { 
          // error
      })
    });

### `$cordovaPush` ###

Allows your application to receive push notifications [View Official Docs][View Official Docs 8]

cordova plugin add https://github.com/phonegap-build/PushPlugin.git

module.controller('MyCtrl', function($scope, $cordovaPush) { 
    
      var androidConfig = { 
        "senderID":"replace_with_sender_id",
        "ecb":"onNotification"
      };
    
      var iosConfig = { 
        "badge":"true",
        "sound":"true",
        "alert":"true",
        "ecb":"onNotificationAPN"
      };
    
      $cordovaPush.register(config).then(function(result) { 
          // Success! 
      }, function(err) { 
          // An error occured. Show a message to the user
      });
    
    
      $cordovaPush.unregister(options).then(function(result) { 
          // Success! 
      }, function(err) { 
          // An error occured. Show a message to the user
      });
    
      // iOS only
      $cordovaPush.setBadgeNumber(2).then(function(result) { 
          // Success! 
      }, function(err) { 
          // An error occured. Show a message to the user
      });
    
    });

### `$cordovaSocialSharing` ###

Social Sharing plugin.

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

module.controller('MyCtrl', function($scope, $cordovaSocialSharing) { 
    
      $cordovaSocialSharing.shareViaTwitter(message, image, link).then(function(result) { 
          // Success! 
      }, function(err) { 
          // An error occured. Show a message to the user
      });
    
    
      $cordovaSocialSharing.shareViaWhatsApp(message, image, link).then(function(result) { 
          // Success! 
      }, function(err) { 
          // An error occured. Show a message to the user
      });
    
    
      $cordovaSocialSharing.shareViaFacebook(message, image, link).then(function(result) { 
          // Success! 
      }, function(err) { 
          // An error occured. Show a message to the user
      });
    
      // access multiple numbers in a string like: '0612345678,0687654321'
      $cordovaSocialSharing.shareViaSMS(message, number).then(function(result) { 
          // Success! 
      }, function(err) { 
          // An error occured. Show a message to the user
      });
    
      // TO, CC, BCC must be an array, Files can be either null, string or array
      $cordovaSocialSharing.shareViaEmail(message, subject, toArr, bccArr, file).then(
        function(result) { 
          // Success! 
        }, function(err) { 
          // An error occured. Show a message to the user
        });
    
    
      $cordovaSocialSharing.canShareVia(socialType, message, image, link).then(
        function(result) { 
          // Success! 
        }, function(err) { 
          // An error occured. Show a message to the user
        });
    });

### `$cordovaSpinnerDialog` ###

A dialog with a spinner wheel. [View Official Docs][View Official Docs 9]

cordova plugin add https://github.com/Paldom/SpinnerDialog.git

module.controller('MyCtrl', function($scope, $cordovaSpinnerDialog) { 
    
      // Show spinner dialog with message
      // Title and message only works on Android
      $cordovaSpinnerDialog.show("title","message");
    
      // Hide spinner dialog
      $cordovaSpinnerDialog.hide();
    });

### `$cordovaSplashscreen` ###

Show or hide the Splash Screen.

cordova plugin add org.apache.cordova.splashscreen

module.controller('MyCtrl', function($scope, $cordovaSplashscreen) { 
      $cordovaSplashscreen.show();
    });

### `$cordovaStatusbar` ###

Configure the device's StatusBar with colors and styles.

cordova plugin add org.apache.cordova.statusbar

module.controller('MyCtrl', function($scope, $cordovaStatusbar) { 
      $cordovaStatusbar.overlaysWebView(true);
    
      // styles: Default : 0, LightContent: 1, BlackTranslucent: 2, BlackOpaque: 3
      $cordovaStatusbar.style(1);
    
      // supported names: black, darkGray, lightGray, white, gray, red, green, 
      // blue, cyan, yellow, magenta, orange, purple, brown
      $cordovaStatusbar.styleColor('black');
    
      $cordovaStatusbar.styleHex('#000');
    
      $cordovaStatusbar.hide();
    
      $cordovaStatusbar.show();
    
      var isVisible = $cordovaStatusbar.isVisible();
    
    });

### `$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][View Official Docs 10]

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)

module.controller('MyCtrl', function($scope, $cordovaVibration) { 
    
      $cordovaToast.show('Here is a message', 'long', 'center').then(function(success) { 
        // success
      }, function (error) { 
        // error
      });
    
      $cordovaToast.showShortTop('Here is a message').then(function(success) { 
        // success
      }, function (error) { 
        // error
      });
    
      $cordovaToast.showLongBotton('Here is a message').then(function(success) { 
        // success
      }, function (error) { 
        // error
      });
    
    });

### `$cordovaVibration` ###

Vibrate the device programatically. [View Official Docs][View Official Docs 11]

cordova plugin add org.apache.cordova.vibration

module.controller('MyCtrl', function($scope, $cordovaVibration) { 
    
      // Vibrate 100ms
      $cordovaVibration.vibrate(100);
    
    });

### `$cordovaCapture` ###

This plugin allows you to record sound, video and images throught the native capabilities of the device[View Official Docs][View Official Docs 12]

cordova plugin add org.apache.cordova.media-capture

module.controller('MyCtrl', function($scope, $cordovaCapture) { 
    
      $scope.captureAudio = function() { 
        var options = {  limit: 3, duration: 10 };
    
        $cordovaCapture.captureAudio(options).then(function(audioData) { 
          // Success! Audio data is here
        }, function(err) { 
          // An error occured. Show a message to the user
        });
      }
    
      $scope.captureImage = function() { 
        var options = {  limit: 3 };
    
        $cordovaCapture.captureImage(options).then(function(imageData) { 
          // Success! Image data is here
        }, function(err) { 
          // An error occured. Show a message to the user
        });
      }
    
      $scope.captureVideo = function() { 
        var options = {  limit: 3, duration: 15 };
    
        $cordovaCapture.captureVideo(options).then(function(videoData) { 
          // Success! Video data is here
        }, function(err) { 
          // An error occured. Show a message to the user
        });
      }
    
    });

[ngCordova]: http://ngcordova.com/
[Barcode Scanner Plugin]: https://github.com/wildabeast/BarcodeScanner/
[View Official Docs]: https://github.com/wildabeast/BarcodeScanner/#using-the-plugin
[org.apache.cordova.camera]: https://github.com/apache/cordova-plugin-camera
[View Official Docs 1]: https://github.com/apache/cordova-plugin-camera/blob/master/doc/index.md#orgapachecordovacamera
[View Camera Options]: https://github.com/apache/cordova-plugin-camera/blob/master/doc/index.md#cameraoptions
[View Official Docs 2]: https://github.com/apache/cordova-plugin-device-motion/blob/master/doc/index.md
[View Official Docs 3]: https://github.com/apache/cordova-plugin-device-orientation/blob/master/doc/index.md
[View Official Docs 4]: https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md
[View Official Docs 5]: https://github.com/apache/cordova-plugin-geolocation/blob/master/doc/index.md
[View Official Docs 6]: https://github.com/apache/cordova-plugin-globalization/blob/master/doc/index.md
[View Official Docs 7]: https://github.com/apache/cordova-plugin-network-information/blob/master/doc/index.md
[View Network Types]: https://github.com/apache/cordova-plugin-network-information/blob/master/doc/index.md#connectiontype
[View Official Docs 8]: https://github.com/phonegap-build/PushPlugin#-plugin-api
[View Official Docs 9]: https://github.com/Paldom/SpinnerDialog
[View Official Docs 10]: https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin
[View Official Docs 11]: https://github.com/apache/cordova-plugin-vibration/blob/master/doc/index.md
[View Official Docs 12]: https://github.com/apache/cordova-plugin-media-capture/blob/master/doc/index.md