CODEWITHSUNDEEP
javascriptnode.jsangularjshogan.js
user153410
user153410

Reputation: 863

HoganJs and AngularJs with NodeJs

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...

Upvotes: 4

Views: 2279

Answers (4)

Wiil
Wiil

Reputation: 649

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. [...]

Upvotes: 0

Varun Achar
Varun Achar

Reputation: 15109

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>

Upvotes: 6

Whisher
Whisher

Reputation: 32716

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

Upvotes: 4

MikeSmithDev
MikeSmithDev

Reputation: 15797

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.

Upvotes: 1

Related Questions