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:

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

});