使用 Express Handlebars 和 Angular JS

Posted 2023-02-22

【中文标题】使用 Express Handlebars 和 Angular JS

【英文标题】：Using Express Handlebars and 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 成为更好的客户端？除非有什么离谱的事情，这并不意味着不应该在服务器端使用车把

【参考方案1】：

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

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

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

<div>[message]</div>

另见：$interpolateProvider documentation

希望这会有所帮助。

【讨论】：

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

【参考方案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* 框架非常适合动态构建网页，但我认为应该编译页面实例特定的部分。任何可以通过用户交互改变的东西 -> 使用客户端模板。

另外——如果客户端渲染失败会发生什么？最初提供呈现的模板将使您的页面更容易被更广泛的受众访问，更不用说更健壮和容错了。