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 include the necessary assets for the functionality and styles of the Ionic directives we will include in our app.

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

Course

Building an Angular 1.x Ionic Application

Prepare an Ionic App for Ionic Components and Styling

Share this video with your friends