喵喵爱编程

这个屌丝很懒，什么也没留下！

热门标签

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

作者：喵喵爱编程 | 2024-06-23 06:54:49

踩

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:


<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<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


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 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

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

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
    });
  }
 
});

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】