我有动态内容的网页。 比方说，这是一个产品页面。 当用户直接进入example.com/product/123我要渲染的服务器上我的产品模板，发送HTML浏览器。 然而，当用户点击后链接到/product/555 ，我想用JavaScript来更新客户端的模板。
我想使用类似Knockout.js或Angularjs，但我不明白我怎么可以预先填充这些模板与服务器上的一些初始数据，而且还有在客户端上运行的模板。 即如果我的角模板是这样的：
<ul>
<li ng-repeat="feature in features">
{{feature.title}}
<p>{{feature.description}}</p>
</li>
</ul>
当用户将直接进入网址，我需要的东西仍然工作作为一个角模板，但与HTML当前产品填充。 显然，这不工作：
<ul>
<li ng-repeat="feature in features">Hello
<p>This feature was rendered server-side</p>
</li>
<li>Asdf <p>These are stuck here now since angular won't replace them when
it updates.... </p></li>
</ul>
这似乎是我唯一的选择就是服务器呈现的HTML发送到浏览器与一个单独的匹配模板一起...？
在这种情况下，我想避免编写每个模板的两倍。 这意味着我需要或者切换到JavaScript来我的服务器的语言（这我也不会高兴）或选择编译为Java和JavaScript的模板语言，然后找到一种方法，它侵入播放框架（这是什么我目前使用。）
有人有建议吗？
如果你真的想有前角存储在一个区域的初始值activates-可以使用NG绑定属性，而不是{{势必串}}，从你的例子：
<ul>
<li ng-repeat="feature in features">
<div ng-bind="feature.title">Hello</div>
<p ng-bind="feature.description">This feature was rendered server-side but can be updated once angular activates</p>
</li>
</ul>
我不知道这个地方会派上用场，但你还需要包括初始数据集在文档中的脚本标记的一部分，所以，当角DOES激活它不会消灭显示的信息与空值。
编辑：（根据要求由批评家）
或者，你可以把在列表顶部的NG-重复，有它配置基于“功能”列表本身上填写。 以下是NG-repeat元素，具有与设置NG隐藏的NG隐藏属性=“功能”，如果角载荷，全部由原始服务器提供的列表中的元素隐藏自己不NG重复元素，角列表跳进存在。 没有哈克修改角，并与直接NG-bind属性没有摆弄。
作为一个侧面说明，你可能仍然要发送能够读取，如果你想避免眨眼，其中角清除数据，而等待它的数据初始服务器元素将其送入角角同步之前一段脚本请求来自服务器的相同的数据。
我只用淘汰赛，没有棱角，但是我用的是一个貌似很常见的方法有数据的初始状态呈现到页面标记为JSON，并在DOM准备用它来建立您最初的Javascript视图模型，然后应用基因敲除绑定来构建UI。 因此，UI被内置客户端，甚至一个项目，如你的产品已经存在于服务器上。 这意味着同样的模板可用于初始创建用户界面调用都当你添加了一些客户端，就像一个子产品有自己的视图模型和模板。 这是你的选择吗？
编辑：如果我误解了你的要求，我谈论的方法更详细的这样一个问题： KnockoutJS复制数据开销
在AngularJS一种选择可能是用一个指令，在服务器上渲染的值复制到模型中，并有后续行动，通过JavaScript检索数据。
我用描述的方法， 这里在ASP.NET Web窗体应用程序预填充我的模型通过隐藏值第一个从服务器请求。 每讨论这起角的方式打破了，但它是可能的。
这里是例子的HTML：
<input type="hidden" ng-model="modelToCopyTo" copy-to-model value='"this was set server side"' />
JavaScript的：
var directiveModule = angular.module('customDirectives', []);
directiveModule.directive('copyToModel', function ($parse) {
return function (scope, element, attrs) {
$parse(attrs.ngModel).assign(scope, JSON.parse(attrs.value));
}
});
我不知道一个很好的techiqunue这样做的，但是这是我看中的时间在Rails应用程序我建设之中。
您可以通过初始化使用种子数据模板开始NG-初始化 。
<ul ng-init="features = <%= features.to_json %>">
<li ng-repeat="feature in features">
{{feature.title}}
<p>{{feature.description}}</p>
</li>
</ul>
然后你渲染两次种子数据。 一旦从服务器再次角已自举你的应用程序。 当应用程序自举，角将隐藏的初始种子数据，只留下angularized模板。
您使用是很重要的NG-斗篷隐藏角模板它的自举之前。
<ul ng-hide="true">
<% features.each do |feature| %>
<li>
<%= feature.title %>
<p><%= feature.description =></p>
</li>
<% end %>
</ul>
<ul ng-hide="false" ng-cloak ng-init="features = <%= features.to_json %>">
<li ng-repeat="feature in features">
{{feature.title}}
<p>{{feature.description}}</p>
</li>
</ul>
它不会有大的模板，你复制标记的规模，但至少在角被这样引导您的应用程序，你不会得到那个闪烁。
理想情况下，我想能够重复使用相同的模板在服务器上的客户端上。 像小胡子的东西浮现在脑海。 显然，招将实现角度的指示和流量控制。 不是一件容易的事。
