使用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可能会有类似的东西.
• ng在Express Handlebars中创建一个帮助器.
  • 它只会返回未解析的内容.但是我无法弄清楚如何做到这一点.

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