Question

背景

我目前正在构建一个使用NodeJS作为服务器的网站，Express Handlebars（仅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 documentation

希望这有帮助。

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

使用Express Handlebars和Angular JS

背景

问题

问题

可能的解决方案

5 个答案: