38

I need to know if AngularJS is used as js framework for the front-end, do we need Handlebars separately for template-engine? ... as in my view template-engine functionality can be accomplished using AngularJS itself !

Kaushik Shrestha
  • 932
  • 1
  • 11
  • 26

1 Answers1

96

You are right, Handlebars and Angular together would be pretty useless.

Handlebars and Angular are completely different things.

Handlebars is a template engine. You write a fancy templatey-string, give it a JSON object, and it renders out HTML from the data. There's no data-binding, no updating, it's just a once-off render.

AngularJS is an HTML compiler and databinder. Angular will look through the HTML for angular-templating tags, interpret/compile them, and update the HTML with changes to data on a given controller scope. Angular doesn't just render an HTML string once, it compiles the HTML, binds it to a scope, and updates when data on that scope changes.

Handlebars in one picture

AngularJS databinding/templating in one picture

AngularJS's HTML compiler in one article

AngularJS's whole overview/guide, so you can know how it actually works

Andrew Joslin
  • 43,033
  • 21
  • 100
  • 75
  • 4
    When would someone opt to use handlebars over angularjs? Perhaps when a website needs no user interaction? What kind of website would fit that description? I have a hard time imagining when handlebars would be useful. – Spencer Apr 06 '14 at 18:10
  • Handlebars is used by some other frameworks that don't have Angular-style bindings...on its own it can be useful if you're not using a framework but have an occasional need to dynamically construct HTML and add it to the DOM. Also it can be used on the server side with node.js, and it works quite well with frameworks like Derby that can render on both the client and the server (Derby uses its own custom variant of Handlebars though). – Matt Browne May 06 '14 at 12:12
  • 1
    This "AngularJS databinding/templating in one picture" looks pretty much like what knockout.js does. – Andrew Savinykh Jun 25 '14 at 08:58
  • 1
    Handlebars is a great templating system, similar in scope to Mustache... there are MANY benefits to using it, in part because the syntax has fairly broad coverage so server side scripting engines can render templates pretty well... Also as @MattBrowne mentioned, other systems are built around Handlebars and they handle all the data-binding, etc... http://meteor.com is AMAZING! (SpaceBars is their version of Handlebars) – zeroasterisk Jul 08 '14 at 16:45
  • 1
    @zeroasterisk Just a side-note, if you like Meteor, check out Derby as well since they're quite similar. Each has its pros and cons but both are great frameworks! I think either would allow for much more rapid development than Angular.js + a separate server-side framework - Meteor and Derby are quite innovative in their client/server integrated approach. – Matt Browne Jul 08 '14 at 19:33
  • 3
    In terms of complexity, speed of learning curve and most importantly maintainability, I personally think Handlebars is preferable over Angularjs. I've just started learning Angularjs and I find it like learning a completely new language. There are a lot of configurations to be made, multiple js files, etc. The only advantage that I see with Angular is the two-way-binding feature that it provides. – Chris Serrao Aug 21 '14 at 06:44
  • Think you have 10 different pages. Ten HTML files. They all share the header, therefore you want to include them. What if the result is hosted in Amazon S3? Then you don't want a back-end process to generate it. Or maybe you do, and you choose nodejs with Handlebars. Then you're mixing them. Still a problem. :) – Tom Roggero Aug 25 '15 at 15:39
  • @Spencer A good example of when someone would introduce handlebars to a project would be a ruby on rails application, when sending json back to the client (instead of sending the whole rendered partial back) from the server to keep things dry. – Greg Blass Oct 07 '15 at 18:13