github/awesome-cordova-plugins
3
0
Fork 1
mirror of https://github.com/danielsogl/awesome-cordova-plugins.git synced 2026-05-02 00:07:23 +08:00
Code Issues Projects Releases Wiki Activity

docs: regenerate plugin readmes

Browse Source
This commit is contained in:
Daniel Sogl
2026-03-21 16:35:15 -07:00
parent f34bfafe93
commit 44ad6fbe5b
3 changed files with 45 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/plugins/core/README.md
+42 -116
View File
@@ -28,58 +28,53 @@ For the full Awesome Cordova Plugins documentation, please visit [https://ionicf
### Basic Usage ### Basic Usage
#### Ionic/Angular apps #### Ionic/Angular apps (Standalone)
To use a plugin, import and add the plugin provider to your `@NgModule`, and then inject it where you wish to use it. Angular v14+ uses standalone components by default. To use a plugin, register it as a provider in your application bootstrap and inject it using Angular's `inject()` function.
Make sure to import the injectable class from the `/ngx` directory as shown in the following examples: Make sure to import the injectable class from the `/ngx` directory as shown in the following examples:
```typescript ```typescript
// app.module.ts // main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { Camera } from '@awesome-cordova-plugins/camera/ngx'; import { Camera } from '@awesome-cordova-plugins/camera/ngx';
import { Geolocation } from '@awesome-cordova-plugins/geolocation/ngx';
import { AppComponent } from './app/app.component';
... bootstrapApplication(AppComponent, {
providers: [Camera, Geolocation],
@NgModule({ });
...
providers: [
...
Camera
...
]
...
})
export class AppModule { }
``` ```
```typescript ```typescript
import { Component, OnInit } from '@angular/core';
import { inject } from '@angular/core';
import { Geolocation } from '@awesome-cordova-plugins/geolocation/ngx'; import { Geolocation } from '@awesome-cordova-plugins/geolocation/ngx';
import { Platform } from 'ionic-angular'; import { Platform } from '@ionic/angular';
@Component({ ... }) @Component({
export class MyComponent { selector: 'app-my-component',
standalone: true,
template: `<p>My Component</p>`,
})
export class MyComponent implements OnInit {
private geolocation = inject(Geolocation);
private platform = inject(Platform);
constructor(private geolocation: Geolocation, private platform: Platform) { async ngOnInit() {
await this.platform.ready();
this.platform.ready().then(() => { // get position
const pos = await this.geolocation.getCurrentPosition();
console.log(`lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude}`);
// get position // watch position
this.geolocation.getCurrentPosition().then(pos => { const watch = this.geolocation.watchPosition().subscribe((pos) => {
console.log(`lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude}`) console.log(`lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude}`);
});
// watch position
const watch = geolocation.watchPosition().subscribe(pos => {
console.log(`lat: ${pos.coords.latitude}, lon: ${pos.coords.longitude}`)
});
// to stop watching
watch.unsubscribe();
}); });
// to stop watching
watch.unsubscribe();
} }
} }
``` ```
@@ -126,9 +121,9 @@ const Tab1: React.FC = () => {
}; };
``` ```
#### ES2015+/TypeScript #### ES2015+/TypeScript (without Angular)
These modules can work in any ES2015+/TypeScript app (including Angular/Ionic apps). To use any plugin, import the class from the appropriate package, and use it's static methods. These modules can also be used without Angular by calling static methods directly:
```js ```js
import { Camera } from '@awesome-cordova-plugins/camera'; import { Camera } from '@awesome-cordova-plugins/camera';
@@ -140,64 +135,17 @@ document.addEventListener('deviceready', () => {
}); });
``` ```
#### AngularJS
Awesome Cordova Plugins generates an AngularJS module in runtime and prepares a service for each plugin. To use the plugins in your AngularJS app:
1. Download the latest bundle from the [Github releases](https://github.com/danielsogl/awesome-cordova-plugins/releases) page.
2. Include it in `index.html` before your app's code.
3. Inject `ionic.native` module in your app.
4. Inject any plugin you would like to use with a `$cordova` prefix.
```js
angular.module('myApp', ['ionic.native']).controller('MyPageController', function ($cordovaCamera) {
$cordovaCamera.getPicture().then(
function (data) {
console.log('Took a picture!', data);
},
function (err) {
console.log('Error occurred while taking a picture', err);
}
);
});
```
#### Vanilla JS
To use Awesome Cordova Plugins in any other setup:
1. Download the latest bundle from the [Github releases](https://github.com/danielsogl/awesome-cordova-plugins/releases) page.
2. Include it in `index.html` before your app's code.
3. Access any plugin using the global `IonicNative` variable.
```js
document.addEventListener('deviceready', function () {
IonicNative.Camera.getPicture().then(
function (data) {
console.log('Took a picture!', data);
},
function (err) {
console.log('Error occurred while taking a picture', err);
}
);
});
```
### Mocking and Browser Development (Ionic/Angular apps only) ### Mocking and Browser Development (Ionic/Angular apps only)
Awesome Cordova Plugins makes it possible to mock plugins and develop nearly the entirety of your app in the browser or in `ionic serve`. Awesome Cordova Plugins makes it possible to mock plugins and develop nearly the entirety of your app in the browser or in `ionic serve`.
To do this, you need to provide a mock implementation of the plugins you wish to use. Here's an example of mocking the `Camera` plugin to return a stock image while in development: To do this, you need to provide a mock implementation of the plugins you wish to use. Here's an example of mocking the `Camera` plugin to return a stock image while in development:
First import the `Camera` class in your `src/app/app.module.ts` file: First create a mock class that extends the `Camera` class:
```typescript ```typescript
import { Camera } from '@awesome-cordova-plugins/camera/ngx'; import { Camera } from '@awesome-cordova-plugins/camera/ngx';
```
Then create a new class that extends the `Camera` class with a mock implementation:
```typescript
class CameraMock extends Camera { class CameraMock extends Camera {
getPicture(options) { getPicture(options) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@@ -207,45 +155,23 @@ class CameraMock extends Camera {
} }
``` ```
Finally, override the previous `Camera` class in your `providers` for this module: Then override the `Camera` provider in your application bootstrap:
```typescript ```typescript
providers: [{ provide: Camera, useClass: CameraMock }]; // main.ts
``` import { bootstrapApplication } from '@angular/platform-browser';
Here's the full example:
```typescript
import { ErrorHandler, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { Camera } from '@awesome-cordova-plugins/camera/ngx'; import { Camera } from '@awesome-cordova-plugins/camera/ngx';
import { AppComponent } from './app/app.component';
import { HomePage } from '../pages/home/home';
import { MyApp } from './app.component';
class CameraMock extends Camera { class CameraMock extends Camera {
getPicture(options) { getPicture(options) {
return new Promise((resolve, reject) => { return Promise.resolve('BASE_64_ENCODED_DATA_GOES_HERE');
resolve('BASE_64_ENCODED_DATA_GOES_HERE');
});
} }
} }
@NgModule({ bootstrapApplication(AppComponent, {
declarations: [MyApp, HomePage], providers: [{ provide: Camera, useClass: CameraMock }],
imports: [BrowserModule, IonicModule.forRoot(MyApp)], });
bootstrap: [IonicApp],
entryComponents: [MyApp, HomePage],
providers: [
{ provide: ErrorHandler, useClass: IonicErrorHandler },
{ provide: Camera, useClass: CameraMock },
],
})
export class AppModule {}
``` ```
### Runtime Diagnostics ### Runtime Diagnostics
@@ -256,7 +182,7 @@ Spent way too long diagnosing an issue only to realize a plugin wasn't firing or
## Plugin Missing? ## Plugin Missing?
Let us know or submit a PR! Take a look at [the Developer Guide](https://github.com/danielsogl/awesome-cordova-plugins/blob/master/DEVELOPER.md) for more on how to contribute. :heart: Let us know or submit a PR! Take a look at [the Developer Guide](https://github.com/danielsogl/awesome-cordova-plugins/blob/main/DEVELOPER.md) for more on how to contribute. :heart:
# Credits # Credits
docs/plugins/firebase-model/README.md
+1 -1
View File
@@ -10,7 +10,7 @@ $ npm install @awesome-cordova-plugins/firebase-model
This plugin downloads the TensorFlow model from firebase and classify the images. This plugin downloads the TensorFlow model from firebase and classify the images.
```typescript ```typescript
import { FirebaseModel } from '@ionic-native/ionic-native-firebase-model'; import { FirebaseModel } from '@awesome-cordova-plugins/firebase-model';
constructor(private firebaseModel: FirebaseModel) { } constructor(private firebaseModel: FirebaseModel) { }
docs/plugins/kommunicate/README.md
+2 -2
View File
@@ -11,8 +11,8 @@ Plugin Repo: [https://github.com/Kommunicate-io/Kommunicate-Cordova-Ionic-PhoneG
The plugin for the Kommunicate SDK. The plugin for the Kommunicate SDK.
With the help of this plugin, you can easily add human + bot chat support functionality to you app. With the help of this plugin, you can easily add human + bot chat support functionality to you app.
Refer to: TODO: insert site link Refer to: https://www.kommunicate.io/
For documentation: TODO: insert link For documentation: https://docs.kommunicate.io/
## Supported platforms ## Supported platforms