Ajax Angularjs

Address book application with angularjs and google firebase – Part 1

Address book application with angularjs

Address book application with angularjs

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

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

  6. Inside project console sidemenu click on “Database”
  7. Click on “Rules” tab, you should see something like this
  8. Change it to
  9. 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

Leave a Comment

*

Notify me of followup comments via e-mail. You can also subscribe without commenting.

Shares

Let your friends know what are you reading

Share this post with your friends!