This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Prepare an Ionic App for Ionic Components and Styling

2:12 Angular 1.x lesson by

In this lesson, we are going to include the necessary assets for the functionality and styles of the Ionic directives we will include in our app.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

In this lesson, we are going to include the necessary assets for the functionality and styles of the Ionic directives we will include in our app.

Avatar
Glenn

With all these includes from the CDN, I'd like to know how this app functions when the phone or tablet is without internet access. Does it not work? Or does Ionic add local versions of these JS files when it builds the project for use on a device?

In reply to egghead.io
Avatar
Lukas

Glenn,
Good question! In short, no, Ionic doesn't automagically add local versions of CDN files. As outlined here, you should only use files from a CDN for demo/dev purposes or if your application will rely heavily on the internet. The app for this lesson falls into the former category, which is why we went with files from a CDN.

In reply to Glenn

Up to this point we have ran eggly-ionic strictly as a Web application and we've leveraged the ionic runtime, but we haven't done anything with the ionic framework itself yet. In this lesson we are going to add in the ionic assets to allow us to start to use ionic components and ionic styling. So let's hop into the command line and we're going to type ionic serve and we're just going to check and see where we are with this application.

The first thing we need to do to convert this is to add in the ionic submodule. We are going to delete ngAnimate and ui-router because they are included with the ionic submodule. From here we are going to add in an additional run block that you can copy from the ionic website, and all this run block is going to do is determine whether or not certain Cordova plugins exist, for instance if you're running it on a device or in the browser, and it's going to determine the behavior accordingly.

Let's hop back into our page, and let's refresh, and as you can see nothing is happening. The reason being is that we have not included the appropriate ionic resource files into our index.html. So let's hop back into ur code, and let's go ahead and add those. We're going to paste in a couple files, Angular sanitize, ionic-min.js, and ionic-angular-min.js. You can get all of these off of cdnjs.com. Everything appears to be working, but we need to do one more thing, and that is add in the ionic css file.

We'll go up to the top and just under the bootstrap reference here we're going to paste in a reference to ionic-min.css, and from here we are going to eventually phase out bootstrap and use ionic entirely and exclusively. This is how you set up an ionic application to not only use the runtime, but to also use ionic components and styling.

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