Name: Build, Emulate, and Debug an Ionic App
Uploaded: 2016-01-24T11:08:43-06:00
Description: In this lesson, we are going to build an Ionic app for the iOS platform, and then emulate iOS on our computer. We are going to cover some important command-line options when emulating an Ionic application. We will then see how these options play a critical role in debugging our applications.

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 build an Ionic app for the iOS platform, and then emulate iOS on our computer. We are going to cover some important command-line options when emulating an Ionic application. We will then see how these options play a critical role in debugging our applications.

https://app.egghead.io/api/v1/lessons/angularjs-build-emulate-and-debug-an-ionic-app/subtitles

[00:00] In this lesson, we are going to learn how to emulate and debug an Ionic application. So the first thing we're going to do is hop into the command line. Traditionally, we add the platform that we want to work with. In this case, Ionic platform, add iOS. iOS is added by default on Mac, so this step was unnecessary.

[00:22] But the next step is we will build the iOS project. So Ionic build, iOS, and then, from there, we are going to Ionic emulate iOS. Now, we're going to add a few switches that are pretty important for this command. The first one was L, which stands for live reload, and C stands for console logs. S stands for server log output.

[00:52] Once the emulator pops up, let's go ahead and start to interact with this application. You can see almost immediately we start to throw errors. Let's try to update this bookmark. It's just not working. Something is awry. You can see here that the application cannot find the variable Cordova.

[01:15] So what we need to do is actually create a reference to Cordova.js. So let's add a script tag to our HTML file, point it to Cordova. You'll notice that this is actually referencing Cordova in the root directory. But you can see here in the www folder that does not exist. It actually exists in the platforms folder iOS in this case. You can see in that www folder Cordova.js exists.

[01:48] We'll hop back into our terminal. You can see that because we did it with a live reload option that we've already picked up the new HTML. We can update this bookmark and not throw an error.

[02:04] We'll click save, and this did not take, the reason being is that we are an error state. So occasionally you need to just restart the application from the root. We'll just type in R, which will restart the application. We will pull up the application one more time in the emulator. Let's update this bookmark title. We'll click save. You can see that it is working.

[02:32] Just to reiterate what we've done, we did Ionic emulate iOS with the L, C, and S switch which stands for live reload, console log output, and server log output. Then we were able to solve the great mystery of where in the world is Cordova.

Build, Emulate, and Debug an Ionic App

Share this video with your friends

Course

Building an Angular 1.x Ionic Application