Skip to content

Native features for mobile apps built with Cordova/PhoneGap and open web technologies. Complete with TypeScript support. The successor to ngCordova. Pairs exquisitely with a nice bottle of Ionic Framework.

License

Notifications You must be signed in to change notification settings

chukwu/ionic-native

 
 

Repository files navigation

Circle CI Commitizen friendly npm

NPM NPM

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.

img

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

About

Native features for mobile apps built with Cordova/PhoneGap and open web technologies. Complete with TypeScript support. The successor to ngCordova. Pairs exquisitely with a nice bottle of Ionic Framework.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 87.5%
  • JavaScript 10.6%
  • Shell 1.4%
  • HTML 0.5%