Google Drive Realtime and Angular magic

Question

I was watching the youtube video at http://www.youtube.com/watch?v=HCyrywLtWIs&feature=g-user-u by Steve Bazyl about the introduction of the drive realtime api. He mentioned that working with the realtime and the angular framework is like magic. I've started looking into what it would be like but am not seeing the magic. I am well aware that it is probably me not being a guru on either and am missing some small piece.

Would anyone care to enlighten me? I'm guessing that there is a very nice way that it keeps the in memory data model auto-magically connected to the ui and synced with others editing and the actual drive file. Am I close?

Answer 1

Magical may have been an overstatement, but here's a few reasons why I think they work well together.

• If you take the time to declare types for your model, they work just fine with angular's data binding and properties can be used with ng-model.

• More importantly, handling remote events is a breeze thanks to the way Angular works. All you really need is a single event listener:

  doc.getModel().getRoot().addEventListener(
    gapi.drive.realtime.EventType.OBJECT_CHANGED, 
    function(event) {
      if (!event.isLocal) {
        $rootScope.$digest();
      }
    });
  

  That's all you need to do to ensure your UI updates appropriately in response to remote events :)

A few exceptions:

• Collaborative strings are special. If you don't care about cursor position, you can do a simple monkey patch to expose the text as a standard property that works with ng-model.

  Object.defineProperty(gapi.drive.realtime.CollaborativeString.prototype, 'text', {
    set:function (value) {
      return this.setText(value);
    },
    get:function () {
      return this.getText();
    }
  });
  

You can then bind to a collaborative string like:

    <input type="text" data-ng-model="myCollaborativeString.text"/>

For proper cursor positioning, its not that hard to write a reusable directive to do that. I'll start a collection of useful directives and such on github in the next few weeks so creating a fully collaborative text field is as simple as adding an attribute:

    <textarea data-rt-collaborative data-ng-model="myCollaborativeString"/>