Build and Run an Ionic App from Scratch

Convert a Web Application into an Ionic App

Build, Emulate, and Debug an Ionic App

Device Interaction in an Ionic App with Cordova Plugins

Prepare an Ionic App for Ionic Components and Styling

Build a Sidebar Layout with Ionic

Build a Powerful List with Ionic

Create Modals with Ionic

Convert a UI Route into an Angular Directive

Building an Angular 1.x Ionic Application

In this lesson, we are going to learn how to interact with native components through Cordova plugins. We will walk through how to add a Cordova plugin to our application and use it to interact with our native device. In this case, we are going to install a plugin that will allow us to open URLs in a mobile browser from within our Ionic app.

- item
- item

https://app.egghead.io/api/v1/lessons/angularjs-device-interaction-in-an-ionic-app-with-cordova-plugins/subtitles

[00:00] In this lesson, we are going to learn how to add a Cordova plugin to our application to handle external URLs. We are presuming that you have an account with Ionic, and you have downloaded the Ionic View application to your mobile device.

[00:17] So the first thing we're going to do is log in via Ionic login. I'm going to put in my username and my password. Once I am authenticated, I am going to upload my application to Ionic. We'll go Ionic upload. This will upload the latest version of the application to Ionic so we can view it in the Ionic View app.

[00:47] We'll pull this up. I'm just going to log in with my account. Click log in. Then we can see the applications that I have in my account. We'll choose Eggly Ionic. Then we are going to go ahead and view the app.

[01:08] Once this loads up, we are going to select a bookmark. You're going to see some interesting behavior. We'll go ahead. Let's just choose Rob Wolf. You can see that now we are in this website, but we have no way to get back to our application. So we are going to fix this by adding in a Cordova plugin to handle that.

[01:33] We'll hop back into our command line, and we're going to type Ionic plugin to see the plugins that we currently have installed within our application. Now we're going to install Cordova plugin in app browser plugin. So let's type, "Ionic plugin add Cordova plugin in-app browser." This will allow us to pull up a browser window within our application.

[02:01] Now that this is installed, let's do Ionic plugin one more time. You can see now that we have the in-app browser.

[02:11] Now let's hop into our bookmarks list controller. We're going to add a method to our controller to navigate to a link that we click and direct it to the appropriate target. We'll go ahead and create a method called go to URL. We'll pass in the bookmark that we want to navigate to. From here, we're going to go window.open. We're going to pass in the bookmark. We're going to set the target to _system.

[02:57] Then, from here, we need to update our link to not use href, but rather to use ng click. We'll just take this out. We'll replace this with an ng click to the method that we just created on our controller. We'll call go to URL, and we'll pass in the bookmark.

[03:30] From here, we are ready to hop back into our command line. Let's go ahead and upload the latest to Ionic. Once this is uploaded, we can go back to Ionic View. We're going to grab the latest version of this application. We're going to click Eggly Ionic.

[03:55] We're going to click sync with the latest. This is going to pull the latest version down onto our mobile device. Now we can view app. From here, let's go ahead and click a link. You can see now that we're pulling up the browser, but it is within our application, and we have a way to navigate back.

[04:19] So just to review what we've done, we authenticated with Ionic from the command line using Ionic login. Then we used Ionic upload to upload our application to Ionic.

[04:31] Then, from Ionic View, we were able to pull up Eggly. When we clicked on a link, we noticed that we were being popped out into a browser with no way to get back.

[04:42] The way that we solved that is by using Ionic plugin add and the plugin we wanted. In this case, it was Cordova plugin in-app browser. Then we were able to see that being installed with Ionic plugin. This is how you add a Cordova plugin to your application.

Device Interaction in an Ionic App with Cordova Plugins

Share this video with your friends

Course

Building an Angular 1.x Ionic Application