Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using Express Handlebars and Angular JS

Background

I am currently building a website that uses NodeJS for the server, Express Handlebars(Just Handlebars but server side) , and hopefully AngularJS for some client side stuff.


The Problem

AngularJS and Handlebars use the same syntax for templating
{{foo}}
This causes a problem where AngularJS code will be interpreted by Express Handlebars first, which will then throw an error because the data it is trying to pull only exists in Angular not Node.


The Question

Is there a way to get AngularJS and Express Handlebars to work together?


Possible Solutions

  • Change the syntax of AngularJS
    • I was looking at BackboneJS and it looks like it is possible to change the syntax. There could possibly be something similar is AngularJS.
  • Create a ng helper in Express Handlebars.
    • It would just return its un-parsed content. However I couldn't figure out how to do this.
like image 679
Noah Huppert Avatar asked Aug 18 '14 15:08

Noah Huppert


People also ask

Does AngularJS use Handlebars?

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.

How do you use express Handlebars?

HandleBars can be used to render web pages to the client side from data on the server-side. To use handlebars in express, we need to store HTML code into a . hbs extension in the 'views' folder in the source directory as hbs looks for the pages in the views folder. Now, we need to change the default view engine.

Can we use Angular and NodeJS together?

NodeJS takes part in loading the AngularJS application with all the dependencies, such as CSS files and JS files in the browser. For loading all the assets of Angular and accepting all the API calls from the AngularJS applications, NodeJS is generally used as a web server.


4 Answers

Your first solution is possible, AngularJS allow to change the start/end symbols of text interpolation like this:

appModule.config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('{[{');
  $interpolateProvider.endSymbol('}]}');
});

Then you could use it in your template:

<div>{[{message}]}</div>

Also see: $interpolateProvider documentation

Hope this helps.

like image 120
runTarm Avatar answered Oct 16 '22 14:10

runTarm


You can always use the ng-bind syntax instead:

<p ng-bind="user.profile.description"></p>
This is identical to
<p>{{user.profile.description}}</p>

From the Angular docs for ngBind:

Typically, you don't use ngBind directly, but instead you use the double curly markup like {{ expression }} which is similar but less verbose.

It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed by the browser in its raw state before Angular compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.

like image 35
teleaziz Avatar answered Oct 16 '22 13:10

teleaziz


In order to maintain the AngularJS Style, your second solution is better, Create a helper in Express Handlebars.

References to the Handlebars Web Site: http://handlebarsjs.com/block_helpers.html, you can register a helper raw-helper

Handlebars.registerHelper('raw-helper', function(options) {
    return options.fn();
});

and use it in your hbs template by putting it in a quadruple-stash {{{{

{{{{raw-helper}}}}
<div class="container" ng-controller="AppCtrl">
    Total Members: {{members.length}}
</div>
{{{{/raw-helper}}}}
like image 14
Isaddo Avatar answered Oct 16 '22 14:10

Isaddo


There is a better way: \{{foo}}. Handlebars content may be escaped in one of two ways, inline escapes or raw block helpers. Inline escapes created by prefixing a mustache block with \ . Raw blocks are created using {{{{ mustache braces. You can see this http://handlebarsjs.com/expressions.html#helpers

like image 11
Peyton Zhao Avatar answered Oct 16 '22 13:10

Peyton Zhao