Use $loaded With Firebase and AngularFire

A few times now, I've run into issues with my app while using Firebase / AngularFire. The documentation in the guide, shows samples like this:

var sync = $firebase(ref);
// create a synchronized object, all server changes are downloaded in realtime
var profileObject = sync.$asObject();

With that sample code above, you'll get a reference to an object in Firebase. Then, your user can modify the object as they please and later save it like this:

profileObject.email = "[email protected]";
// save the changes to Firebase
profileObject.$save();

It works beautifully. Until it bites you in the ass.

You see, AngularFire makes it so easy to deal with "live" data that you forget it's getting the data asychronously. If you use the sample above and log out the object, you will see something like this instantaneously:

FirebaseObject {$$conf: Object, $id: "-JWgqa_JxvsQR7tIAsKp", $priority: null, userName: "Joe", ....

That's great for accepting user input and things where there is a delay. However, if you are doing something with the data, like making a decision on it, you're hosed. Example:

var sync = $firebase(ref);
// create a synchronized object, all server changes are downloaded in realtime
var profileObject = sync.$asObject();

if(profileObject.accountType === 'admin') {
	// Do something here
} else {
	// Do something else here
}

Guess what? You'll never have an 'admin' user. Your code did not wait for Firebase to get you an object.

To solve this, make sure to use Angularfire's $loaded promise anytime you need to make decisions on the data. Heck, I'd say don't put the reference on the $scope until $loaded is done.

Here's how to do this the right way:

var sync = $firebase(ref);
// create a synchronized object, all server changes are downloaded in realtime
var profileObject = sync.$asObject();

profileObject.$loaded(
  function(data) {

    if(data === 'admin') {
      // Do something here
    } else {
      // Do something else here
    }  
  
  }
);

The full API docs for Angularfire show this but the Guide just lists it in a summary table.