码迷，mamicode.com
首页 > Web开发 > 详细

AngularJS Cordova插件介绍

时间：2014-08-06 15:00:01      阅读：1019      评论：0      收藏：0      [点我收藏+]

标签：angularjs   phonegap   hybridapp   cordova   plugin   

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

});

AngularJS Cordova插件介绍,布布扣,bubuko.com

AngularJS Cordova插件介绍

标签：angularjs   phonegap   hybridapp   cordova   plugin   

原文地址：http://blog.csdn.net/offbye/article/details/38398181
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！