AngularJS Cordova插件介绍

首页 > 代码库 > AngularJS Cordova插件介绍

2024-07-16 02:05:46 220人阅读

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:

<script src=http://www.mamicode.com/"lib/ngCordova/dist/ng-cordova.js"></script>
<script src=http://www.mamicode.com/"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
    });
  }

});

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > AngularJS Cordova插件介绍