20

I am considering using AngularJS instead of Handlebars with MeteorJS. I am more familiar with AngularJS, but it doesn't work well out-of-the-box with Meteor. Handlebars is default templating engine used in MeteorJS.

I would like to know the trade-off between the two, e.g., whether AngularJS provides more flexible front-end coding than Handlebars.

My question is: when pairing with Meteor, what AngularJS can do that Handlebars can not in terms of front-end programming?

(Note that people love AngularJS in part b/c of its two-way binding and data model, but Meteor-Handlebars do these very well too).

Update: Please do not vote to close this question if you think it is a duplicate of another question in SO that compares Angular and Handlebars. Meteor added significant power to Handlebars due to its "database on client" approach.

AdamNYC
  • 19,887
  • 29
  • 98
  • 154
  • 3
    Here's how I answered a similar question earlier http://stackoverflow.com/questions/13561447/angularjs-and-handlebars-both-required-or-not/13564825#13564825 – Andrew Joslin Feb 06 '13 at 00:22
  • 1
    I think meteor is what sets this apart. – Jamund Ferguson Feb 06 '13 at 00:27
  • @Andy: I agree with Jamund: two-way data binding and data model are taken care of by Meteor very well. – AdamNYC Feb 06 '13 at 00:38
  • Maybe I should've read the question better.. :-) sorry. I will answer later if I have time – Andrew Joslin Feb 06 '13 at 00:58
  • @AdamNYC I don't believe that Meteor has two-way databinding, [yet](https://github.com/raix/Meteor-handlebar-bind). Meaning you can't bind an attribute to a text input. That gives AngularJS an advantage. Overall I find Handlebars Templates are much easier to work with, though, especially when incorporating existing JS libraries. – Kyle Finley Feb 06 '13 at 03:13
  • @KyleFinley: thanks for the link. I'll check it out. May be I got it wrong, but is it a two-way binding in Meteor: in html: ``, and .coffee define an event with a callback to update text? – AdamNYC Feb 06 '13 at 03:43
  • @AdamNYC I have always thought of two-data binding as updating the model directly (modifying the input would modify the model), but I can see your point. You can bind updates to the key presses, and maybe that's the better approach -- it does gives you more control. – Kyle Finley Feb 06 '13 at 04:46
  • @KyleFinley: I see your point clearer now. I'll try out both approaches in a more complex form to see which one is better. – AdamNYC Feb 06 '13 at 14:30
  • @AdamNYC angular is built for testing which is a major advantage. also routing. – ChatGPT May 01 '13 at 17:43

5 Answers5

7

Angular and Meteor can be combined, and it's a pretty neat combo. Angular's templating system and its two-way bindings (DOM to JS model) can even be made to go the whole way and be kept in sync with a Meteor collection. Such a pairing of Angular and Meteor means you get instantaneous DOM to database syncing, which is very cool. Angular can't do that by itself, nor can Meteor (without writing more or less tedious event handlers) and even less Handlebars.

The angular-meteor Meteor package is pretty much ngMeteor's successor (it builds on ngMeteor code) and integrates Meteor collections with Angular models, the two templating systems, Meteor Session variables etc.

fredrikekelund
  • 2,007
  • 2
  • 21
  • 33
6

TL;DR: Meteor works best with packages (think jQuery, bootstrap, d3, underscore, stylus, less) since they enhance a framework. Those same packages would enhance Angular too (well, kind of). Angular is an end-to-end framework, so trying to integrate it on top of another end-to-end framework like Meteor is a recipe for headaches.

Handlebars has very similar expressions and bindings that you're probably familiar with in Angular. But while the templating engine is similar, it's the rest of the frameworks that differ greatly.

Angular leans heavily on its internal directives (ng-repeat, ng-form, ng-bind, etc.) to easily tie in javascript (i.e. power) to your markup. There's a lot of magic behind the scenes.

Meteor leans heavily on the pub/sub model and connecting to your true data stores. Their secret sauce comes from easily adding but abstracting packages (handlebars is one of their default packages, but some others are bootstrap, accounts-ui, d3, etc.).

Meteor follows very different ideologies and has different opinions on framework design than Angular does. In my opinion, Meteor's are superior though the project is still in its relative infancy. You'll find that Meteor is really, really good at prototyping quickly, especially if you need to tie in user support and want to use Twitter/Facebook/Google.

You'd be better off choosing one or the other, but if you're not strong on the server side, you could write a pretty slick Meteor app to just act as your API server.

Brandon Aaskov
  • 342
  • 3
  • 8
4

If you want to use angularjs with meteor you can just install a package that does that. Then you can use both meteor and angular.

Meteor is realy nice for getting your data from server to client, angular is very nice in getting that data displayed (and stable).

mrt add angular-stack

or 

mrt add ngMeteor
Bram
  • 765
  • 1
  • 6
  • 14
3

Generally speaking, AngularJS has passed the version 1.0 milestone and is considered ready for production use while meteor is still alpha software. Consequently, Angular is more polished, has directives, modules and rich third-party libraries like AngularUI.

But if you feel like experimenting with a bleeding-edge framework, don't think you'll have to do super-fancy templating-stuff but need a database built in, go with Meteor!

mb21
  • 34,845
  • 8
  • 116
  • 142
0

I think you might find this answer helpful.

Also I think it might be a duplicated question.

Community
  • 1
  • 1
Urigo
  • 3,175
  • 21
  • 27