Setting Up your Mac with Ionic and Cordova

Installing Node.js and NPM on Windows

Ionic Quickstart for Windows: Installing Ionic

Creating an Ionic App

Build and Run an Android Application with Ionic on a Mac

Build and Run an iOS App on a Mac

Install Ant for Ionic

Install Android SDK for Ionic

Install the Genymotion Android Emulator for Ionic

Install the Java Developer Kit (JDK) for Ionic

Run Your First Ionic App

Edit Your Ionic Application Code

Deploy Your Ionic App to a Device

Upload and Share an Ionic App

Ionic Quickstart for Windows and Mac

In this lesson, we quickly demonstrate how to edit our code and re-run our app. The pertinent piece of the puzzle is knowing where the code for the HTML/Javascript/CSS is. Once we know where that is, editing it and running the app is a cinch!

[00:00] In this lesson, we are going to learn how to update and edit an existing Ionic project on a Genymotion device using Visual Studio. Visual Studio is free, you can download it at visualstudio.com.

[00:18] We're going to start with our application running. We will open Visual Studio. From here, we will go File, Open, Website, and we'll navigate to our Ionic starter project. We will click Open. From here, we are going to navigate to the www directory, and we are going to open a template.

[00:52] Now, that the template is open, we are just going to duplicate this element here, for simplicity sake. We'll copy it, and we will paste it into the template. Now, we have two upcoming list items. We will go to the command line and we are going to type, "Ionic run android." It is going to recompile the project.

[01:30] Now that the app is on the device, we can navigate to it and you can see that the updated UI is reflected in the running version of the application. It's that simple. See you in the next lesson!

Course

Ionic Quickstart for Windows and Mac

Edit Your Ionic Application Code

Share this video with your friends