AngularJS Cordova插件介绍
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 plugin to take pictures and video from a device. View Official Docs
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
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 secondwatch = $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
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 secondvar 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
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
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
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
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
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
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
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
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 deviceView Official Docs
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});}});本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！