Address book application with angularjs and google firebase – Part 1

In my previous post we learned how to code CRUD application with angularjs which was collaboration of angularjs, slim framework and idiorm with beautiful frontend framework semantic ui. In this tutorial we are going to make a address book application with angularjs, our main focus is to learn angularjs and not the backend coding, so i was looking for something which will take care of the backend for me. Then i reminded of firebase which was now taken by google.

So whats firebase?

Firebase is realtime database service, which provides us an API that allows developers to store and sync data across multiple clients.

This also gives a power to update contact in real time. This feature actually best suites for real time chatting application, I will try to make a chat application with angular and firebase, in future. Till then lets explore and understand address book application code.

We are using different frameworks and libraries as below

• Angularjs
• Firebase
• AngularFire
• Bootstrap Material

As i said before our main focus is to learn angularjs so i am not going to explain more about firebase, bootstrap material and angularfire library, But to run this script on your pc you need to setup and configure your firebase account. Lets take a quick look at configuring firebase,

Adding firebase to your project

1. Create new firebase account here
2. Click on add new project, and fill details.
3. On next screen you should see “Add Firebase to your web app” icon, click on it and copy the code
4. Paste copied code to your index.html page.

at this stage if you try to run your code you should get error like below

angular.min.js:122 Error: permission_denied at /: Client doesn't have permission to access the desired data.

This is because firebase sets some access rules by default, which allows access to this database only if user is authenticatesd. To remove this error we need to change access rules.

5. Inside project console sidemenu click on “Database”
6. Click on “Rules” tab, you should see something like this
{ "rules": { ".read": "auth != null", ".write": "auth != null" } }

1 2 3 4 5 6

{   "rules": {     ".read": "auth != null",     ".write": "auth != null"   } }

7. Change it to
{ "rules": { ".read": true, ".write": true } }

1 2 3 4 5 6

{   "rules": {     ".read": true,     ".write": true   } }

8. Click “Publish” to save changes.

We are also using angular fire library which is angularjs binding to firebase. You can read more here

After adding all necessary files this is how our index.html file will look like

Continue to part 2