AngularJS客户端数据绑定和服务器端模板答案

【问题标题】：AngularJS client side data binding and server side templatingAngularJS客户端数据绑定和服务器端模板
【发布时间】：2012-10-17 16:06:03
【问题描述】：

AngularJS 使用双向客户端数据绑定 (from AngularJS Developers guide)：

有没有人考虑将服务器端模板引擎与AngularJS双向客户端数据绑定结合使用。像这样的东西：

我正在考虑仅将 AngularJS 用于页面的部分（组件）？这是个好主意吗？

我想听听您是否已经有过类似方法的经验以及缺点和优点......

【问题讨论】：

我在 Jade 模板中使用 AngularJS，效果很好。只需确保两个模板引擎不共享某些语法部分，因为您最终会逃离地狱。最后我选择了 Knockout，但两者都适用于 Jade，因为 Jade 不使用花括号（如果它会 -> 逃离地狱）。
好点！从 AngularJS 1.0 版开始，您可以轻松地使用 can change 插值标记。这在这种情况下可能会有所帮助。
我没有深入研究 AngularJS，但很高兴知道这一点。其他的 Knockout 没有类似的东西，只有属性（除非你使用外部模板引擎）。
如果您浏览 AngularJS 网站，您会发现多个 AngularJS 应用程序在一个页面上运行：angularjs.org。根据您的具体需要，我认为它应该可以正常工作！
这个问题在programmers.stackexchange.com上会更好，这不是这个网站的格式。

标签： javascript data-binding angularjs template-engine

【解决方案1】：

Angular 是一个完整的 UI 渲染客户端框架。您可以将数据输入其中，它会呈现正确的 html。 Angular 本身就是一个模板解决方案，与任何服务器完全分离。

您正在尝试做的是将您的 Angular 应用程序重新耦合到您的服务器。这将是更多的工作，将有很少的好处，并且您将失去能力切换服务器技术，但保持您的 Angular 应用程序不变。

本质上，您不想这样做的原因与您不想让服务器为您渲染 JavaScript 的原因相同...只是不太明显，因为多年来我们一直在渲染所有我们在服务器上的 HTML。

最终结果才是最重要的。 UI 工作正常且应用程序易于维护。如果您发现您的解决方案更易于维护，那么您应该这样做。我很难想象使用只托管 JSON 的服务器比直接使用 HTML 和 JavaScript 更容易维护。

【讨论】：

我认为至少有一个好处：您可以使用初始数据呈现页面，这对 SEO 很有用。我也想知道，但事实上，似乎没有支持这种场景的客户端模板引擎。
现在可能对 SEO 有用。但是搜索引擎一直在不断发展，试图为用户提供最好的结果。从长远来看，您最好的选择是开发一个网站，以尽可能最好的方式向用户提供内容，并让 Google/Yahoo/Bing 照顾他们。
在专业网站（例如电子商务）中，通常要求网站必须在没有 javascript 的情况下运行（即使现在的用户群没有禁用 javascript）。所以用数据预加载页面是必要的。另一个是页面加载缓慢，使网站从显示模板到编译时闪烁。因此，除了 SEO 之外，这些是为什么需要在服务器端预加载 AFAIK 的其他原因。
@Spoike：如果要求网站在没有 JavaScript 的情况下运行，那么 Angular 无论如何都可能被淘汰。您唯一的希望是使用 Node.JS 并修改 Angular 库以在 JavaScript 不工作的情况下在服务器上呈现 HTML。但这将是有史以来最可怕的黑客攻击。那时最好只使用一些服务器技术。
我同意@Spoike 和 tanathos。我不喜欢获取 index.html 页面，然后请求获取预加载数据。有没有办法将该数据注入 Angular 而不是发出新请求？通常，我使用像 Smarty 这样的服务器模板引擎来呈现第一页，然后使用像 Angular 这样的客户端模板引擎通过 AJAX 请求更改视图：但是，我也不喜欢这种方法，因为我会得到 Smarty和 Angular 指令混合在一起。我认为这就是 PrimosK 发布这篇文章的原因，对吧？

【解决方案2】：

我和你有同样的困境，我来自使用 SMARTY 作为服务器端模板引擎的背景，我们最近开始使用 AngularJS。

我认为混合这两种解决方案在完全分离的本质上是合适的。即不要将页面的一部分与这两种技术混合使用，而是分别使用这两种技术。

例如，如果您有一个用户根本不会与之交互的列表页面，那么您可以完美地使用服务器端模板。

但是，如果在这种情况下页面涉及大量操作和用户端交互，那么您应该使用 Angular。

如果您使用的是 SPA（单页应用程序），则根本不要使用服务器端模板。

【讨论】：

【解决方案3】：

在我们最近制作的一款 cordova 应用中，我们使用了一种混合方式。修复我们以角度方式完成的表单、列表、标题和菜单等内容，某些部分（如来自 RTE 的内容）或经常更改我们使用指令 ngBindHtml 添加的模板。如果客户想要更改布局或想要将当前未知的内容放入其中，则其背后的想法是在应用程序的内容页面中保持灵活。但我建议：如果您可以轻松维护应用程序（无需长时间的部署/批准过程），您应该以有角度的方式进行（但不要考虑 SEO；）。

【讨论】：