The bindings let you associate a Firebase URL with a model (or set of models), and they will be transparently kept in sync across all clients currently using your app. The 2-way data binding offered by AngularJS works as normal, except that the changes are also sent to all other clients instead of just a server.
Live Demo: Simple chat room
Live Demo: Real-time TODO app
Include both firebase.js and angularFire.js in your application.
Add the module
firebase as a dependency to your app module:
You now have two options.
Option 1: Implicit synchronization
This method is great if you want to implicitly synchronize a model with Firebase. All local changes will be automatically sent to Firebase, and all remote changes will instantly update the local model.
angularFire as a service dependency in your controller:
Bind a Firebase URL to any model in
$scope. The fourth argument is the type
dictionary or array):
Use the model in your markup as you normally would:
Data from Firebase is loaded asynchronously, so make sure you edit the model
only after the promise has been fulfilled. You can do this using the
method (See the
Angular documentation on $q
for more on how promises work).
Place all your logic that will manipulate the model like this:
See the source for the controller behind the demo TODO app for a working example of this pattern.
Option 2: Explicit synchronization
This method is great if you want control over when local changes are synchronized to Firebase. Any changes made to a model won't be synchronized automatically, and you must invoke specific methods if you wish to update the remote data. All remote changes will automatically appear in the local model (1-way synchronization).
angularFireCollection as a service dependency in your controller:
Create a collection at a specified Firebase URL and assign it to a model in
Use the model as you normally would in your markup:
You can bind specific functions if you wish to add, remove or update objects in the collection with any Angular directive:
You can do the same with the
See the source for the controller behind the demo chat app for a working example of this pattern.