▲ 46 points
back
21 comments
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'));").
- 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. ( =
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).
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.
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.
Thanks for the feedback (Firebase Community Manager here). We're working on improving the documentation. Feel free to email me at sara@firebase.com if you have more suggestions.
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 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...
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 though, made by a fellow HNer and mentioned last time around.
I'm also working on an AngularJS + FireBase web app (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.
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.
Agreed, I really like AngularJS and Firebase and I am using them together for a client but AngularFire isn't perfect and you're correct, the documentation could be much better.
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?
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).
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.
To start, there are two different api methods for setting up data binding between angular and firebase. Where is a good semantic/conceptual explanation of the difference?
Agreed, the labels they use are a little imprecise.
"Implicit" is a two-way, automatic binding: updates from the server will show up in your app and updates your app makes will be sent to the server automatically.
"Explicit" is a one-way, manual binding: updates from the server will show up in your app automatically but you have to sync back to the server manually using the add, remove, and update methods.
Is that what you mean?
Yes, thanks. The problem is certain operations work differently depending on the mode, and you end up having to do debugging/source code digging to really understand it, which is a frustrating waste of time.
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.
I am working on this as I learn AngularJS - https://github.com/manojlds/EventBase
Working with Firebase has been fun, but security is hard. AngularFire is not really mature yet, too.
> 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.
Thank you for your feedback (Firebase Community Manager here). We've heard from many people that AngularFire still isn't quite usable in complex Angular apps and we're working now on making some API tweaks and improving the documentation. Email me (sara@firebase.com) with specific feedback.
Yes, I thought so too when I first was looking into AngularFire. However, the point of OPs article seems to be that it's great for prototyping, not production, and that was an 'aha!' for me as to its usefulness.
AngularJS + Firebase is really incredible. I've been doing some really fun stuff with it on mobile and it really rocks there.