This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Convert a Web Application into an Ionic App

    Lukas RuebbelkeLukas Ruebbelke

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss