Stateful filters with promises in AngularJS

Benjamin Roth
InstructorBenjamin Roth
Share this video with your friends

Social Share Links

Send Tweet
Published 9 years ago
Updated 5 years ago

This lesson illustrates how to use promises inside Angular filters

[00:01] Here, we have a list of artists with their associated category IDs, and here, we have the list of the categories. Our end result would be to list of artists with that category name.

[00:12] Our setup is the following. We have a data service which returns two promises. Promises are responsible to fake Ajax requests, and return the artist array and the music categories there.

[00:29] We have a controller, which fetches data, and we have our filter, which is supposed to return a category name from a music category ID. Let's try to implement our filter. It would consist in using our data service. Once we have our music categories, we can try to get the category.

[01:02] Let's check my ID. I have Lodash set up, so I can do it pretty easily. If I have a category, I can return category name. But actually, that doesn't work. It isn't updated, and it keeps the initial data by return.

[01:40] Let's take a look at the angle argumentation, particularly, the stateful filter section, where you can see stateful filters are strongly discouraged.

[01:56] You can see they are executed one or more times during each digest cycle. We could make our filter stateful right now, but this would break badly, I already tried. Let's start with implementing the cache implementation. Our cache would be a mere JavaScript object, and there, if our cash contains the expected music category ID, I could return it right away.

[02:42] Otherwise, I could send it right away with some waiting text like fetching. There, instead of returning, I would set my cache with the category name. Our output here is empty, we have to make our filter stateful in order to have the expected behavior. You can see it was fetching, and then, we have our titles.

[03:31] Let's see it again in action. It's fetching, and what's the categories are found, are retrieved from the server, they are properly displayed. What I strongly encourage is to cache the promises, because they are going to be queried a lot within the filter, let's do that.

[03:51] We add a cache again, in our data service. Here, if cache notes music categories exist, we are going to return it right away. Or else, we are going to store our promise inside, and we return our promise here. As you can see, the behavior has not changed, but we have some more optimization.

egghead
egghead
~ 2 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today