Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 832 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Filters

2:19 Angular 1.x lesson by

AngularJS 1.3: Controllers can no longer be global functions.

As of AngularJS 1.3, controllers can no longer reside on window as a globally accessible function. Controllers must be declared as part of an Angular module. For more details click here

Many times while building an AngularJS application you'll need to manipulate data, and it doesn't make sense to do it with a Controller method. Luckily you have Filters, which are particularly well suited for manipulating text within your HTML views. This handy tool uses a simple syntax to create highly reusable functionality for your apps.

Get the Code Now
click to level up

AngularJS 1.3: Controllers can no longer be global functions.

As of AngularJS 1.3, controllers can no longer reside on window as a globally accessible function. Controllers must be declared as part of an Angular module. For more details click here

egghead.io comment guidelines

Avatar
egghead.io

Many times while building an AngularJS application you'll need to manipulate data, and it doesn't make sense to do it with a Controller method. Luckily you have Filters, which are particularly well suited for manipulating text within your HTML views. This handy tool uses a simple syntax to create highly reusable functionality for your apps.

Avatar
Abdel

Hi, I was watching https://egghead.io/lessons/angularjs-filters and I came to notice about "AngularJS 1.3: Controllers can no longer be global functions. ". In the details link provided.. It says to define the controller function as anonymous function .. How does this effect testing? also, this is how I currently define my controllers.. Please have a look at this jsfiddle: http://jsfiddle.net/olakara/9fyg8kvs/ . What is best practice for working on Angular 1.3 & 1.4 ?

John Lindquist: If you've been using Angular for a while, you probably watched that last video and said, "John, you're an idiot. You should've used a method here. You should've used the filter."

First, you really shouldn't call people idiots. That's really mean. Second, you're absolutely right. We should've used the filter. This is a perfect use case for a filter.

Let's take this reverse message and turn it into a filter.

Basically, all we have to do is learn the syntax of adding a filter to your module or myApp here and we'll just call it reverse.

The first function is the function it's going to handle whatever we want to inject into it. We're not going to inject anything but I'll show in a second how that will work.

This is going to return another function which is going to handle the input of the filter so the input is going to be the text and this is going to return the result of our filter.

Let's rename this message to text because that's going to be your input and then all we have to do is set this filter. Let's just make sure this is working real quick. No filter applied and then the syntax for filter is just pipe and then name of the filter is reverse. Let's see.

Filter applied. You can see this is working and now this is a much more reusable module-wide thing we can use in any of our markup there or anywhere virtually here. You can use that filter anywhere we want to inside of our module, of course.

Just to show you the injection piece. We can inject something from our module here. Let's say data and we'll just do plus data message and you'll see that this, you can see it as our filter the input of this then plus the data message which is really just that same input but now it's coming from an injected object, an injected model.

That's how you set a filter. It's pretty simple, just the name, that method is going to handle an injection and then, it's going to return a method that handles that input and that will return the result of whatever your filter wants to do.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?