Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Prepare an Ionic App for Ionic Components and Styling


    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.



    Become a Member to view code

    You must be a Pro 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
    orLog In




    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 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.