Create Modals with Ionic

[00:00] In this lesson, we are going to learn how to create our edit and create modal dialogues in Ionic. We'll go ahead and type Ionic serve to just establish a starting point. Now that we've seen the application, let's hop into our bookmarks list controller. We're going to inject the Ionic modal service.

[00:26] Then we will hop into the bottom of the controller. We're going to create a new method called show modal. This is going to take two arguments, a modal name and a template URL. From here, we are going to call the from template URL method from the Ionic modal service. We're going to pass in the template URL that we want to use as well as a configuration object.

[01:05] This will take scope as a first parameter. Then we will also define our animation as sliding up. This will define how the modal actually added to the screen.

[01:22] When this template has loaded, it's going to return a promise. From here, we can create a reference on our controller to the modal itself. We'll go bookmark list controller.

[01:40] Then using array notation, we will store the modal on the bookmarks list controller under the modal name. From here, we will just call show on our newly created reference.

[02:05] Let's create one more method on our bookmarks list controller. This will be called show create modal. We're going to call show modal with the name create modal. Then we're going to pass in a second parameter of app, categories, bookmarks, create-modal.tmpl.html.

[02:41] The next thing that we need to do is to actually create this template. We'll go into app categories bookmarks. Let's create this template.

[02:56] From here, we are going to add in Ion modal view. We will just add in our create modal directive. We will pass in a reference to the modal itself. We are going to define our method that we want to be called when this expression isolated scope method is called.

[03:43] In this case, after a bookmark is created, we want to get all of the bookmarks, essentially rehydrating our bookmarks collection. Let's create a reference on our controller to get bookmarks. We'll just point this to the get bookmarks method that we have in our controller.

[04:06] Let's hop into our bookmarks template. Let's delete the create modal directive. Let's take off this UI sref on this button. We are no longer navigating to this particular state. Let's add ng click. We're going to call the show create modal on our bookmarks list controller. Let's hop into our code. Let's click create modal.

[04:44] This is not working. This is because I forgot to add scope to our bookmarks list controller. Let's inject that now, back into our Web app. Now you can see that it is working, but the background of the modal is fairly dark. This is because bootstrap is colliding with our styles.

[05:09] For now, we'll just hop into our Eggly CSS. We'll set modal backdrop to background transparent. You can see here that it looks pretty nice.

[05:25] Let's hop into the create modal. We're going to clean this up. The first thing that we're going to do is add an Ion header bar. We're going to align title to center. We're going to add a class of bar calm which will give us that nice blue bar across the top. From here, we're going to add a couple buttons. The first one that we're going to add is our create button.

[06:05] We're going to give this a type of submit. We'll give this a class of button icon. We'll go with Ion archive.

[06:20] Let's create our title to sit in the middle. We'll go div class title. We'll just give it a title of create bookmark.

[06:36] Let's create one more button. We'll give this a class of button, button icon, and Ion close round. We're going to add an ng click handler here. We're just going to call create bookmark controller, cancel creating. Now let's go ahead and delete these two buttons on the bottom of the modal. We no longer need them. Let's move the contents of the modal into this Ion content directive.

[07:28] We're going to go ahead and just rebuild this form so that it looks a little better. We're going to create a label item. We're going to give this item item input, item stack label. Then we will create a span. We'll give it a class of input label bookmark title.

[07:49] Let's create an input field. We'll give it an ng model of create bookmark list controller, new bookmark title, the placeholder of "enter title."

[08:02] Let's go ahead and do this for the URL of our bookmark as well. We'll create the label for our input. We'll go bookmark URL, and we will set ng model to create bookmark controller new bookmark.URL. Set our placeholder text and our form is completed. So we'll delete the old form here. If we click create bookmark, you can see that this looks a lot better.

[08:55] Let's hop into our create bookmark controller. We're going to delete this return to bookmarks method since we're no longer using UI router for navigation in this case. We're going to update cancel creating to reference the modal that exist on the controller. We're just going to call remove. Then, on our create bookmarks method, we're going to delete the return to bookmarks method as well.

[09:24] Instead, we are just going to call create bookmark controller.create. We will call create bookmark controller.modal.remove.

[09:42] Let's hop back into our application. Let's create a bookmark. We'll click the create button. There we go.

[10:08] We are going to add in our edit bookmark functionality. This is going to be at a much quicker pace because it's mainly a lot of cut, copy, and paste work.

[10:19] Starting with show create modal, we're going to update that to show edit modal. We will change the name of the modal to edit modal, and we will point to an edit modal template. We're going to create that now by hopping into the file system. We'll put this in the bookmarks directory. We will create this file.

[10:43] From here, we're just going to paste in our HTML, Ion modal view, edit modal. We're pointing it to the edit modal we just created. We're calling get bookmarks when edit is complete, and the ID of the current bookmark.

[11:04] We are going to update the go to URL method. We're going to first create a reference to the bookmark that we just selected by setting it to a property on the bookmarks list controller as current bookmark. We're going to remove this call to navigate via UI router. We are going to call show edit modal. We will remove edit modal from our bookmarks template.

[11:39] Let's hop into the page and see what this looks like. Our directive is rendering as expected. Now it's time to clean up the modal itself. We'll hop into the edit modal. We're just going to paste the HTML in here for the sake of time. It is essentially the same as the create bookmark edit modal. We have our edit button, our cancel button, as well as our title field and our URL field.

[12:17] Let's refresh the page. This is looking quite a bit better.

[12:25] Let's hop into our edit controller. We are going to remove the return to bookmarks method because this is no longer necessary. We will delete this. We will delete the reference in update bookmarks. We are going to call the edit method which is going to kick off that expression isolated scope. Then we are going to close our modal by calling remove.

[13:02] We're going to do the same thing in cancel editing. We need to do one more thing, and that is replace the state params bookmark ID with the edited bookmark controller, ID that we're passing in via isolated scope. Let's click the edit button. You can see now that we're pulling up the bookmark. We can edit it. It's persisting to the main application.

[13:29] Let's do some quick cleanup. We'll hop into our index.html. We're going to get rid of bootstrap. We're going to rid of animations.css. We are going to hop into our Eggly.css file. We're going to remove some additional styles. We no longer need the modal backdrop style. Let's get rid of this editing and create styles as well.

[14:04] This is how we build out modals in an Ionic application.