4.4 Refactor

Hi. In this episode we'll have a little bit of reflectoring because right now our edges controller does a lot of stuff. So, let's have a look. Here it is. We have edges here. We have categories for our filters, we have categories for our new form. And we have ranks. And we even create newEdge and filtering and and selecting and displaying requirements. So a lot of stuff. What we actually want to do is to split it a little bit. So if you go to edges HTML page, you can see here three distinct areas. So the first one here is filters, the second one is the list of edges, and the third one is new form. So one of the way to separate and compose our application is just to take these things and split them to different controllers. So that's what we're gonna do in this episode. So let's start from this new edge form. For that let's add here on this div directive ng-controller. And we call this controller NewEdgeController, like this. So now we need to create this controller. In scripts controller we create new-edge.js, so here it is, let's save it. And of course we need to go to index.html and add this controller, right here, new-edge. So now basically I'm going to open split here, and let's go to edges.js. And right here what we want to shift there is, for example this functionality for newEdge. So I'm gonna cut it from here, and paste it right into here. And because of the scope inheritance, all of these things like categories in the parent controller will be available to the child controller. So let's have a look in the browser. It should still work. So our new form, okay, doesn't work. Scope is not defined of course. So let's go here and inject scope. And, of course, here we, use an edges. So let's inject edges as well. And now if we try to create new stuff here, it works, excellent. But that's not all, because basically, in this part here we have categories and ranks. So why not to shift them in the controller as well, and remove this so the categories and clearRanks bad names. So we have here edges, and we will have also ranks. So I'm gonna copy it and paste it right here. And then we will have categories, and with categories, we have a little bit of problem. So here we will have categories, and we fetch them from server. Gonna delete this one and, and this one. And here I want to unshift it, so I do scope.categories. And I unshift here the object name, All, okay? So if I save it and go back, let's right now concentrate on this part. It works, but we do not have default value selected. So for this default value to be selected, we need actually to make it right here. Scope filterBy, that's where our selected value resides, category and it equals to scope, categories 0. So now we need to move this thing from here to the top right here. And I'm gonna delete category from here, and that should work. Yeah, it works. As you can see, we have all categories and all of this stuff works fine. So and ranks are here as well. So now we can remove this clearRanks from here and move it right here because we need here the ranks with slice. But I will rename it to simple ranks. And for categories, we also will have categories with categories, that query. And I need it to add them right here so we have ranks and categories. Okay. So let's go back here, and let's have a look. And it doesn't work because we need to change names on the HTML page. So let's go to edges.html. And right here, under newEdge, we have server categories. So we have just simple categories. And here instead of clearRanks, we will have simple ranks. So now if we go back, we're back to normal, and we can create everything and it works. So now we have a separate newEdgeController, and here we have the newEdge. We have ranks and categories for the form and the logic for the form, and our edges controller gets rid of all of the stuff. But still, in this controller, we still have filters. So let's extract filters as well. So for that, let's come back to our HTML page, and scroll up and here we have our filters. So we need to enclose it in additional div, so I'm going to have here a div with ng-controller filtersController. And I'm gonna scroll down and close this div. Okay. So now I need to create it. So in scripts, in controllers, I'm going to create filters.js. So here we have our FiltersController, and of course we need to add it into the index.html as well. So we call it filters. Okay, now we can shift some behavior from the EdgesController from the bottom to the FiltersController. But the problem is that EdgesController and FiltersController should use this filterBy object. And basically, we set this filterBy object in the FiltersController. But parent controller can't have access to the child's variables, to the child's scope. So what we can do is to create another service for this filterBy for sharing this information. So let's do this, we call it filterBy, and let's create service filterby.js. And we will use the most simple service, value. We just filterBy name, and here we have an object, with a search string as an empty string, category as a null, and rank as null. Okay, now we need to include it into the index.html as a service, filterBy. So now we have access to the filterBy. Let's go to filters here. And I'm going to inject it into filterBy here. So now let's have a look. We want to shift almost everything from here with filters, with ranks, and with categories. I cut it and paste it into here. Okay? So here instead of this filterBy, I will delete these two lines, and this one. And here I will define filterBy service.rank equals scope ranks, and the first parameter from here. And the same stuff here without the scope, just filterBy category scope categories. So, this way way from the child controller, I save information into this value service of filterBy, and it will be available right here in the EdgesController. So, I'm gonna save it, go to EdgesController. I do not need ranks and categories here anymore, as dependencies. This controller is much slimmer now. So, let's save it, and go back here. It does not work. And it doesn't work because we need to have filterBy on the scope here. So what we do here, scope, filterBy equals filterBy. And of course here in FiltersController, we need to include ranks and categories and scope. So now if you save it, go to browser, and you can see that it works as it worked before. But now we have three different controllers. One controller for filters, one controller for the list, the parent controller, and one controller for the new edge. Okay, in this episode we refactored our controller into three separate controllers which made them much more slimmer and more maintainable. So thank you very much for your time and see you in the next episode.