Edit Your Ionic Application Code

Lukas Ruebbelke
InstructorLukas Ruebbelke

Share this video with your friends

Send Tweet
Published 7 years ago
Updated 3 years ago

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!