

Angular + Firebase Is RAD - mayop100
http://gaslight.co/blog/angular-plus-firebase-is-rad

======
drhayes9
I really wanted this article to get into the meat of how to build an Angular
app with Firebase. It gets the basics working but it would've been nice to see
some details about Firebase security, good practices about what goes where
with respect to what AngularFire provides, etc.

I've only been playing around with it but I thought I'd add some ideas that
are working so far for me:

\- Don't use your Firebase URL all over the place in your app.

\- DRY it up by creating an AngularJS constant for your main Firebase instance
(e.g. "module.constant('baseStore', new
Firebase('[https://whatever.firebaseio.com'));"](https://whatever.firebaseio.com'\)\);")).

\- Every sub reference to the base now uses the "child" method off that
baseStore object to get sub-objects (e.g. "var props =
baseStore.child('props');").

\- Create an auth service that your app uses instead of using the AngularFire
auth libs directly. Makes it much easier to control/test your auth flow,
especially if you change from "email/password" to, say, "persona".

I still have some questions about the interactions between Angular and
Firebase/AngularFire but maybe I'll save them for a StackOverflow question. (
=

~~~
joshstrange
Couldn't agree more, I have run into the same things it appears you have and
come to similar conclusions. That was what was hardest for me when getting
started, there are a billion examples of how to write a chat app, a todo list,
etc but none of the examples I came across had, as you call it the "meat of
how to build and Angular app with Firebase". I felt like most of what I was
seeing was gimmicky and had no real use (on it's own).

~~~
drhayes9
Yup. I'm also trying to learn AngularJS at the same time so the hits, they
keep'a'coming. ( =

It would be nice in the AngularFire documentation if they were clear what was
a promise (implicit binding) and what wasn't (explicit binding).

One of the things I ran into (which I hope they add to the documentation):
before using implicit binding, create the object on the $scope in your
controller first. Only after the empty object is on the scope should you call
"angularFire(ref, $scope, 'thing');". The error that shows up if you don't do
that is rather cryptic.

~~~
joshstrange
Yes, I too ran into this problem and found the answer in the github issue
tracker[0]. I ran into other issues in the 0.2.0->0.3.0 change where they made
quite a few small changes without releasing any upgrade instructions or
changelog.

[0]
[https://github.com/firebase/angularFire/issues/105](https://github.com/firebase/angularFire/issues/105)

------
alexandros
It would be good to get Firebase's Angular bindings to work decently well for
top-level objects and improve their promise support. I recently worked on
[http://worldmap.io](http://worldmap.io) as a way to test a bunch of angular-
related tech and the firebase bindings, while dead easy to start, were a pain
as I couldn't resolve them in the routeProvider. Instead I had to do it inside
the controller, which forced me to keep a bunch of boilerplate. See
[https://github.com/alexandrosm/worldmap/blob/master/app/scri...](https://github.com/alexandrosm/worldmap/blob/master/app/scripts/controllers/main.coffee)

Still, a great project and concept, just has some more way to go before I'd
use it in a real project. I do want to check out
[https://github.com/marknutter/firebase-
resource](https://github.com/marknutter/firebase-resource) though, made by a
fellow HNer and mentioned last time around.

------
hixup
I'm also working on an AngularJS + FireBase web app
([http://hixup.com/#/3fKz/](http://hixup.com/#/3fKz/)). I posted a 'Show HN'
yesterday but it didn't get much traction. My app lets you create a simple
poll where the votes and comments are updated in real time. Thanks to Firebase
I could concentrate on writing client-side code only.

I agree with the other commenters that the AngularFire bindings are not mature
yet. The documentation is lacking in detail and I couldn't figure out how to
make it work with lists in Firebase. So I ended up using the regular Firebase
javascript API instead of AngularFire.

You can have a look at the code here:
[https://github.com/dbbert/personal/tree/gh-
pages](https://github.com/dbbert/personal/tree/gh-pages).

------
WhitneyLand
The concept is RAD, in practice the Firebase learning curve sucks due to lack
of good documentation of API semantics, especially w.r.t. AngularJS.

~~~
nobodysfool
I was in the firebase beta, and it really was pretty simple to get a new app
up and running, there was certainly good documentation. What are you referring
to?

~~~
drhayes9
I can't find answers to these questions in the docs, had to stumble around
with the library first:

\- be sure to set an empty object on your scope before setting up implicit
binding on that object. If you don't, the error will be cryptic.

\- add the property "authRequired: true" to your routes when setting up your
$routeProvider to get AngularFire to block access to that route when not
authenticated.

\- be careful about using $scope.apply with AngularFire since you're often
already in the apply cycle in its callbacks (would be nice if that were
explicit).

~~~
joshstrange
This is nitpicky for sure but angularFire doesn't play nice with AngularJS
1.2's breaking out some modules (Route, Sanitize, Cookies, and 1-2 more) into
separate JS files. I had to comment out all the $route stuff in angularFire so
that I could get them to work together. Thankfully I am not using fireBase
with my $route's so I am unaffected.

Also, I'm sure some of you might point out 1.2 is still in an RC state but I
needed ngAnimate and didn't want to have to re-write a bunch of code a few
weeks from now when it releases it's final version.

------
icedog
The AngularJS team had a few Firebase meetups several months ago. At the first
event, someone from fbase showed how to create a todo app. When people asked
about their backend implementation details, they didn't reveal a thing. I'm
already turned off by giving up server-side control, withholding their
implementation details is a huge red flag.

------
manojlds
I am working on this as I learn AngularJS -
[https://github.com/manojlds/EventBase](https://github.com/manojlds/EventBase)

Working with Firebase has been fun, but security is hard. AngularFire is not
really mature yet, too.

~~~
joshstrange
> AngularFire is not really mature yet, too.

I am running into this issue as well, I kind of wish I had written my own
firebase service instead of using theirs because (Especially in the 0.2
release) I was seeing the app re-draw a ton of times due to the way that
angularFire was loading the data. That and a bunch of little inconsistencies,
like when creating an angularFireCollection you can optionally pass in a
callback as the second parameter that returns your data, great if you want to
assign it all at once instead of each "child_added" being fired but the object
it returns is the same as is returned from a ref.once() call (As can be seen
in the code for angularFireCollection) and for that not only do you need to
call .val() on what is passed in to get the value but it is not an
angularFireCollection, it is just Firebase data and so it rather useless as
the binding does not work and you can't call the angularFireCollection methods
on the returned data (like .add()).

Please don't get me wrong, AngularJS is awesome and Firebase is really cool
but there is learning curve and as you said angularFire isn't really mature
yet. That said I am very impressed with the work being done on angularFire
(and speed) so hopefully it will shape up nicely.

------
yesimahuman
AngularJS + Firebase is really incredible. I've been doing some really fun
stuff with it on mobile and it really rocks there.

