This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Convert a Web Application into an Ionic App

2:24 Angular 1.x lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Tom

Hi, maybe I missed something, but where does that eggly folder come from.. ?

In reply to egghead.io
Avatar
Lukas

Hey Tom,
The eggly folder is from an existing project that we build in a previous series (https://egghead.io/series/angularjs-application-architecture). We thought it would be somewhat redundant to write the app from scratch as well as we wanted to showcase how easy it is to port an existing AngularJS app to Ionic. So no prior knowledge of the eggly project is assumed, only that it is an app built with AngularJS. Hope that clears the confusion!

In reply to Tom

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?