
This reverts part of commit 67adb23, which moved the call to getPlugin() from within CordovaProperty() to a point where it was called too early. When the CordovaProperty decorator is called on a property, the class containing that call has not yet had its Plugin decorator called. Only when the latter happens does pluginRef get set. Thus, attempting to access pluginRef within CordovaProperty at the time of the call will give undefined, and attemping to call getPlugin with an undefined value will throw an exception: Runtime Error Cannot read property 'split' of undefined TypeError: Cannot read property 'split' of undefined at get at getPlugin at CordovaProperty at __decorate ... The above message can be seen in the browser after running the 'ionic serve' command. This commit moves the getPlugin call back to the getters and setters established by CordovaProperty, which are only called *after* the Plugin decorator has finished executing. closes #992
Ionic Native
Ionic Native is a curated set of wrappers for Cordova plugins that make adding any native functionality you need to your Ionic, Cordova, or Web View mobile app easy.
Documentation
For the full Ionic Native documentation, please visit http://ionicframework.com/docs/v2/native/.
Promises and Observables
Ionic Native wraps plugin callbacks in a Promise or Observable, providing a common interface for all plugins and ensuring that native events trigger change detection in Angular 2.
import { Geolocation } from 'ionic-native';
Geolocation.getCurrentPosition().then(pos => {
console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
});
let watch = Geolocation.watchPosition().subscribe(pos => {
console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
});
// to stop watching
watch.unsubscribe();
Angular 1
Ionic Native works as a stand-in for ngCordova. In many cases, the usage is identical, but we import ionic.native
instead of ngCordova
as our module.
As a rule of thumb: take the ES6 class name of the plugin and add $cordova
to get the service name. For example, Geolocation
would be $cordovaGeolocation
, and Camera
will be $cordovaCamera
:
angular.module('myApp', ['ionic', 'ionic.native'])
.controller('MyCtrl', function($scope, $cordovaCamera) {
$scope.takePicture = function() {
$cordovaCamera.getPicture(opts).then(function(p) {
}, function(err) {
});
};
});
For services that return observables, the Angular 1 digest cycle must be done manually (currently):
angular.module('myApp', ['ionic', 'ionic.native'])
.controller('MyCtrl', function($scope, $cordovaGeolocation) {
$scope.takePicture = function() {
$cordovaGeolocation.watchPosition(opts).subscribe(function(p) {
$scope.$apply(function() {
$scope.position = p.coords;
});
}, function(err) {
});
};
});
Runtime Diagnostics
Spent way too long diagnosing an issue only to realize a plugin wasn't firing or installed? Ionic Native lets you know what the issue is and how you can resolve it.
Installation
Run following commmand to install ionic-native in your project.
npm install ionic-native --save
Plugin Missing?
Let us know or submit a PR! Take a look at the Developer Guide for more on how to contribute. ❤️
Credits
Ibrahim Hadeed - @ihadeed
Tim Lancina - @timlancina
Max Lynch - @maxlynch
Rob Wormald - @robwormald