HoganJs and AngularJs with NodeJs

Question

We are trying to use NodeJs with HoganJs for server side templating. However we are also wanting to use AngularJs for our client side needs.

The problem is that both HoganJs and AngularJs use "{{" and "}}" to full fill their compiler needs. Because of this Hogan strips out if at all there is a angular's "{{", because of the way hogan works.

My question is is there a out of the box solution that allows me to use both Angular and Hogan together, without clashing with each other.

If not, does anyone knows what/where/how to tweak one of these to make them love each other and work gracefully.

Thanks in advance...

Varun Achar · Answer 1 · 2015-01-05T13:23:02.437

6

If you're using express, you can change hogan's delimiters like so:

var app = express();
app.locals.delimiters = '<% %>';

Place the above before :

app.set('view engine', 'hjs');

Now in your page.hjs file, for the data { template : "Template test" }, you can do :

<p>This is a <% template %></p>

edited Jan 05 '15 at 13:23

answered Aug 22 '14 at 12:24

Varun Achar

13,274
7
53
71

score 4 · Accepted Answer · edited May 23 '17 at 11:59

4

Try with

Hogan.compile(text, {delimiters: '<% %>'});

so you can change the delimeters Hogan uses by passing the compile method an option overriding them.

http://comments.gmane.org/gmane.comp.lang.javascript.express/1426

NB

imo using a template system is useless using angularjs because of https://stackoverflow.com/a/20270422/356380

edited May 23 '17 at 11:59

Community

1
1

answered Jan 03 '14 at 20:12

Whisher

25,656
28
106
180

Thanks for the answer...but where should I embed this code? and do I have to import anything in order to use the Hogan variable above? I am getting a invalid variable "Hogan" and "text"...when I run my app? any thoughts? – user153410 Jan 03 '14 at 21:15
@Whisher because there is server-created data and logic that I (and I would assume others) want to build into the HTML *before* it is served to client = why I use both doT and Angular. But yes, most heavy lifting is done in Angular. – MikeSmithDev Jan 03 '14 at 21:45
@MikeSmithDev put this way I can understand your point btw I found mean.io I think a good strating point to deploy and they use template (jade) even if I lean toward http://handlebarsjs.com/ plain html – Whisher Jan 03 '14 at 21:57
1

@Whisher I used jade for about 2 days then ran away ;) – MikeSmithDev Jan 03 '14 at 22:02
@MikeSmithDev yup...I never understood ppl's urge to use jade...I guess...benchmarks are more important for few ppl than common sense... – user153410 Jan 04 '14 at 17:28
@MikeSmithDev so what's the template engine you like more ? I must start a new project and I'd like to know your opinion .... – Whisher Jan 04 '14 at 17:54
@user153410 so what's the template engine you like more ? I must start a new project and I'd like to know your opinion .... – Whisher Jan 04 '14 at 17:55
@Whisher I use [doT](http://olado.github.io/doT/index.html) with [doT-emc](https://npmjs.org/package/dot-emc). – MikeSmithDev Jan 04 '14 at 18:02
http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more – Whisher Jan 04 '14 at 19:41
@Whisher I like hogan js...purely from speed stand point...check this out...http://jsperf.com/mustache-vs-hogan-js-vs-handlebars-js/12 ...however I made a decision to not use any templating on node server side and I will be using node purely for business logic and as REST endpoints...and will use angular the way angular prefers to be used...I think adding templating on the node side may lead to some road blocks in future and I would like to keep away from it as much as i can...thanks again for pointing out the other stack overflow question...that's how I figured i was doing something wrong... – user153410 Jan 04 '14 at 20:16
@user153410 that's the point using or not using template with angularjs + node and I'm in two minds ^^. Until now I'd like ejs with plain html and the delimiters don't clash with angularjs stuff and if you need to something logic server side you have your template engine running ^^ – Whisher Jan 04 '14 at 20:23

score 1 · Answer 3 · answered Jan 03 '14 at 21:34

Alternative to changing Hogan delimeters as other answer shows... change Angular's! I did this while using doT (which also uses {{ and }}) and it works fine:

say you have this in your layout HTML:

<html ng-app="cooApp">

Add this script to call up Angular with custom delims (I'm also including reference to Angular just for clarification):

<script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js'></script>
<script>
    var cooApp = angular.module('cooApp', [], function($interpolateProvider) {
        $interpolateProvider.startSymbol('{%');
        $interpolateProvider.endSymbol('%}');
    });
</script>

Now just use {% and %} for Angular stuff.

Wiil · Answer 4 · 2018-01-19T02:27:45.770

0

Without changing delimiters, on Angular 1.x you can use the ng-non-bindable directive for in the elements that uses HoganJS, Mustache or any other code of this kind:

Example:

<div>
  {{angularjs_variable}}
  <div ng-non-bindable>{{hogan_variable}}</div>
</div>

This is useful if the element contains what appears to be AngularJS directives and bindings but which should be ignored by AngularJS. [...]

edited Jan 19 '18 at 02:27

answered Dec 12 '17 at 04:55

Wiil

551
2
7
22

HoganJs and AngularJs with NodeJs

4 Answers4