使用Express Handlebars和Angular JS

Question

背景

我目前正在建立一个网站，使用NodeJS作为服务器， Express Handlebars （Just Handlebars，但服务器端），并希望AngularJS用于某些客户端。

问题

AngularJS和Handlebars使用相同的语法进行模板化
{{foo}}
这会导致首先由Express Handlebars解释AngularJS代码的问题，然后会抛出错误，因为它尝试拉取的数据仅存在于Angular而非Node中。

问题

有没有办法让AngularJS和Express Handlebars一起工作？

可能的解决方案

• 更改AngularJS的语法
  • 我在看BackboneJS，看起来可以改变语法。 AngularJS可能会有类似的东西。
• 在Express Handlebars中创建一个ng帮助器。
  • 它只会返回未解析的内容。 但是我无法弄清楚如何做到这一点。

Answer 1

你的第一个解决方案是可能的，AngularJS允许更改文本插值的开始/结束符号，如下所示：

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

然后你可以在你的模板中使用它：

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

另请参阅： $ interpolateProvider文档

希望这可以帮助。

Answer 2

您始终可以使用ng-bind语法：

<p ng-bind="user.profile.description"></p>
这与之相同
<p>{{user.profile.description}}</p>

来自ngBind的Angular文档：

通常，您不直接使用ngBind，而是使用类似{{expression}}的双卷曲标记，它类似但不那么冗长。

如果在Angular编译它之前浏览器在其原始状态下暂时显示模板，则最好使用ngBind而不是{{expression}}。 由于ngBind是一个元素属性，因此在加载页面时，它会使绑定对用户不可见。

Answer 3

为了保持AngularJS Style，你的第二个解决方案更好， 在Express Handlebars中创建一个帮助器。

参考Handlebars网站： http ： //handlebarsjs.com/block_helpers.html ，你可以注册一个助手raw-helper

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

并通过将其放入四重藏匿 {{{{并在您的hbs模板中使用它

{{{{raw-helper}}}}
<div class="container" ng-controller="AppCtrl">
    Total Members: {{members.length}}
</div>
{{{{/raw-helper}}}}

Answer 4

有一种更好的方法：\\ {{foo}}。 车把内容可以通过两种方式之一进行转义：内联逃生或原始帮助。 通过使用\\前缀胡子块创建的内联转义。 使用{{{{mustache braces。 你可以看到这个http://handlebarsjs.com/expressions.html#helpers

Answer 5

我建议使用AngularJS的数据绑定语法（类似于Handlebars），让NodeJS服务器只提供静态AngularJS源代码。 我更喜欢将模板卸载到客户端上，因此减轻了服务器的压力，更不用说AngularJS和其他MVC框架（我最喜欢的是EmberJS）非常适合动态构建网页。

我是Yeoman的粉丝，这里有一个用于构建NodeJS服务的Angular项目的生成器： https ： //github.com/yeoman/generator-angular