3-way-data-binding using AngularJS, Yeoman, FirebasedB using AngularFire

We are going to set-up step-by-step and out of the box Bootstrap and some AngularJS recommended modules, AngularFire and Firebase Simple Login and quickly view how to use 3-way-data-binding:



Yeoman helps us to kickstart new projects, prescribing best practices and tools to help you stay productive, and is going to be perfect for our example.


Install NodeJS:

To install node.js we can download a pre-compiled binary package which makes a quick and easy installation. Head over to and click the install button to download the latest package.


Installing Packages for Node:

There are many packages for Node such as the popular grunt.js, you use the command npm to see a complete list run:

To list installed all packages run:

To upgrade npm packages:


Install Yeoman:

Let’s use -g global (all the projects)



Install the Angularfire Yeoman Generator:

Yeoman generator for AngularJS + Firebase (and AngularFire) – lets you quickly set up a project with sensible defaults and best practices.


So we ends up with this:
yo@1.2.1 /usr/local/lib/node_modules/yo

generator-angularfire@0.8.2-7 /usr/local/lib/node_modules/generator-angularfire

Screen Shot 2014-09-22 at 11.28.20


Sign-up for Firebase:

The first thing you need to do to get started with firebase is sign up for a free account. A brand new Firebase will automatically be created for you with its own unique URL ending in We’ll use this URL to store and sync data.

Create a new project:


If you need more information about firebase read the quick introduction:


Questions by YeomanJS:

  • Firebase instance: Type in just the firebase prefix
  • Use FirebaseSimpleLogin: N
  • Would you like to use Sass (with Compass)?: Y
  • Would you like to include Bootstrap?: Y
  • Would you like to use the Sass version of Bootstrap?: Y
  • Which modules would you like to include?: Enter (means all)

Screen Shot 2014-09-22 at 11.33.03

Time for a coffe!

This is going to take 2-3 minutes, and Bower will now fetch all of the JavaScript libraries we said we need, and install them into our new web app. Bower is a package manager similar to npm from NodeJS, but goes and gets web assets like JS libs for us.



Running the test will run the unit tests with karma.


Any problem?:
if you have this error: “Running “bower-install:app” (bower-install) task Cannot find where you keep your Bower packages.”, there is a bug that prevents it running smoothly out of the box with Angular >1.2.*

comment this line on the Gruntfile.js:

// Automatically inject Bower components into the app


Let’s build it:


Running the example:
Now we have all up and running, so let’s give it a try:

Screen Shot 2014-09-22 at 11.47.44



Final results:

Test the three-way binding/syncing (Model/View/firebase dB).:


Click on ‘chat’ and leave a mesage.

Open a new browser, at the same URL, and do the same.


Now go to your firebase dB cloud, and see the results:


All the chat are sync with the dB.

Screen Shot 2014-09-22 at 11.59.59

In case you want to clone the repository from Github:


Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *