Ajax Angularjs

Address book application with angularjs and google firebase – Part 2

In part 1 we saw firebase setup, application setup and required css,js files and libraries. In this post we will take a look at the controller, services and directives.

App.js is pretty basic with normal routing stuff nothing much to explain and brag about. Only thing to notice is that we are using a constant to define a path to default pic, in case user has no photo.

Before going to controller code, lets have a look at the firebase service which works as our data provider.

firebase service

You must have noticed methods like $laoded, $add, $save, $remove etc, those all are wrapper methods provided by angularfire to interact with firebase. You can read all angularfire API methods reference guide here. Most of the angularfire methods returns promise which is resolved or rejected.

Using firebase service in controller

Above service can be invoked in controller as below, here in this example to fetch all contacts using getAll() method

Controller.js

While coding this application i got a chance to write my first ever real world directive (before this for learning purpose i coded some directives which were nothing but kind of “hello world”). This directive takes id as a argument and generates rounded image of user and replaces the tag (directives template tag) with user image. Lets take a look at the directive,

userpic.directive.js

To use this directive in template simply call it like

Demo Download

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!