[SOUND] Previously, we saw how to use a filter that Angular supplied out of the box, but that's not always enough. So in this lecture, we're going to learn how to create our own custom filters. There are a few steps in this process. First we need to define the FilterFactory function. And just like at sounds, this is actually an example of a factory design pattern. A factory is a central place in your code that produces new objects or functions. In our case this factory function called CustomFilterFactory produces our filtering function. For the whole filtering mechanism to work, AngularJS expects us to create a factory that produces the filtering function. At a minimum, the filter function itself takes some input as an argument and then usually returns some manipulated version of that input, in other words, the filtered output. The second step in the process is to register the FilterFactory with our module. And we do it in a very similar way that we register controllers. For controllers, we call .controller on the module. And we give a name and a function that's responsible for the controller. And for the filter, we call the filter method on the instance of our module, specifying the name for our filter and referencing the FilterFactory functions that's responsible to create our filter functions. Now the name of the filter must be a valid AngularJS expression identifier. A safe bet for naming the filter is to use anything that would be a valid variable name in JavaScript. The name of the function itself which in this case is CustomFilterFactory, can be anything you want. There's no correlation between the name of the function and the name we're registered the factory with in AngularJS. However, it's nice to name it similarly so you don't get confused down the road. We now need to inject our filter into whatever construct we're planning to use it in. In this example, we're planning to use it inside of a controller. In other words, directly in the JavaScript itself. Instead of the HTML, so we need to inject it into the controller function. And we do it in the usual way we've done before which is add one more value into the array on the $inject property of the controller function and specify that as an argument in the same position when we define the controller function. Obviously the whole point of injecting the filter is to eventually use the filter, so in the last line you could see that we're using our customFilter, passing it our message as the input. Notice that the name of the filter we're injecting is not the name we registered the filter factory with. In fact the name we use is the originally registered name plus the word filter just as shown in red. Also notice that unlike the filter service that we've seen before, calling customFilter actually calls the filter function. If you recall, calling the filter service doesn't actually call the filter function but simply creates the filter function for us. These two facts are not a coincidence. Let's go back for a moment. Remember, when we register our filter, what we are really registering is a factory that creates our filter function. On the other hand, we've seen before that when you call the filter service, specifying filter function you want to instantiate like uppercase for example. The filter service calls the uppercase filter factory, which is already supplied by Angular, to create the uppercasing filter function. Having gotten the filter function, you can execute it with a supplied value. However, when we're injecting our custom filter straight into the controller, Angular calls our registered filter factory for us. For example, CustomFilterFactory, and allows us to inject the product of that factory of whatever that factory returns, which is our actual filter function. In the process, Angular names the actual filter function we inject using the name we registered a factory function plus the word filter appended at the end. So if we registered a factory function called custom, AngularJs will execute our factory to create the actual filter function and name it customFilter, appending the name filter to the end of the registered factory name. As a side note, it's probably therefore, a bad idea to register your customFilter factory with the name filter at the end of the name. So for example, if you registered the customFilter factory function with the name customFilter, Angular would append the word filter to that and you would be forced to inject it with a name customFilter filter. Kind of awkward, so avoid that. That was a lot of background detail but it does help you understand what's going on, so you're not memorizing strange rules. But that was a lot, so if you didn't get it all on the first try, I suggest you go back and rewatch this part again. For now, let's review the essential steps again. The first step is to define our FilterFactory function. This is the function that creates and returns an instance of our filter function. The second step is for us to register our FilterFactory with a module. And we do that with calling the filter method, giving it the name of our filter, and specifying the FilterFactory function that is responsible for creating our filter function. The third step, at least, if you're trying to use your filtered directly inside of JavaScript like in a controller or something similar to that, then you need to inject the filter with the name of the filter that you're registered it, plus the word filter attached to it. As in this case, customFilter. Now, in part II of this lecture, we're going to jump into the code editor and see these concepts in action.
