Tengo una página web con contenido dinámico. Digamos que es una página de producto. Cuando el usuario va directamente aexample.com/product/123 Quiero representar mi plantilla de producto en el servidor y enviar html al navegador. Sin embargo, cuando el usuario hace clic en un enlace para/product/555 Me gustaría usar JavaScript para actualizar la plantilla en el lado del cliente.

Me gustaría usar algo como Knockout.js o Angularjs, pero no veo cómo puedo rellenar previamente esas plantillas con algunos datos iniciales en el servidor y aún tener una plantilla que funcione en el cliente. es decir, si mi plantilla angular es esto:

<ul>
    <li ng-repeat="feature in features">
      {{feature.title}}
      <p>{{feature.description}}</p>
    </li>
</ul>

Cuando el usuario va directamente a la URL, necesito algo que aún funciona como una plantilla angular, pero que se rellena con el html del producto actual. Obviamente esto no funciona:

<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>

Parece que mi única opción es enviar el HTML procesado por el servidor al navegador junto con una plantilla coincidente por separado ...

En ese caso, me gustaría evitar escribir cada plantilla dos veces. Lo que significa que debo cambiar a JavaScript para el idioma de mi servidor (que no me agradaría) o elegir un lenguaje de plantilla que compile tanto en Java como en JavaScript y luego encontrar una manera de piratearlo en Play Framework (que es lo que Actualmente estoy usando.)

¿Alguien tiene algún consejo?