⚠️ This lesson is retired and might contain outdated information.

Convert a Web Application into an Ionic App

Lukas Ruebbelke
InstructorLukas Ruebbelke
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 2 years ago

In this lesson, we are going to demonstrate how easy it is to copy existing Angular code into an Ionic app. It is literally as simple as removing unnecessary code from the Ionic app and pasting in the guts of our Angular application. Along the way, we will update some dependencies and discover a gotcha for including assets from a CDN.

[00:00] One of the predominant features of ionic is that it is just an Angular application under the hood. In this lesson we are going to take the existing eggly application and port it over to eggly Ionic. Let's go ahead and open up eggly Ionic in our IDE and we are going to prune some of these unnecessary folders out of our www directory. So going to get rid of css, the images, and the JavaScript. We'll delete those, and then we're going to hop into our eggly application and we are going to copy the appropriate assets from eggly into eggly-ionic.

[00:41] So we'll hop into source, we'll go and copy the app directory, the assets directory, and the data directory. We'll paste them into the www directory and you can see that they are now here. Now we're going to copy the index.html file from eggly and we're just going to replace the index.html from eggly-ionic. Now we need to update these assets and the first place we're going to start is with angular-ui-router. So we're going to go to cdnjs.com and we will pull the appropriate reference from the cdn, we'll hop back into our source code and replace it.

[01:29] The next thing we're going to do is update these versions of angular-load-jquery to the latest. We'll just copy these, we're going to replace them, and the upside of this is that we are replacing protocol agnostic references to be specifically pointing to HTTPS. We are also going to update the bootstrap css 2.2 HTTPS as well. This is important when you are working on a mobile device.

[02:01] So now we have simply taken the index.html, pasted it in and updated our source files. Now we're going to run ionic serve from the command line, and now you can see eggly running within eggly-ionic, and so this is the power of Ionic leveraging Angular application within its framework.

egghead
egghead
~ 25 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today