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 turn two forms into Angular directives in preparation for turning them into Ionic modals. This isn’t a complicated step, but it puts us in a better place for creating the modals.

[00:00] In this lesson we are going to convert our edit and create states into directives so that we can use them with an ionic modal. So we'll go ionic serve just to set a starting point, and we can see in the browser, here we go. So let's hop into our bookmark-create file, and we're going to copy template-url and controller from the conflig block, and then we're going to delete the config block entirely, and replace this with a directive. 

[00:30] We're going to call this directive create-modal, and then from here let's go ahead and create our directive definition object. We're going to go with isolated scope, then we will paste in the two lines that we copied from the config block, and then from here we are going to define some properties onBind to controller. 

[01:07] The first thing that we're going to define is the modal property which we're going to go with binding isolated scope, the next thing that we're going to do is define the method that we want to call from this modal, and that's going to be create so we're going with expression isolated scope here. Now let's hop into the edit file and we're going to do the exact same thing. We'll copy these two lines, then we're going to delete the config block and define our edit modal. 

[01:46] Then we'll define our directive definition object, we'll go with isolated scope, paste these two lines in, and then set our bind to controller. We'll go with modal, id, and then edit as expression isolated scope. Then we'll hop into our bookmarks template and we're going to take this block of code within the UIView, move it out, and delete UIView entirely. Just underneath this we're going to add our newly minted directives to the page. So create-modal and edit-modal. 

[02:35] Once this is in, we will hop into our browser and you can see that we have our create form and edit form sitting in the bottom of the page ready to be integrated into an ionic modal. 

Course

Building an Angular 1.x Ionic Application

Convert a UI Route into an Angular Directive

Share this video with your friends