[SOUND] In Angular, you could

use a special construct called a filter to change the output of an expression.

And you could do that either in HTML or in JavaScript.

So here we have an example of a filter being applied to some value.

And it's an uppercase filter which means whatever the value is,

it will go ahead and take that string and uppercase it.

Angular supplies us with some pretty fun filters like the one you see, uppercase,

there's also lowercase, currency, number, etc.

Obviously we will need to inject the filter service,

in other words $filter in our controller first, so we could use that in our code.

So the filter service is a filter function creating service.

So in other words, this part of the statement creates a filtering function,

and then it gets executed using the params right after it.

So we just put the whole thing in one line, but really could have created

the filtering function first, and then called it with the params value.

Filtering function sometimes have custom arguments that change the way

the filtering function is filtering or changing the expression output.

To change the way the filtering function changes the output,

you pass it custom arguments.

And the arguments are specific custom arguments to each particular filter.

So in this case, we see the currency filter, and you could pass it a couple of

arguments, which we'll actually see an examples when we jump to the code editor.

A really neat feature in Angular is that you could also use these filters

straight in your HTML file.

Just by placing a pipe between the output of some expression and

the name of the filter.

Now, obviously,

the expression doesn't have to be a string literal as I placed here in this example.

But it could be anything that is a $scope.value, whatever the value would be.

Which in this case, we'll evaluate the Hello in the controller.

So you can attach a value to the scope service, and

then just output value right here instead of a string little Hello.

And as I said, when you place an expression followed by a pipe, and

the name of a filter to apply,

the output of this entire expression will be HELLO in all uppercase.

We could likewise apply custom arguments inside the HTML as well.

All we have to do is separate those custom arguments by a colon.

So in this case you see the currency filter is being applied with some

custom arguments, separated by a colon.

Let's jump into the code editor and see some examples of this.

So we're back in our code editor, and I'm located in Lecture12 folder which

is located in fullstack-course5/examples folder.

And since my browser sync is already started.

I can take a look at my same app,

basically a copy with feed Yaakov one has this message that we keep outputting from

a method called Yaakov likes to eat healthy snacks at night.

Well, let's go ahead and in our app.js change this phrase,

Yaakov likes to eat healthy snacks at night, to all uppercase.

And the way we're going to do that, is we're going to use the filtering service.

So the first thing we need to do, is we need to augment our $inject property

that we placed on our MsgController, and we'll go ahead and do that.

And tell it that we're also going to inject a filter service, and obviously,

we actually need to go ahead and place the filter service so

it gets injected properly.

So now we're done.

What we could do is we could create a var called message.

I'll just call it for short, msg and

we'll just copy this whole thing and make that the message.

Let's go ahead and copy that.

And what we're going to do is we're going to use a filtering service to create

a filtering function that will uppercase everything.

But we'll go ahead and apply the message as a value to it at the same time.

So we'll go ahead and say output, and now we need to create the filtering service.

And the filtering service will use uppercase filter.

And once we have this uppercase filter function,

we can now execute it with our message as the argument.

Now that we're done, we have to substitute this with our output.

So that's going to be the output.

We'll save it, go to our HTML page and

as you could see, that everything now is in uppercase.

So the question of course is, how did I know?

Where did I figure out this uppercase?

Where did that come from?

Let's go back to the browser and go to angularjs.org.

And if you go under Develop and Developer Guide,

you'll see that the whole bunch of different topics here.

One of them is Filters.

So if we click in this Filters one,

it will explain to you a whole bunch of things about filter.

But one of the things it will link to you is

Angular comes with a collection of built-in filters.

So let's go ahead and click on that.

And you could see the names of all these built in filters right here.

And one of them is uppercase as we have been using.

And if you click on it, you'll get some documentation as to how to use it

in JavaScript, which is what we did just now.

And how to use it inside of an HTML template or inside of HTML.

So let's go ahead and back out of this for a minute, and

go to the Currency filter, and take a look what we have available here.

So the currency filter can be applied just so we can apply the uppercase filter,

with the first argument being the amount, then the symbol like a dollar sign, and

then the fractionSize like 0.00, 0.000 and so on.

Let's go ahead and use this documentation, but let's use the HTML version of it,

and create a little line that will show us the costs of the cookie Yaakov is eating.

So let's go to the HTML page and write after the button right here.

We'll go ahead and say Cost, and we'll give it an expression and say cookieCost,

and we'll give it a filter of currency, and we'll just leave it like that for now.

Of course nothing is going to work yet,

since we didn't define what the cookieCost is on our scope service.

So let's go back to the app and let's define the cookieCost.

Let's go $scope.cookieCost and let's give it 45 cents,

.45 notice we're not giving it dollar sign 45 or

dollar sign 0.45 as a string.

We're giving it as a real number so we can actually do then, let say some

cookie calculation or something by meeting 100 cookies instead of just one.

It's possible if I try hard enough.

So now that we've defined the cookieCost on the scope service,

we could go to our web page and see that it updated with $0.45.

So it knew to insert a zero to that string

to keep the period, and then 45 and put the dollar sign in front of it.

So let's customize this a little bit, instead of the dollar sign,

let's create a sign for my own currency which I'm obviously going to make up.

And we'll also extend the 45 to have the couple more zero afterwards

because my own currency is super exact.

So if I go back to my editor, and go to my HTML page.

So I can use the colon to supply its first argument, or its first custom argument.

Which is the currency sign.

And in my case is going to be #blah.

But we also wanted to extend the .000 and

make it as exact as four decimal places instead of just two.

So we'll put another colon there, and we'll put number four.

We'll save that.

We'll go back.

And you could see now, the cost of this cookie is number sign or

hash sign blah 0.45, and

we're going now to four decimal points instead of just two.

And all our previous functionality obviously still works, so

let's go ahead and feed Yaakov just for the fun of it, cool.

Lecture 12: Filters

Single Page Web Applications with AngularJS

Rencontrer les enseignants