Home → Documentation → AngularJS → Using native device features (PhoneGap)
If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

Introduction

You can add native Apache Cordova (PhoneGap) features to your apps as plug-ins.

Below are the main principles of working with services in AngularJS applications.

You can edit JavaScript code in the screen SCOPE tab to make your app more flexible and customized.

Services can be added manually or called via the “Invoke service” button from the snippet panel (by clicking CTRL+SPACE to autocomplete a service name). Also, you can use a drag and drop feature to invoke services. Read here to learn how.

Quickstart

If you are new to using native features, please try these quickstart tutorials:

Pre-installed Cordova plugins

Appery.io provides a set of pre-installed plugins that are available immediately once the new project has been created:

Appery.io supports and updates its list of pre-installed Cordova plugins as developers release new ones. To review the up-to-day core Cordova plugins that are available for your app by default, go to: Resources > Cordova plugins > General > Core Cordova plugins.

Adding native features

Device services are Appery.io plug-ins that can be added to your app.

You can create your own services and save them as plug-ins to use them later. In fact, this is a custom implementation of Generic services.

Appery.io also comes with a number of Cordova APIs available as preconfigured native services that can be added as plug-ins.

To add a plug-in with native functionality to an app:

Open your Appery.io Bootstrap/AngularJS or Ionic/AngularJS project or create a new one.

In the builder, go to Project > CREATE NEW > From Plugin.

In the new window, select one or more of the plug-ins and click Import selected plugins.

Once the service has been added, it is listed under the Services folder and new JavaScript files are created:
002-Plug-in_added

After a native service has been added to the app, it can be called in your app. Invoking a native service is very similar to invoking a REST service.

Invoking the service

To invoke the added service, go to the SCOPE view of the corresponding screen and use the snippets menu:

Each snippet in the drop-down list has a pop-up with its description and code preview (with syntax highlight) and a link to documentation (if available).

Select Invoke service, click Backspace and then CTRL+SPACE to select and autocomplete the service name:

In SCOPE, adding several functions and/or related variables to the app is possible.

Once a service has been added to the function code, you can click Mapping to map it to the page: the click on the upper mapping button defines the service request, on the lower one – the service response:

The page UI has to be created first so that you can map the services.

You would have to notify AngularJS about the need to run update loop using scope method $scope.$apply();

Please find more info about this here.

Adding 3rd party plugins

Introduction

Appery.io enables you to import Cordova plug-ins for use in apps without needing to configure additional source files.

This functionality will be added beginning with the new external library version 3.0 (JQM)/ 1.0 (AngularJS) only.

So, when switching from 3.0 to other libraries, all manual changes will be deleted and the added plug-ins will be deleted too – therefore, a project version should be created before downgrading libraries.

Core Cordova plug-ins

Go to Resources > Cordova plugins > Core Cordova plugins to see the list of the preconfigured plug-ins available from Cordova. To get information on the plug-in, select it:SelectPlugin

In this view, managing permissions is disabled since the core Cordova plug-ins are available to the entire team.

You may decide not to enable some of them (or unselect them all by clicking the corresponding button) in your project in order to decrease the app size. Only enabled (checked) plug-ins will be included into the binary application and be used for any target device type in events, services, etc.: Project > App settings > Cordova plugins.
ListPlugins

Importing Cordova plug-ins

In the following examples, you’ll learn how to import 3rd party Cordova plug-ins, that are not on the Core Cordova plugins list. You’ll learn to import them, configure them by passing parameters, and then launch them.

Importing Toast plug-in

In the following example, you’ll learn how to import 3rd party Cordova plug-in in the example of the Toast-PhoneGap plug-in.

  1. Go to the plug-in page: https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin and click Download ZIP to start downloading and then save the file to your drive:
    >

    It’s highly recommended that you download the latest stable version available.

  2. In the Appery.io Visual Builder, switch to Resources > Cordova Plugins and click Import Cordova plugin, then: Choose file, locate the downloaded file (Toast-PhoneGap-Plugin-master.zip) and click Import plugin. The plug-in appears under Cordova plugins:
  3. To manage permissions to the imported Cordova plug-ins, go to: Resources > Cordova plugins, select the plug-in under Cordova plugins and switch to the Permissions tab:ManagingPermissions

Managing permissions to the imported Cordova plug-ins is similar to managing permissions under Apps > Permissions.

The plug-in also appears in App settings > Cordova plugins > Imported Cordova plugins in all your projects. To enable the plug-in for the current project, check the appropriate box to add it to the binary application:

Use the corresponding buttons to select/unselect all the imported Cordova plug-ins to the build.

Click the Refresh button if the plug-in has been imported/deleted with the editor open.

Basically, that’s all you need to do in plug-in configuring. Now you can use its API as described in appropriate docs. For example, you can execute the following code on button click to show the toast:

We’ve prepared a little more extended app with Toast plug-in enabled. In this app, you can modify your toasts’s message, duration, and position via UI. It looks as following:

You can create this app from the backup (backup) to see how it’s built (but make sure you have imported Toast plug-in before).

To create an app from the backup:

  1. Click Create new app.
  2. Type an app name.
  3. Click From backup and select the project backup file.
  4. Click Create.

To test the app, you must build the binary and launch the app on your device.

Importing Facebook plug-in

In the following example, you’ll learn how to import the Facebook Plugin.

  1. First, go to the plug-in page: https://github.com/Wizcorp/phonegap-facebook-plugin and click Download ZIP to start downloading it and then save the file to your drive:

    It’s highly recommended that you download the latest stable version available.

    In the Appery.io Visual Builder, switch to Resources > Cordova Plugins and click Import Cordova plugin, then: Choose file, locate the downloaded file and click Import plugin. The plug-in appears under Cordova plugins:

    To manage permissions to the imported Cordova plug-ins, go to: Resources > Cordova plugins, select the plug-in under Cordova plugins and switch to the Permissions tab:ManagingPermissions

    Managing permissions to the imported Cordova plug-ins is similar to managing permissions under Apps > Permissions.

    The plug-in also appears in App settings > Cordova plugins > Imported Cordova plugins in all your projects. To enable the plug-in for the current project, check the appropriate box to add it to the binary application:

    Use the corresponding buttons to select/unselect all the imported Cordova plug-ins to the build.

    Click the Refresh button if the plug-in has been imported/deleted with the editor open.

    Passing parameters to plug-ins

    Some Cordova plug-ins require initial parameters.

    The phonegap-facebook-plug-in, for example, requires APP_ID and APP_NAME variables to be specified. Read here about the details.

    To do it, first download the plug-in, then import it (see above), and then go to App settings > Cordova plugins and click the Options button next to the plug-in. A modal window opens, where the necessary options can be added and specified:

    Click Save options:

    The Options buttons have different styles depending on which options have been set.

    The selected options can be viewed by hovering the mouse over the Options button.

    Basics:

    • You can add any number of key/value pairs to any Cordova plug-in (core or custom).
    • Key/values options can be changed/deleted any time.
    • Options for unselected plug-ins can be managed as well.
    • Keys should be unique to one plug-in (subject to validation).
    • For parameter names, the following symbols are allowed: all digits, letters, and an underscore or minus sign (subject to validation).
    • Empty keys/values are not allowed.
    • Parameter names are validated for duplication.

    Quirks

    There are several important issues when using Cordova plug-ins:

    • Uploading files larger than 20 Mb is not allowed.
    • Before uploading plugin .zip archive make sure it contains only plugin code (without any other files).
    • Plug-ins do not work for the Appery.io Tester.
    • Cordova and Cordova plug-ins can’t be updated with the Autoupdate feature.
    • When creating an app from the backup, re-adding custom plug-ins to the backup application is required as they are lost while building a backup.
    • Cordova plug-ins are not included under the Source tab in Project view.

    More help resources

    More help resources are links to the blog, our YouTube channel and other web sites.