Name: Stateful filters with promises in AngularJS
Uploaded: 2015-06-09T11:06:57-05:00
Description: This lesson illustrates how to use promises inside Angular filters

This lesson illustrates how to use promises inside Angular filters

https://app.egghead.io/api/v1/lessons/angularjs-stateful-filters-with-promises-in-angularjs/subtitles

Stateful filters with promises in AngularJS

[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.

Stateful filters with promises in AngularJS

Share this video with your friends