Name: Firebase Data Relationships
Uploaded: 2014-05-02T14:18:47-05:00
Description: Data has relationships, and Firebase allows you to define those relationships in your AngularJS applications.

Data has relationships, and Firebase allows you to define those relationships in your AngularJS applications.

https://app.egghead.io/api/v1/lessons/angularjs-firebase-data-relationships/subtitles

Firebase Data Relationships

Lukas Ruebbelke: [00:00] Hello, this is Lukas Ruebbelke and in this tutorial I'm going to show you how to structure your Firebase data so that you can have relationships between data objects.

[00:13] Now this is a slightly advanced topic and something that I had to actually work a little bit to wrap my mind around about how to actually structure your data to allow you to say, "Get me all of the items based on this criteria."

[00:28] In Firebase, all of the data is actually completely denormalized. It's just one large data object, and you do not have the ability to say, "Give me all of the items based on this query."

[00:41] You have to structure your data slightly different in order for this to work. In the example, what I have is a drop-down of users. Then I'm listing the items for that user. Then I have the ability to actually add an item for that user.

[01:00] This is what we're going to be building out over the course of this tutorial and you'll see how to actually keep your items and your users separated, but then establish the relationship between the two in the code.

[01:18] In our JavaScript, I have a main controller that is essentially watching the current user dropdown and then when that's selected it's saying, "Get me the items for the current user." Then from there, when an item is added is we're simply adding that to the item service.

[01:36] We have a user service that we're going to be filling out here that is going to involve adding items, getting items, removing items. Then I have an item service that we're going to be adding items to.

[01:54] Then also I have one more piece that I'll get into in just a moment is I have an item directive that deals specifically with a single item. We'll see why that's important in just a moment.

[02:07] The first thing we need to do is when an item is added we're sending in an item object. Let's jump down and let's do this method first.

[02:24] We're going to call add on the items array. We're going to pass an item.

[02:31] Now when this is completed we have a promise that gets returned that has a primmer that is the reference object that was just created. This is really useful when you actually need this information to create another item.

[02:51] What we're going to do is we're going to take this reference item and we are going to call this add item for current user and pass this in.

[03:04] What we're doing is we're saying, "Create an item in the items collection and then when you create that item, pass in the reference or the key and we are going to pass that over to the users." Then from here we're simply going to say...

[03:34] We're going to get a child reference for the current user, but we're actually going to be building out the endpoint for this manually. We're saying, "The current user items." Then we actually want the item ref name. This is essentially the key.

[03:59] Then from there, we are just going to set this to true. We could set it to anything, but we need to actually set it to something so that it goes into the remote collection.

[04:11] We're going to hop over into the demo and we are going to select myself as a user and we're going to add a new item.

[04:27] Let's look at the actual Firebase so you can see that we've created a new item here, name new item, and you can see the key here.

[04:39] Then if you look down into my user object, we've created an items property that we have pushed the key for this item into it and we've set it to true. Now we have a reference to this item's object.

[04:56] Essentially what we're doing is creating an array of keys that we can then point to and iterate over in just a moment. The very next thing that we need to do is to actually jump back into the code and let's get the items for the user.

[05:15] From here we simply can say return users child. We're going to set the current user plus item. Now we're simply saying get us all the object with all of the items and the item keys for the current user.

[05:40] Then from here we select my name. Now you can see that there is this item here.

[05:48] In the JavaScript you can see that I have created this directive that I am taking an item ID. So I'm getting the user items, which is just a collection of item keys. Then I'm going ahead and creating a directive that creates a single Firebase instance for each item in that array.

[06:09] Firebase instances are very lightweight and so I've had hundreds of these on a page and there's been no problem. It's just easier to actually than take the key and then create an individual reference to that via a directive, so it provides some nice encapsulation.

[06:26] From here I'm saying get the item ID and then create a new Firebase reference for that. Then I'm getting the URI items and then the item ID, which matches up to this data structure here that says, "Items." Then I'm passing this in so that I'm getting this particular item.

[06:48] Then from here is that, once it's changed then I'm saving it internally. But if I need to actually remove it, then I go ahead and I delegate that up to the item service since it's more of a global concern.

[07:06] For remove item, then we simply go items, remove, item, ID. Then using the promise again.

[07:20] Now this is slightly different because we actually know the item ID that we want to remove now. We don't actually have to even wait for the reference or use that.

[07:34] We'll call remove item for current user and we'll just pass this item ID through. Then up here we are going to simply go...like so.

[08:05] Let's hop into the application and let's go ahead and we'll delete this new item. We're going to click remove. It's been deleted, but let's look over. You can see now we no longer have any items in our collection and it's been removed from it.

[08:26] Let's just see this real quick one more time in action. Let's create an item for Joel. OK, so we can see we've created this item.

[08:41] Let's create an item for John. Then we'll create an item for myself.

[08:57] What we should have now is three items in our collection. We have the new new item, John's item, and Joel's item. But then if we look here into the users, we have an items collection with the IDs for the items that we were created that now we can reference and then iterate over.

[09:27] When you actually select a user it's going and saying, "Get me all of the item IDs for this user." Then we in our HTML is we are iterating over this.

[09:42] We're saying, "ID item and items." Then we're instantiating this item directive, passing the item ID, and then handling it as if it was an individual Firebase object.

[09:54] The big thing to take away from this video is that when you are handling relations in Firebase, you need to essentially manually normalize your data.

[10:06] Using the promise that is returned from the creation of an item, you can then use that reference to push that key into basically, essentially another data structure and then pull it out in your HTML.

[10:21] This concludes this lesson on establishing relations in Firebase and how to structure your data. Stick around for more videos on this topic. I look forward to seeing you next time.

Firebase Data Relationships

Share this video with your friends