Lecture 13, Part 2: Creating Custom Filters

Loading...

From the course by Johns Hopkins University

Single Page Web Applications with AngularJS

1362 ratings

Johns Hopkins University

Single Page Web Applications with AngularJS

1362 ratings

Course 5 of 6 in the Specialization Ruby on Rails Web Development

Do you want to write powerful, maintainable, and testable front end applications faster and with less code? Then consider joining this course to gain skills in one of the most popular Single Page Application (SPA) frameworks today, AngularJS. Developed and backed by Google, AngularJS is a very marketable skill to acquire. In this course, we will explore the core design of AngularJS 1.x (latest version of AngularJS 1), its components and code organization techniques. We will enhance the functionality of our web app by utilizing dependency injection to reuse existing services as well as write our own. We will create reusable HTML components that take advantage of AngularJS data binding as well as extend HTML syntax with a very powerful feature of AngularJS called directives. We’ll set up routing so our SPA can have multiple views. We will also learn how to unit test our functionality. At the end of this course, you will build a fully functional, well organized and tested web application using AngularJS and deploy it to the cloud.

From the lesson

Module 2 - Filters, Digest Cycle, Controller Inheritance, and Custom Services

We will start this module by learning how to use Angular filters to manipulate our data into the format we want and learn how to create our own custom filters. We will then dive deep into the digest cycle, which is the process AngularJS uses to magically update our web page with the bound data from our ViewModel or the controller. Understanding this process is crucial in getting comfortable with AngularJS. We'll also see some cases where we'll need to assist that process somewhat and understand why that is. After that, we'll learn one of the most fundamental concepts in the Javascript programming language, which is Prototypal Inheritance. Clear understanding of that topic is a must before we talk about inheritance between AngularJS controllers in our application. We'll finish off the module by learning how to create our own custom Angular services as well as how to configure them. With custom Angular services we'll be able to share data across different controllers or other components in our application. We will also learn a few useful Angular directives that allow us to place looping and conditional logic direction into our HTML. You'll see that by the end of this module, you'll have the skills to create a fairly sophisticated web application that starts to use some of the more advanced software architecture techniques.

Welcome to Module 21:46

Lecture 12: Filters7:51

Lecture 13, Part 1: Creating Custom Filters6:13

Lecture 13, Part 2: Creating Custom Filters3:53

Lecture 13, Part 3: Creating Custom Filters8:43

Lecture 14, Part 1: Digest Cycle4:16

Lecture 14, Part 2: Digest Cycle7:23

Lecture 14, Part 3: Digest Cycle9:00

Lecture 15: $digest and $apply10:08

Lecture 16: 2-way, 1-way and 1-time Binding11:37

Meet the Instructors

Yaakov Chaikin
Adjunct Professor, Graduate Computer Science
Whiting School of Engineering

[MUSIC]

In part one of this lecture we went over the process of how to create custom

filters.

In this lecture we're going to go ahead and implement some of the custom filters

in the application that we've been dealing with so far.

So as you can see here, one of the messages we're returning

from our controller is Yaakov likes to eat healthy snacks at night.

So let's bump it up a bit.

Let's not say likes, let's say love.

But, in this case,

we're going to replace the word likes with loves using a custom filter.

So, let's go to our code editor and

the first step is to create our filter factory function.

So let's go ahead and see where the controller ends so

we can put our function right underneath that.

And we'll call this function LovesFilter.

And since this is a factory function, it needs to return another function.

And that function is going to take an input, and

we need to put a semicolon here.

And basically,

the first thing we're going to do is make sure that our input actually exists.

So we'll say, if it's input or if it's not there, we'll just give it an empty string.

And then we'll just replace the input by saying input.replace.

And we'll replace the word likes with the word loves.

Okay, and then obviously, we need to return that newly created input.

So, so far, so good.

Now we need to register our factory filter with the Angular application.

So let's go back up and instead of terminating the controller,

we'll do one more statement.

We'll say filter, and we want to call it loves, and

give it our factory function, which is LovesFilter.

Okay, so now we need to use this LovesFilter.

Since we already have a function called sayMessage, we'll go ahead and copy that,

and we'll create another one called sayLoves, or maybe sayLovesMessage.

Okay, and in this case, what we're going to do is,

we're going to apply our filter.

But before we can do that, we need to inject it into our controller.

So we'll go ahead and append one more array item into the dollar sign injector

array that's attached to our controller function, and we'll call it LovesFilter.

And remember, this loves comes from the filter name, and the filter is going

to be appended by Angular.js for us, so we have to name our filter LovesFilter.

And we also need to give it as a second argument,

since we placed it as a second item in the array of the injections, okay?

So now it's lovesFilter here too.

And now we could use this lovesFilter inside of our sayLovesMessage.

So what we're going to do is we're going to take this message and

we're going to call lovesFilter, pass it this message.

And actually we'll just override the message using that and

then we'll return the message.

So, so far so good.

If we go to the index HTML,

we'll see our original message which is right here, let's call it original.

And we'll put a break here, it's a little ugly but it will do.

The loves message will be similar, but this one will say sayLovesMessage and

we'll give it a paren, so we'll execute that function.

So when we save it, and since my browser sync is already working,

I'll go to my browser.

As you can see, love says Yakov loves to eat healthy snacks at night.

So so far, so good.

And in this sayLovesMessage what we ended up doing is using a custom filter

inside of our JavaScript.

And in part three of this lecture,

we're going to take a look as to how to create custom filters with extra custom

arguments as well as how to use our custom filters straight inside the HTML template.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play