Chapter 4 ■ Filters and Modules
We have talked about the Separation of Concerns principle, so let us take a moment to consider whether or not
formatting tasks, such as changing the case of the text we present to our end users, logically belongs in a controller.
Doesn’t this seem like a task for which the view should be responsible? In one sense, formatting data for presentation
is indeed a view-related concern. However, you could also argue that a controller should bear some responsibility for
making sure that data is ready for use in the view.
The developers of AngularJS take a stance on this and say that such concerns are better dealt with as the data
flows from the controller into the view. In fact, this is why a filter is called a filter; the data is “filtered” as it travels from
the controller into the view.
Some filters can be much more complex than simple case converters. In the lowercase scenario, we were able to
use a single JavaScript method call directly in the controller without things looking messy and out of place, but had
we wanted to implement title casing (whereby the first letter of each word is in uppercase and the remainder are in
lowercase), things would have gotten a lot more involved and required a much more modular solution. Obviously,
having to repeat such logic in each controller or application in which you might need it is not a very DRY approach.
■ Tip the drY principle states that “Every piece of knowledge must have a single, unambiguous, and authoritative
representation within a system.” an easier way to say this is simply “Don’t Repeat Yourself.”
While it is true that the filter may be added to the view in multiple places, the underlying implementation of that
filter need only be written once.
Of course, it is up to you to decide how to approach any given situation. Filters are simply an option that you have
at your disposal. Nonetheless, filters are a great way to keep your code modular and clean, as they make for a good
unit of reuse across AngularJS projects. In fact, as there is a vibrant developer community both contributing to and
sharing AngularJS filters online. They make for a good unit of reuse for everyone.
■ Tip a great source of modules (filters, directives, and services) is available at http://ngmodules.org/.
Built-in Filters
The empowering aspect of filters is, in my opinion, the ability to create your own filters and share them with the rest
of the team (or AngularJS community). That being said, AngularJS ships with a very handy set of filters. We will look at
these built-in filters now, starting with the number filter. We will look at how to craft a custom filter before the end of
this chapter.
The Number Filter
This filter will help us address another issue with our sample data: the overly precise value of the consumption
property (which represents the amount of data that the customer has used for this billing period). Let’s make this
friendlier by rounding the number of places after the decimal point. Listing 4-4 shows how you can achieve this.