使用 Express Handlebars 和 Angular JS答案

【问题标题】：Using Express Handlebars and Angular JS使用 Express Handlebars 和 Angular JS
【发布时间】：2014-10-11 13:11:49
【问题描述】：

背景

我目前正在构建一个网站，该网站使用NodeJS 作为服务器，Express Handlebars（只是Handlebars 但服务器端），希望AngularJS 用于一些客户端的东西。

问题

AngularJS 和 Handlebars 使用相同的模板语法
{{foo}}
这会导致一个问题，AngularJS 代码将首先由 Express Handlebars 解释，然后会抛出错误，因为它试图提取的数据只存在于 Angular 而不是 Node 中。

问题

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

可能的解决方案

更改 AngularJS 的语法
- 我正在查看 BackboneJS，看起来可以更改语法。可能有类似的东西是 AngularJS。
在 Express Handlebars 中创建一个 ng 助手。
- 它只会返回其未解析的内容。但是我不知道该怎么做。

【问题讨论】：

你为什么在服务器端使用把手而不是jade或ejs？ Handlebars/Angular 最好在客户端使用。
@jwimmer 是什么让 Handlebars 成为更好的客户端？除非有什么离谱的事情，这并不意味着不应该在服务器端使用车把

标签： javascript node.js angularjs express handlebars.js

【解决方案1】：

您的第一个解决方案是可能的，AngularJS 允许像这样更改文本插值的开始/结束符号：

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

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

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

另见：$interpolateProvider documentation

希望这会有所帮助。

【讨论】：

它对我不起作用。我正在使用他们使用 // 作为新标记的文档。当我这样做时，它会按原样显示在我的页面上。所以类似于：
Hello //name//
在页面上显示为 Hello //name//

【解决方案2】：

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

<p ng-bind="user.profile.description"></p>
这等同于
<p>{{user.profile.description}}</p>

来自ngBind 的 Angular 文档：

通常，您不直接使用 ngBind，而是使用类似 {{ expression }} 之类的双卷曲标记。

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

【讨论】：

但是，这条评论的重点不是在第一句话中总结出来了吗？ “通常，您不会直接使用 ngBind”。 ngBind 适用于遇到模板化内容 (FOUC) 闪现的情况。我会警惕偏离文档的建议，这在它的建议中似乎非常明确，即仅在这些情况下使用事物。我更喜欢这篇文章的公认答案。

【解决方案3】：

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

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

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

并在您的 hbs 模板中使用它，方法是将其放入 quadruple-stash {{{{

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

【讨论】：

这是一个比公认的更好的解决方案，因为这意味着您不会偏离标准的 Angular 双括号约定（您的 Angular 代码更加模块化，可用于其他项目）。
我更喜欢这个解决方案。我所做的唯一更改是调用我的助手 angular-js - 对我来说 {{{{angular-js}}}} 更好地解释了它的目的。

【解决方案4】：

有一个更好的方法：\{{foo}}。 Handlebars 内容可以通过以下两种方式之一进行转义，即内联转义或原始块助手。通过在小胡子块前面加上 \ 来创建内联转义。原始块是使用 {{{{ 大括号创建的。你可以看到这个http://handlebarsjs.com/expressions.html#helpers

【讨论】：

【解决方案5】：

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

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

【讨论】：

我同意 MV* 框架非常适合动态构建网页，但我认为应该编译页面实例特定的部分。任何可以通过用户交互改变的东西 -> 使用客户端模板。
另外——如果客户端渲染失败会发生什么？最初提供呈现的模板将使您的页面更容易被更广泛的受众访问，更不用说更健壮和容错了。

背景

问题

问题

可能的解决方案

Hello //name//