If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

What are we going to build?

In this tutorial, you’ll learn how to build an app that navigates to a web page via various methods of the Apache Cordova API as a preconfigured native service.

The InAppBrowser plug-in provides the ability to spawn a browser instance from the application.

More information on using native Apache Cordova features in AngularJS apps as plug-ins can be found here.

Before you begin

Tutorial level: intermediate.

Prerequisites: an Appery.io account.

Apache Cordova (PhoneGap)

Apache Cordova (PhoneGap) is automatically included when you create a new project in Appery.io.

To learn more about the component, and any other settings and options, please go to the InAppBrowser documentation page.

Creating a new app

Create a new app in the app builder. From the Apps page, enter an app name and click Create. You’ll see a start page.

Creating the UI

Design

1. Open your Appery.io Bootstrap/AngularJS or Ionic/AngularJS project or create a new one. You will get two default pages: index and Screen1.

2. On the index page, for the Header, define the ng-show as visionStatus.header.

3. Now, switch to Screen1 and place the Button component on the page,  define its Text as Open link and ng-click as inappbrowser().

4. Drop the Input component on the page. Clear the Text field and, for the Placeholder, type in Enter URL.

You may also define the default site name, http://google.com, for example.

Define the ng-model as well: $parent.link.

5. Now, place 3 Radiobuttons and set the following parameters for each:

  • For the first Radiobutton, type In App Browser for Text, and define the ng-model as $parent.brtype and _blank as the ng-value. Select the icon as well.
  • For the second Radiobutton: set Text to System Browser, ng-model  – to $parent.brtype and ng-value – to _system.
  • And for the third one: TextCordova Web Viewng-model  – $parent.brtype and ng-valueto _self.

This is how it should look like in a Bootstrap & AngularJS app:
BootstrapUI

This is the looks of the similar Ionic/AngularJS project:
IonicUI

If you are new to using Bootstrap/AngularJS and/or Ionic/AngularJS UI components, read here and here respectively.

Scope

1.Go to the SCOPE view of the Screen1 page and add three variables; link, brtype, and def.

2. Now, type a new function name – inappbrowser() and click Add, opening the function editor.

3. In the editor, add the following code to the function:

3. The result:

4. Now, edit the init() function by adding the following:

5. Here is how it should look like:

6. Then, switch to the index page SCOPE view and click Edit for init() fuction, then add the following code:

Binding

By opening the BINDING tab of the Screen1 page you can view the links between the app properties:Binding

Since we’re invoking a native component, this app needs to be tested as a hybrid app, or installed on the device.

The final app will look like the following (Appery.io Bootstrap/AngularJS):BS

The Ionic/AngularJS project:I

Testing options:

Android

  1. Use the Appery.io Mobile Tester app. It’s an app that allows you to launch any app created in Appery.io as a hybrid app. You can find it in the Google Play Store.
  2. Build the Android binary and install it your device. When the build is completed, you’ll see a QR code. Scanning the QR code will download the app to your phone. You can also email the app to your device.

iOS

iOS options:

  1. Use the Appery.io Mobile Tester app. It’s an app that allows you to launch any app created in Appery.io as a hybrid app.
  2. Build the app and install it on your device.