public/awesome-cordova-plugins
public/awesome-cordova-plugins
9
0
Fork 0
forked from github/awesome-cordova-plugins
Code Pull Requests Activity

chore(): update readme

Browse Source
This commit is contained in:
Ibby 2017-03-20 16:46:08 -04:00
parent 2f2d55f1d5
commit 5da4732787
1 changed files with 30 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
README.md
View File

@ -6,7 +6,7 @@
# Ionic Native
Ionic Native is a curated set of wrappers for Cordova plugins that make adding any native functionality you need to your [Ionic](http://ionicframework.com/), Cordova, or Web View mobile app easy.
Ionic Native is a curated set of wrappers for Cordova plugins that make adding any native functionality you need to your [Ionic 2](http://ionicframework.com/) mobile app easy.
### Documentation
@ -17,53 +17,39 @@ For the full Ionic Native documentation, please visit [http://ionicframework.com
Ionic Native wraps plugin callbacks in a Promise or [Observable](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754), providing a common interface for all plugins and ensuring that native events trigger change detection in Angular 2.
```
import { Geolocation } from 'ionic-native';
import { Geolocation } from '@ionic-native/geolocation';
import { Platform } from 'ionic-angular';
Geolocation.getCurrentPosition().then(pos => {
console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
});
@Component({ ... })
export class MyComponent {
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](http://ngcordova.com/). 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`:
```javascript
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):
```javascript
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;
constructor(private geolocation: Geolocation, private platform: Platform) {
platform.ready().then(() => {
// get position
geolocation.getCurrentPosition().then(pos => {
console.log(`lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude}`)
});
}, function(err) {
// watch position
const watch = geolocation.watchPosition().subscribe(pos => {
console.log(`lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude}`)
});
// to stop watching
watch.unsubscribe();
});
};
});
}
}
```
### Runtime Diagnostics