Firebase child() vs. Angularfire $firebaseObject

Question

I am trying to understand WHEN Firebase actually loads the data to the client vs. doing "lazy load" (only download the data when it's needed). The reason is that I am saving images (base64) in Firebase (please don't ask why as it's only few hundred MBs). So there are two choices:

  // With typical Firebase
  var imagesRef = Ref.child('images');

  // With Angularfire
  var imagesObj = $firebaseObject(Ref.child('images'));

Ref is just a reference to my Firebase URL.

I know with Angularfire, there is $loaded() which makes me think Angularfire actually loads all the data AT ONCE and makes it available when you call $firebaseObject() right away. Is it correct?

As for using child(), I don't see any load() event to catch based on the documentation. Maybe I missed it. But does it load all data from the server to client?

If I have like 500MB of images, I definitely don't want this load-all-at-once happening.

Ref.child() just creates the reference to child location. does not load anything. I suspect that the same is with the angular wrapper. — webduvet
I'm pretty sure $firebaseObject() will immediately load the data (see github.com/firebase/angularfire/blob/master/src/…). But you can easily check this by opening the Network tab of your Chrome console and checking the web socket traffic. — Frank van Puffelen
Judging by the fact that the path is called images, it's probably a collection. Thus, you should use $firebaseArray() instead of $firebaseObject(). — Kato

nicolas nicolas · Accepted Answer · 2015-09-01T02:42:56

firebase retrieve the data when you call .on on a ref

As not widely know, all the data are retrieved in one piece (wether you call .on 'value' or .on 'child_added'), so you better paginate your result using orderByFirst / Last, or using firebase util

What angular fire does when you instanciate a firebaseObject / array is calling on 'value' / 'child_added' from within the constructor function of the instance, so yes , the data are retrieved almost instantly (but in a defer hence the $loaded() function).

Check out the source code of the Object manager and the constructor of $firebaseObject for instance, it's pretty clear

Firebase child() vs. Angularfire $firebaseObject

1 Answers