Firebase + Angular Dive

Using Angularfire

Sep 13, 2013 things

The app in this dive talks to a Firebase instance and renders using Angular.js.

I've built things with Angular before but this is my first dive into Firebase. Some of the characteristics which make it interesting are:

It does both kinds of auth (Z and N!) so you can dispense with backend code entirely and write your app on the client. The only exception is a simple, flexible language for specifying authorization rules.
Realtime sync
Data is synced automatically to connected clients when changes occur, enabling realtime updates in collaborative apps.
Structured data
Data in Firebase is basically a tree of JSON.

There are several other backends which have similar characteristics, including the open source deployd, which I'll be exploring in a future dive.

You can check out the source on Github using the edit link above.

First things first

I wanted to first get the stack working, so I did the basic Firebase tutorial app as a page in a Jekyll site.

I ran into one silly issue with Jekyll's Liquid processing eating my mustaches before they got to Angular, which was solved by wrapping the whole page in a{% raw %}tag.

{{}}: {{msg.text}}

Sign In

Next I added authentication. Firebase has social signin built in so it's really easy to get started.

Sign in with Twitter or Github.

You are signed in as {{}} | Sign out

Access restrictions

Being signed in is great, but I wanted to add some protected actions. I modified the chat app so that you are only allowed to post a message if you are signed in.

This would be an input field if you were signed in.

All together now

Here is the finished app.

{{}}: {{msg.text}}