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:

 

YeomanJS

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 nodejs.org 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

---

 

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 firebaseio.com. We’ll use this URL to store and sync data.

Create a new project:
https://mytestwebapp.firebaseio.com

 

If you need more information about firebase read the quick introduction:
https://www.firebase.com/how-it-works.html

 

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)

---

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.

 

Testing

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.*

Solution:
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:

 

---

 

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.

In case you want to clone the repository from Github: