What's the use of Jade or Handlebars when writing AngularJs apps
I use Jade to generate templates consumed by AngularJS because I hate writing plain HTML. It looks something like:
.control-group( ng-form name='emailGroup' ng-class='{"ng-error": emailGroup.$invalid}') label.control-label Email .controls input( type='email' ng-model='user.email' required placeholder='you@example.com' focus-on='focusEmail' )… which I think is a lot cleaner than plain HTML.
Those who unquestioningly favour Jade in an Angular environment fail to understand that view logic belongs on the client, and business logic on the server, just as the OP commented.
Don't do it unless you have a very good reason to do it. In engineering, a system with fewer moving parts is a more reliable system, and a system where interface boundaries (client/server) are respected is more maintainable over the long term, so default to the simplest architecture and clean division of labour if possible. If you have overriding reasons, do what you must, but caveat emptor.
Recently I reviewed some code where straight Angular templating would have done a far better job than mixing in Jade, just through maintaining simplicity.
Aside from template extension, Jade brings nothing worthwhile to the table that Angular doesn't already supply. Let's be honest: Using the sound principle of "favour composition over inheritance" (i.e. partials), you shouldn't ever need template extensibility. Jade is hardly "easier to parse" than HTML. They are but trivially different, while Jade adds another level of indirection - best avoided.
There is one valid, specialised case for server-side templating: Optimisation, remembering that premature optimisation is generally a Bad Thing. Where performance is truly at issue, and you have the server capacity to spare to handle this, server side templating can assist. This applies to products like Twitter and Basecamp, where the cost of doing a lot of server side work is offset by the gains of reduced requests to the server.
As for Handlebars, there is no need to replace AngularJS's (amazing) client-side templating.
I honestly don't understand why people care about the difference between this:
<html ng-app> <!-- Body tag augmented with ngController directive --> <body ng-controller="MyController"> <input ng-model="foo" value="bar"> <!-- Button tag with ng-click directive, and string expression 'buttonText' wrapped in "{{ }}" markup --> <button ng-click="changeFoo()">{{buttonText}}</button> <script src="angular.js"> </body></html>and this:
html(ng-app="ng-app") // Body tag augmented with ngController directive body(ng-controller="MyController") input(ng-model="foo", value="bar") // Button tag with ng-click directive, and string expression 'buttonText' wrapped in "{{ }}" markup button(ng-click="changeFoo()") {{buttonText}} script(src="angular.js")Except that I find one slightly more human-readable. Slightly. I don't get why people are so fervent about the topic. It's all bikeshedding. The difference is negligible and any competent programmer could easily translate one into the other after five seconds on Google. Use what you want and let everyone else quarrel over nothing. Pick your battles and engage in debates about things that actually matter, like atomic reactors ;)