Build and Run an Ionic App from Scratch

Convert a Web Application into an Ionic App

Build, Emulate, and Debug an Ionic App

Device Interaction in an Ionic App with Cordova Plugins

Prepare an Ionic App for Ionic Components and Styling

Build a Sidebar Layout with Ionic

Build a Powerful List with Ionic

Create Modals with Ionic

Convert a UI Route into an Angular Directive

Building an Angular 1.x Ionic Application

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. 

Course

Building an Angular 1.x Ionic Application

Convert a Web Application into an Ionic App

Share this video with your friends