Hogan Js 和 AngularJs 与 Node Js答案

【问题标题】：HoganJs and AngularJs with NodeJsHogan Js 和 AngularJs 与 Node Js
【发布时间】：2014-01-21 14:22:09
【问题描述】：

我们正在尝试将 NodeJs 与 HoganJs 一起用于服务器端模板。然而，我们也希望使用 AngularJs 来满足我们的客户端需求。

问题在于 HoganJs 和 AngularJs 都使用“{{”和“}}”来完全满足他们的编译器需求。由于霍根的工作方式，如果有角的“{{”，霍根就会去掉。

我的问题是，是否有一个开箱即用的解决方案允许我同时使用 Angular 和 Hogan，而不会相互冲突。

如果没有，有没有人知道什么/在哪里/如何调整其中之一以使他们彼此相爱并优雅地工作。

提前谢谢...

【问题讨论】：

标签： javascript node.js angularjs hogan.js

【解决方案1】：

在不更改分隔符的情况下，在 Angular 1.x 上，您可以在使用 HoganJS、Mustache 或任何其他此类代码的元素中使用 ng-non-bindable 指令：

例子：

<div>
  {{angularjs_variable}}
  <div ng-non-bindable>{{hogan_variable}}</div>
</div>

如果元素包含看似 AngularJS 指令和绑定但应该被 AngularJS 忽略的内容，这很有用。 [...]

【讨论】：

【解决方案2】：

如果您使用的是 express，您可以像这样更改 hogan 的分隔符：

var app = express();
app.locals.delimiters = '<% %>';

把上面的放在前面：

app.set('view engine', 'hjs');

现在在您的 page.hjs 文件中，对于数据 { template : "Template test" }，您可以这样做：

<p>This is a <% template %></p>

【讨论】：

【解决方案3】：

试试

Hogan.compile(text, {delimiters: '<% %>'});

这样您就可以更改分隔符 Hogan 通过向 compile 方法传递一个覆盖它们的选项来使用。

http://comments.gmane.org/gmane.comp.lang.javascript.express/1426

注意

imo 使用模板系统使用 angularjs 是没用的，因为 https://stackoverflow.com/a/20270422/356380

【讨论】：

感谢您的回答...但是我应该在哪里嵌入此代码？我是否必须导入任何东西才能使用上面的 Hogan 变量？当我运行我的应用程序时，我得到一个无效的变量“Hogan”和“text”？有什么想法吗？
@Whisher 因为有服务器创建的数据和逻辑，我（我会假设其他人）希望将其构建到 HTML 之前它被提供给客户端 = 为什么我同时使用 dot 和 Angular。但是，是的，大部分繁重的工作都是在 Angular 中完成的。
@MikeSmithDev 这样说我可以理解你的观点，顺便说一句，我发现 mean.io 我认为部署的一个很好的策略点，即使我倾向于 handlebarsjs.complain html，他们也使用模板（翡翠）
@Whisher 我用了 Jade 大约 2 天然后跑掉了 ;)
@MikeSmithDev 是的...我从不理解人们使用翡翠的冲动...我猜...对于少数人来说，基准比常识更重要...

【解决方案4】：

如其他答案所示，可以替代更改 Hogan 分隔符...更改 Angular 的！我在使用 doT（也使用 {{ 和 }}）时这样做了，它工作正常：

假设你的布局 HTML 中有这个：

<html ng-app="cooApp">

添加此脚本以使用自定义分隔符调用 Angular（我还包括对 Angular 的引用，只是为了澄清）：

<script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js'></script>
<script>
    var cooApp = angular.module('cooApp', [], function($interpolateProvider) {
        $interpolateProvider.startSymbol('{%');
        $interpolateProvider.endSymbol('%}');
    });
</script>

现在只需将{% 和%} 用于Angular 的东西。

【讨论】：