How to Build an AngularJS Filter

How to Build an AngularJS Filter

May 5, 2013

I have recently been working with AngularJS
and I have to say,
I haven’t felt this productive since Rails.
I’m a bit of an architecture nut
and AngularJS gives me all the building blocks
to build a well structured application.

The first building blocks that everyone learns are filters.
They are one of a few ways to get presentation logic out of your business logic.
Filters format data to be displayed to the user.
In this post,
I will show you how to build a simple phone number filter.
First, lets see how filters would work.

Understanding AngularJS Filters

Filters are functions that are passed an expression.
They are written like this:

```coffeescript

{{ expression

filter }}

```

Real examples are always better:

```coffeescript

{{ name

uppercase }}

```

1. Create the scaffolding.

In AngularJS,
it is best to build a bunch of smaller modules
and then craft them together to build a larger application.
Not only does this make it easier to test,
but it becomes very easy to reuse components.
Following that mantra,
we will build a filter as a standalone module.

A filter is just a function that is executed on some input.
So this is all that is needed: