Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

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

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Prepare an Ionic App for Ionic Components and Styling

    Lukas RuebbelkeLukas Ruebbelke

    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.

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

    00:33 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.

    01:05 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.

    01:45 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.

    Discuss

    Discuss