2.1 Refactoring a Directive

Hi folks, in this lesson we're going to create a first component by re factoring an existing directive into a component. This will highlight some of the fundamental differences between directives and components. Angular components on a straight replacement for directives. Directives still have their place in an angular application. Components are a replacement for just one type of directive. An element directive that does little or no dom manipulation. Directives based on class names or attributes or directives that make heavy modifications to the dom are better off remaining as directives because of some of the limitations of components. That's not to say that components aren't a powerful and great addition to the framework. It's just that they aren't suitable for all occasions. So let's get started. First of all, we can create a new folder in the JS folder of the project called components. And let's copy the directive that we're going to refactor into this new folder. Is currently in the app/js/directives directory and it's the file called model.js. We should also update the path to this file in app.html to point to the new location. Let's open up the modal.js file now. It's a super simple directive that is responsible for creating a modal window for the save named feature of the app. It's an element directive and it doesn't do any direct DOM manipulation. So this is the perfect type of directive that would suit being reflected into a component. The feature is actually pretty weak. The contents for the modal was hard coded into the directives template which means that it can only be used to create a specific type of modal. This is no good at all. So let's also give it a bit of an upgrade and make it a bit more useful. First of all then, we want to update the method that we use to define it. Currently it's using the directive method. So let's change that to the component method. The directive method expected a function as the second argument following the name of the directive. But the component on the other hand expects an object as the second argument. The first argument is still the name of the component, and this can usually stay the same. So let's change the second argument to an object. This object takes the same format as the object returned by the function that the directive used to take. So we can lift the two properties straight out of this object and add it to the new objects that we just added to the component method. And we can get rid of the function entirely now. So, as you can see, the definition is much simpler for a component than it is for a directive and allows us to remove some of the function boilerplate associated with directives. So already that's an improvement. The template URL property is required to tell the component where the template resides and this can stay exactly the same. The restrict property actually isn't supported with components because components are always restricted to elements. So we can remove this property entirely. At this point, the app no longer works and there's a very simple reason for that. Let's just open up the template that goes with this component. So the reason why our component doesn't work at the moment is because of the scope. Components always have an isolate scope. So, the property in the template that the NGF is looking for, the show modal property doesn't exist in the component scope. We can fix this temporarily by adding a dollar parent qualifier to the NGF binding inside the template. So, this only works for the show modal property. It doesn't work with the methods but that's fine for now. Let's just run the app and take a look. So, we don't have any console errors, but let's just create a new note and try to save it and see what happens. We still see the modal, but we can actually close it now and nothing happens when we try to save it. But that's fine for now. We’ll come back and fix things up properly as we progress through the course. So, in this lesson, we saw how we can convert an existing directive into a component. We learned that directives which are restricted to elements and directives which don't do much direct DOM manipulation are the kind of directive that will often be better expressed as a component. We saw that we should use the component method to register a component with angular and that a component doesn't require us to supply a function that returns an object. We can just supply the object to return directly. We also saw that we don't need to specify the restrict property for a component, because components are always restricted to an element. Thanks for watching.