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:

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